vue+echarts怎么实带渐变效果的折线图
vue+echarts怎么实带渐变效果的折线图
本篇内容主要讲解“vue+echarts怎么实带渐变效果的折线图”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue+echarts怎么实带渐变效果的折线图”吧!
效果如下：
1、安装echarts
npminstallecharts--save
2、引入echarts
importechartsfrom"echarts";//修改原型链,可在全局使用Vue.prototype.$echarts=echarts;
3、创建图表 首先需要在 HTML 中创建图表的容器
<divid="echarts_coverage"></div>//css图表的容器必须指定宽高#echarts_coverage{width:400px;height:200px;}
4、渲染图表
<script>exportdefault{mounted(){this.initLineChart();},methods:{initLineChart(){letdata=[{dateStr:"2019第1季度",numberStr:10,},{dateStr:"2019第1季度",numberStr:50,},{dateStr:"2019第1季度",numberStr:35,},{dateStr:"2019第1季度",numberStr:92,},{dateStr:"2019第1季度",numberStr:70,},{dateStr:"2019第1季度",numberStr:80,},];letlineData={};lineData.label=data.map((item)=>item.dateStr);lineData.data=data.map((item)=>item.numberStr);letchart=this.$echarts.init(document.getElementById("echarts_coverage"));letoption={color:["#3DB821"],tooltip:{trigger:"axis",},grid:{left:"3%",right:"5%",bottom:"8%",top:"20%",containLabel:true,},xAxis:{type:"category",offset:6,axisLine:{lineStyle:{color:"#CCCCCC"}},axisTick:{show:false,},axisLabel:{interval:0,rotate:18,textStyle:{color:"#000",fontStyle:"normal",fontFamily:"微软雅黑",fontSize:13,margin:10,},},data:lineData.label,},yAxis:{type:"value",name:"(%)",nameTextStyle:{align:"right",color:"#4D4D4D",},axisLine:{show:false,lineStyle:{color:"#CCCCCC"},},axisTick:{show:false},splitLine:{show:true,lineStyle:{type:"dashed",color:"#CCCCCC"},},axisLabel:{textStyle:{color:"#4D4D4D",fontSize:14,},},},series:[{name:"数量",type:"line",stack:"总量",//symbol:"circle",symbolSize:8,minInterval:6,data:lineData.data,smooth:false,areaStyle:{normal:{color:{x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:"#3DB821",//0%处的颜色},{offset:0.5,color:"rgba(51,180,21,.5)",//100%处的颜色},{offset:1,color:"rgba(51,180,21,.1)",//100%处的颜色},],globalCoord:false,//缺省为false},},},},],};chart.setOption(option);},},};</script>
到此，相信大家对“vue+echarts怎么实带渐变效果的折线图”有了更深的了解，不妨来实际操作一番吧！这里是恰卡编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
