This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging

Question:

The echarts dashboard semi-circle looms

The reason:

Axisline.linestyle. color is currently set, not just in segments, but in some points with two layers of color set for gradient connection.

First, the full length of a layer of green, from left to right to reduce the transparency; From the 0.8 position to the end, a layer of yellow is laid and the transparency is increased from left to right.

The axisline.linestyle. color array is roughly set as follows:

AxisLine. Graphics.linestyle. Color = [[0, "rgba (255255255,0.2)"],... [0.9975, "rgba (0, 255, 0,0.005)"], [0.8, "Rgba (255, 255, 0,0.01)"],... [0.998, "rgba (255, 255, 0, 1)"], [1, "RGB (0, 255)"]]Copy the code

This makes for a natural transition, but on closer inspection, the echarts dashboard semicircle looms large.

The solution:

PS: Skip to the end for solution # 6: “the Perfect Echarts Dashboard Gradient Setup”

Sort the color array

AxisLine. Graphics.linestyle. Color = [[0, "rgba (255255255,0.2)"],... [0.8, "rgba (255, 255, 0,0.01)"],... [0.9975, "Rgba (0, 255, 0,0.005)"],... [0.998, "rgba (255, 255, 0, 1)"], [1, "RGB (0, 255)"]]Copy the code

Phenomenon:

The echarts dashboard’s lower semicircle disappears, but is overdone and unnaturally striated.

2, sort after the weight

The reason:

Since there are points like 0.96 that have two color Settings, remove the redo and leave the first or second one.

Phenomenon:

The echarts dashboard’s lower semicircle disappears, but it’s too obvious to be natural, with streaks still appearing. So the third thing that comes to mind is that you can’t just get rid of the repetition points but you can take the middle.

3, repeat point to take the middle value of the color

const uniqueArr = (oldArr) => { let newArray = [] for (let i = 0; i < oldArr.length; i++) { if (i > 0) { if (oldArr[i][0] ! == oldArr[i - 1][0]) { newArray.push(oldArr[i]) } else { let co1 = newArray[newArray.length - 1][1] let co2 = oldArr[i][1] let aaa = co1.split(',')[3].replace(')', '') let bbb = co2.split(',')[3].replace(')', '') let opacity = (parseFloat(aaa) + parseFloat(bbb)) / 2 newArray[newArray.length - 1][1] = 'rgba(128, 255, 0, ' + opacity + ')' } } } return newArray }Copy the code

Phenomenon:

The echarts dashboard’s lower semicircle disappears, but it’s too obvious to be natural, with streaks still appearing.

4. No color overlay

Phenomenon:

The echarts dashboard lower semicircle disappears, but it’s overly obvious and unnatural.

5, use axisTick. Graphics.linestyle. Color. The image attributes set the gradient index.

This method uses the scale as the map. You can no longer set the coordinate axis style axisline.linestyle.color because it is overwritten.

<img SRC ="/static/aaa.png" id="bg_img" style="display:none"/> <img SRC ="/static/aaa.png" id="bg_img" style="display:none"/> 30, splitNumber: 100, lineStyle: { color: { image: document.getElementById('bg_img'), repeat: 'no-repeat' }, width: 3}},Copy the code

Phenomenon:

The lower semicircle of the Echarts dashboard disappears, which is a natural transition, but it is no longer possible to set the coordinate axis style, dynamically gray a certain value, and the pointer cannot change with the current coordinate axis point color change.

Perfect echarts dashboard gradient setup

Use series!!

The style of each series is exactly the same, and the values are the same, but the axisline.linestyle. color must be set differently, and a separate gradient from beginning to end for each series will do.

Note:

Although multiple series are only used to overlay colors, they must be filled with data items and values, otherwise tooltip components and Pointers are out of sync and cannot be used to overlay colors.