How to realize the line chart with gradual effect of vue+echarts
The main content of this article is to explain "how vue+echarts has a line chart with gradient effect". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "vue+echarts how to bring gradient effect of the line chart" it!
The effect is as follows:
1. Install echarts
Npm install echarts-save
2. Introduce echarts
Import echarts from "echarts"; / / modify the prototype chain. Use Vue.prototype.$echarts = echarts globally.
3. To create a chart, you first need to create a container for the chart in HTML
/ / the container for css charts must specify width and height # echarts_coverage {width: 400px; height: 200px;}
4. Render the chart
Export default {mounted () {this.initLineChart () }, methods: {initLineChart () {let data = [{dateStr: "first quarter of 2019", numberStr: 10,}, {dateStr: "first quarter of 2019", numberStr: 50,}, {dateStr: "first quarter of 2019", numberStr: 35,} {dateStr: "first quarter of 2019", numberStr: 92,}, {dateStr: "first quarter of 2019", numberStr: 70,}, {dateStr: "first quarter of 2019", 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: "Microsoft Yahei", 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: "quantity", type: "line", stack: "Total", / / 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", / / the color at 0%}, {offset: 0.5, color: "rgba (51, 180, and 21. 5)", / / the color at 100%} {offset: 1, color: "rgba (51, 180, 21. 1)", / / 100% of the color},], globalCoord: false, / / default is false} },],} Chart.setOption (option);},},}; at this point, I believe you have a deeper understanding of the "vue+echarts line chart with gradient effect". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
