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

This article mainly shows you "how to use vue+echarts chart", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use vue+echarts chart" this article.

Preface

Echarts is my most commonly used chart tool, and it is also a very complete ecology and content, enough for us to use normally.

Usage

1. Cancel the grid of the chart and modify the color of the grid

/ / controls whether gridlines display splitLine: {show: false, / / whether gridlines display / / change the style lineStyle: {color:'# ccc' / / modify gridlines color}}

2. Style modification of coordinate axes

XAxis: [{type: 'category', boundaryGap: false, data: [January', 'February', 'March', 'April', 'May', 'June'] AxisLine: {lineStyle: {color: "# ccc"}}, axisTick: {show: false / / remove scale}, axisLabel: {/ / font style modification show: true / / Show hidden textStyle: {color: "# ccc"}}, / / Control whether gridlines display splitLine: {show: false / / whether gridlines are displayed / / change the style lineStyle: {color:'# ccc' / / modify gridlines color}},}] YAxis: [{type: 'value', name:' (times)', axisLine: {lineStyle: {color: "# ccc", fontSize:'16'}} AxisTick: {show: false / / remove the scale},}]

3. Some style modification or configuration of the donut chart

/ / the style of the text in the center of the ring is modified title: {text: value.value+'', subtext: value.name, x: 'center', y:' center', itemGap: 0, textStyle: {fontSize: 26, fontWeight: 'bold', color:' rgb (0237255)'} SubtextStyle: {fontSize: 16, fontWeight: 'bold', color:' # fff'},}, / / the floating effect of mouse movement in the ring clears series: [{hoverAnimation:false,// adds this attribute}]

4. Switch multiple charts to clear the last loaded data.

Add trueoption & & myChart.setOption (option,true) to setOption

5. Use the gradient color of the chart.

Echarts.graphic.LinearGradient

Series: [{type: 'pie', center: [' 50%','49%'], radius: ['45%','73%'], / / minAngle: 0, startAngle: 0, / / gradient angle avoidLabelOverlap: true / / whether to enable emphasis: {label: {show: true, position: 'center'}}, data: seriesData, itemStyle: {emphasis: {shadowBlur: 10, shadowOffsetX: 0 ShadowColor: 'rgba (0,0,0,0.5)', label: {show: true,}} Normal: {color: function (params) {/ / Color gradient var colorList = [{C1:'# 3288FCY, c2:'# 36B4FD'} {C1:'# CBA0FF', c2:'# 598 EFE'},] return new echarts.graphic.LinearGradient (1,0,0,0) [{/ / the first four parameters of the color gradient function indicate that the four positions are left, bottom, right and top offset: 0, color: colorList [params.dataIndex] .c1}, {offset: 1 Color: ColorList [params.dataIndex] .c2})}] these are all the contents of the article "how to use vue+echarts Chart" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.