echarts sets the colors of different vertical intervals, and the x-axis customizes the axis scale range.

Requirement: Set the vertical range interval. Different range intervals have different colors and different prompt information. Then modify the fixed spacing range of the x-axis, so that 0-200-400-600 is changed to 0-340-476-754. Here I It is implemented using markLine. Here I also use the flipping of the x-axis so that the display is mirrored.

1. Effect

2. Main code

inverse: flip axis

The type must be value, otherwise the picture will not be displayed. The other thing is to hide the x-axis, and then use markLine to draw a line manually.

 xAxis: {
                    inverse: true,
                    type: 'value',
                    axisTick: { show: false }, // Hide tick marks
                    splitLine: { show: false }, // Hide the split line
                    axisLabel: { show: false } // Hide scale values
                },

Use markLine to draw lines, data is the interval data of the line,

lineStyle: { color: ‘black’, type: ‘dotted’ }, line color and type, optional solid (solid line), dashed (dashed line), dotted (dotted dotted line)

 markLine: {
                            symbol: false, // cancel arrow
                            silent: true, // Cancel mouse hover event
                            label: {
                                position: 'start', // change label position
                                formatter: (obj) => obj.value // Format label text
                            },
                            lineStyle: { color: 'black', type: 'dotted' },
                            data: [0, 530, 580, 630].map((val) => {
                                return {
                                    xAxis: val
                                };
                            })
                        },

Pay attention to this data. The value of data is the difference between 530-580. If the difference is 50, write 50. If you write too much, the picture will be wrong. . .

 {
                        name: '',
                        tooltip: {
                            trigger: 'item',
                            formatter: '\\
Surrounding rock level: IV<br/>\\
. '
                        },
                        type: 'bar',
                        stack: 'total',
                        itemStyle: {
                            color: 'green'
                        },
                        label: {
                            show: true,
                            formatter: 'IV',
                            color: 'black'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [
                            {
                                value: 50,
                                xAxis: 1
                            }
                        ]
                    },

3. Complete code

4. Other supplements

This is the content displayed after the mouse is moved. You can customize the content, or set the distance between the pop-up window and the mouse, etc.

 // The pop-up box that the mouse moves into
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Axis indicator, axis trigger is valid
            type: this.colunm.type ? this.colunm.type : 'shadow' //Default is shadow, optional: 'line' | 'shadow'
          },
          textStyle: {
            color: this.colunm.tooltipcolor,
            fontFamily: 'Equal line'
            // fontSize:'0.1rem'
          },
          borderColor: this.colunm.tooltipborderColor,
          backgroundColor: this.colunm.tooltipbackgroundColor,
          position: function (p) {
            //where p is the current mouse position
            return [p[0] + 10, p[1] - 60]
          },
          // textStyle: {
          // fontSize: 12 // Font size
          // }
          // confine: true,
          // extraCssText: 'white-space: normal; word-break: break-all;',

          confine: true, //Limit the tooltip to be displayed within the chart range
          // extraCssText: 'max-height:100%;overflow:scroll', //Maximum height and overflow processing
          // enterable: true, //The mouse can enter the tooltip area and use the scroll bar
          // position: [100, 10]// position: ['10px', '10px']
          formatter: function (params) {
            // There is too much prompt content and the content is displayed on alternate lines.
            let astr = ''
            params.forEach((ele, index) => {
              astr + = `
                                <div style="display: block;height:20px;${
                                  index % 2 === 0
                                    ? 'width: 45%;'
                                    : 'width: 38%;'
                                }float:left;">
                                    <i style="width: 10px;height: 10px;display: inline-block;background: ${
                                      ele.color
                                    };border-radius: 10px;"></i>
                                    <span>${ele.seriesName}: ${ele.data}</span>
                                </div>
                            `
            })
            const b = '<div style="width: 200px;">' + astr + '<div>'
            return b
          }
        },

The article ends here, I hope it will be helpful to you~~