先上效果图:
echarts图表写过不少,每次都忘,简略记录一下
装置echarts
npm install echarts
为了简略应用在main.js注册
import * as echarts from 'echarts'Vue.prototype.$echart = echarts而后创立一个chart.js文件,把所有用到的图表,申明函数办法
在charts.js引入echartsimport * as echarts from 'echarts'
首先第一个折线突变图
export function drawLine(data) { const option = { title: { text: data.title, //图表题目 top: 5, //间隔容器底部地位 left: 20, textStyle: { color: '#333', fontSize: '18px' } }, tooltip: { trigger: 'axis' }, // 容器边距 grid: { left: 50, top: 50, right: 20, bottom: 30 }, // 默认色彩 color: '#FF6B70', xAxis: [{ type: 'category', data: data.xAxis, axisTick: { show: false // 勾销x轴刻度 }, axisLine: { lineStyle: { color: '#D8D7D7' // 设置x轴色彩 } }, axisLabel: { textStyle: { color: '#666' // 设置x轴字体色彩 } } }], yAxis: [{ type: 'value', axisTick: { show: false // 勾销y轴刻度 } }], series: { type: 'line', smooth: true, // 曲线 data: data.yAxis, lineStyle: { // 突变显示 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#FF6B70' // 0% 处的色彩 }, { offset: 1, color: '#FF874C' // 100% 处的色彩 }], global: false }, width: 3, cap: 'round' }, showSymbol: false // 暗藏折点 } } return option}第二个多色突变柱状图
export function drawColorBar(data) { // 申明渐变色 const colorArr = [ [{ offset: 1, color: '#409EFF' }, { offset: 0, color: '#41B6E6' }], [{ offset: 1, color: '#FF585D' }, { offset: 0, color: '#FA8687' }], [{ offset: 1, color: '#05C6B7' }, { offset: 0, color: '#04DCD1' }], [{ offset: 1, color: '#3A3A3A' }, { offset: 0, color: '#838582' }], [{ offset: 1, color: '#FF7723' }, { offset: 0, color: '#FE904C' }] ] const yAxis = [] // 在数据增加itemStyle使柱状图突变 data.yAxis.map((item, index) => { const itemBar = { value: item, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, colorArr[index]) } } yAxis.push(itemBar) }) const option = { title: { text: data.title, left: 'center', top: 10, textStyle: { color: '#333', fontSize: '16px', fontWeight: 'normal' } }, grid: { left: 20, top: 50, right: 20, bottom: 30 }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: data.xAxis, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { textStyle: { color: '#333' } } }, yAxis: { type: 'value', show: false }, series: [{ data: yAxis, type: 'bar', // 柱状图显示顶部数字 label: { show: true, position: 'top', formatter: '{@score} 次' }, // 柱宽 barWidth: 30 }] } return option}第三个空心圆留白圆形图
export function drawPie(data) { const option = { title: { text: data.title, left: 'center', top: 10, textStyle: { color: '#333', fontSize: '16px', fontWeight: 'normal' } }, color: ['#04DCD1', '#EED813', '#0261D4'], grid: { left: 20, top: 50, right: 20, bottom: 30 }, tooltip: { trigger: 'item' }, // 数据标记 legend: { orient: 'vertical', // 垂直显示 left: 5, bottom: 10, itemWidth: 10, itemHeight: 10, icon: 'circle' // 显示方式为圆 }, series: [{ type: 'pie', seriesLayoutBy: 'row', radius: ['60%', '75%'], // 外显线的长度 labelLine: { length: 20, length2: 20 }, // 留白,将borderColor的色彩和背景色统一 itemStyle: { borderWidth: 10, borderColor: '#fafafa' }, data: data.data }] } return option}在页面中导入办法
import { drawLine, drawColorBar, drawPie } from '../../utils/charts'在data中申明chart1
drawLine() { this.chart1 = this.$echart.init(document.getElementById('chart1')) this.chart1.setOption(drawLine(this.chart1Data))},增加resize事件,浏览器缩放将echarts从新渲染
window.addEventListener('resize', () => { this.chart1.resize()})侧边栏菜单膨胀时,resize事件无奈从新渲染,须要增加定时器
监听侧边栏状态,延时执行
watch: { sidebar() { setTimeout(() => { this.chart1.resize() }, 300) } },