Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Echarts is my most used chart tool, and it is a complete ecology and content that we can use on a regular basis. Recently, I used Echarts to make a page for a big data platform, which needed a lot of charts. Use process also encountered some more difficult problems or configuration manual hidden deep some attributes, today to record.

1. Ungrid the chart and change the color of the grid

LineStyle: {color: '# CCC '// Change the color of lineStyle}},Copy the code

2. Modify the style of coordinate axes

xAxis: [ { type: 'category', boundaryGap: false, data: [' in January, February, march, April, may, 'June'], axisLine: {graphics.linestyle: {color: "# CCC"}}, axisTick: {show: False // Uncalibration}, axisLabel:{// font style changes show: true,// show hidden textStyle:{color:"# CCC "}}, // control whether grid lines show splitLine: {show: LineStyle: {color: '# CCC '// Change the color of lineStyle}},}], yAxis: [{type: 'value', name: '()' axisLine: {graphics.linestyle: {color: # CCC, fontSize: '16'}}, axisTick: {show: false / / remove scale},}].Copy the code

3. Some style modification or configuration of ring graph

Title: {text: value.value+' time ', subtext: value.name, x: 'center', y: 'center', itemGap: 0, textStyle: {fontSize: 26, fontWeight: 'bold', color: 'RGB (0,237,255)'}, subtextStyle: {fontSize: 16, fontWeight: 'bold', color: '# FFF '},}, clear series: [{hoverAnimation:false,// Add this property}]Copy the code

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

Add true option && myChart. SetOption (option,true);Copy the code

5. Use of gradient colors on charts

echarts.graphic.LinearGradient

series: [ { type: 'pie', center: ['50%', '49%'], radius: ['45%', '73%'], // minAngle: 0, startAngle: 0, // avoidLabelOverlap: true, // Whether to enable avoidLabelOverlap 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) {var colorList = [{c1: '#3288FC', c2: '#36B4FD' }, { c1: '#CBA0FF', c2: '# 598 efe'},] return new echarts. Graphic. That LinearGradient (1, 0, 0, 0, [{/ / color gradient function in the first four parameters respectively in four locations on the left, down, right, offset: 0, color: colorList[params.dataIndex].c1 }, { offset: 1, color: colorList[params.dataIndex].c2 }]) } } } } ]Copy the code