During this period, I received a demand to add a line with the maximum difference to the line chart in the project, as shown in the following two figures, and connect a line where the biggest difference is found in the two line segments.

At first, I didn’t think it was difficult. I looked at the project directly. This project encapsulates Echarts again, setting many parameters… Anyway… Open dry!

First try

The background sent over the data, a set of (two) coordinate points, along with two other lines. Let’s just leave that alone and see how this form of data would be plotted.

Yi? What the hell is this? Don’t care about the color of the thread, I changed it… Look at the configuration

xAxis: {
        type: 'category', data: data.xAxisValue? data.xAxisValue:dataObj.xAxisData }Copy the code

I have a bad feeling…

Take a look at the format of the data returned in the background

List1: [{xAxis yAxis: 0:0}, {yAxis: 0.1, xAxis: 2} {yAxis: 0.2, xAxis: 5,}...].Copy the code

Well, nice neat x and y point format

How does the rendered data look after the final packaged echarts processing

List: [0, 0.1, 0.2]Copy the code

Are you fucking kidding me? Is that what it means to scale the x axis and then fill in the data? So the data gets processed down to the y value, right? Take a look at the final printed configuration parameters

xAxis: {
  type: "category"Data: [] 6... }Copy the code

No wonder there was such a strange line just now, it is really so… Since there are only two points (enough to draw a line anyway), the line appears directly at 0 on the X-axis…

Second try

Since it is not easy to change the package components (if you change the diagram elsewhere, the pot will explode), I thought, why not change the array length of the difference line to the same as the other two lines…

Option.series [2].data.length = Option.xaxy.data.length // Set the array length directly Option.series [2].data[x] = y1 option.series[2].data[x] = y2 option.series[2].data[x] = y2 option.series[2].data[x] = y2Copy the code

If the Echarts array is empty, Tips will not be drawn by default: a little knowledge that can be used to draw the breakpoint line

Why bend ah!! I’m straight!!

gas

Can’t give up. Poor code farmer can’t give up

If you look at the code again, that’s because the X-axis is incrementing sequentially, so you can’t change it. So the point that I put in by hand is actually

list: [
  {
    x: 100,
    y: 0,
  }
  {
    x:101,
    y: 1,
  }
]
Copy the code

In other words, the two points do not have the same X-axis coordinates, so they do not draw a line perpendicular to the X-axis. But the x-coordinate configuration is encapsulated, unless to change the encapsulated source…

No, I can’t take the blame!

This is not a problem that can be solved in a regular array, since there is no way to have two points with the same X value. So I came up with the markLine

Try markLine for the third time

Echarts provides the markLine function, shown below as a dotted line with an arrow.

Why do you want to use markLine? Because it won’t be affected by the original configuration. Marklines seem to be lines parallel to the X-axis, but Echarts are rich enough to make them vertical.

let markLine = {
        name:'Difference line'.type:'line',
        markLine: {
            normal:{
              lineStyle:{
                width:2,
                type:'solid', 
              },
            }
          },
          symbol:'none', // with or without arrow data: [[{coord:[x1,y1]}, {coord:[x2,y2]}]]}} option.series[2] = markLineCopy the code

There you go, happy Coke!