先上效果图：echarts图表我写了很多，每次都忘记了。简单记录安装echartsnpminstallecharts。简单使用，在main.js中注册import*asechartsfrom'echarts'Vue.prototype.$echarts=echarts并创建一个chart.js文件，所有用到的图表，在charts.js中声明函数方法importechartsimport*asechartsfrom'echarts'第一行渐变图exportfunctiondrawLine(data){constoption={title:{text:data.title,//图表标题top:5,//距离容器底部的位置left:20,textStyle:{color:'#333',fontSize:'18px'}},tooltip:{trigger:'axis'},//容器边距网格：{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',轴号:{show:false//取消y轴缩放}}],series:{type:'line',smooth:true,//curvedata:data.yAxis,lineStyle:{//渐变显示颜色:{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//隐藏顶点}}returnoption}第二个多色渐变直方图导出函数drawColorBar(data){//声明渐变色constcolorArr=[[{offset:1,color:'#409EFF'},{offset:0,color:'#41B6E6'}],[{offset:1,color:'#FF585D'},{偏移量:0,颜色:'#FA8687'}],[{偏移量:1,颜色:'#05C6B7'},{偏移量:0,颜色:'#04DCD1'}],[{偏移量:1,color:'#3A3A3A'},{offset:0,color:'#838582'}],[{offset:1,color:'#FF7723'},{offset:0,颜色r:'#FE904C'}]]constyAxis=[]//给数据加上itemStyle做直方图渐变data.yAxis.map((item,index)=>{constitemBar={value:item,itemStyle:{color:newecharts.graphic.LinearGradient(0,0,0,1,colorArr[index])}}yAxis.push(itemBar)})constoption={title:{text:data.title,left:'center',top:10,textStyle:{color:'#333',fontSize:'16px',fontWeight:'normal'}},grid:{left:20,top:50,right:20,bottom:30},工具提示：{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',//barchartshowstopnumber标签：{show:true,position:'top',formatter:'{@score}times'},//列宽barWidth:30}]}returnoption}第三个空心圆留空圆图exportfunctiondrawPie(data){const选项={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}]}returnoption}页面中的导入方法chart1=this.$echart.init(document.getElementById('chart1'))this.chart1.setOption(drawLine(this.chart1Data))},添加resize事件，浏览器缩放会重新渲染echartswindow.addEventListener('resize',()=>{this.chart1.resize()})当侧边栏菜单缩小时，resize事件无法重新渲染。需要添加一个定时器来监听侧边栏的状态，延迟执行watch：{sidebar(){setTimeout(()=>{this.chart1.resize()},300)}},
