本篇内容主要讲解“vue+echarts怎么实带渐变效果的折线图”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue+echarts怎么实带渐变效果的折线图”吧!
效果如下：
1、安装echarts
npm install echarts --save2、引入echarts
import echarts from "echarts";//修改原型链,可在全局使用Vue.prototype.$echarts = echarts;3、创建图表 首先需要在 HTML 中创建图表的容器
<div id="echarts_coverage"></div>// css 图表的容器必须指定宽高#echarts_coverage{ width: 400px; height: 200px;}4、渲染图表
<script>export default { mounted() { this.initLineChart(); }, methods: { initLineChart() { let data = [ { 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, }, ]; let lineData = {}; lineData.label = data.map((item) => item.dateStr); lineData.data = data.map((item) => item.numberStr); let chart = this.$echarts.init( document.getElementById("echarts_coverage") ); let option = { 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怎么实带渐变效果的折线图”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
