vue+echarts怎么实带渐变效果的折线图(echarts,vue,开发技术)

效果如下：

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>