Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.