vue echarts带渐变效果折线图
Cherry☼ 人气:01、安装echarts
npm install echarts --save
2、引入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>
加载全部内容