Echarts stepping on the pit

Echarts stepping on the pit

After receiving a request, draw a histogram, the two lines are perpendicular to the x-axis and the y-axis. It
feels no difficulty.
Look at the document and start the online test.
Echarts provides the markLine function (chart marking)

option = {
    xAxis: {
        type: 'category',
        data: ['20', '30', '40', '55', '60', '70', '80']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
        }
    },{
            type: 'line',
            markLine: {
                data: [{
                    name: '均值',
                    yAxis: 62,
                    itemStyle: { color: 'red' },
                    label: { show: true, position: 'insideEndBottom', formatter: '均值 {c}' },
                }, {
                    name: '均值',
                    xAxis: 32,
                    itemStyle: { color: '#339dff' },
                    label: { show: true, position: 'insideEndBottom', formatter: '均值 {c}' },
                }]
            }
        }]
};

The operation is shown in the figure: the
marking line perpendicular to the x-axis is not displayed. After
several attempts, it is found that the marking line can be successfully displayed by setting the x-axis type to value

option = {
    xAxis: {
        type: 'value',
        data:['70', '30', '30', '55', '80', '70', '80']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
        }
    },{
            type: 'line',
            markLine: {
                data: [{
                    name: '均值',
                    yAxis: 62,
                    itemStyle: { color: 'red' },
                    label: { show: true, position: 'insideEndBottom', formatter: '均值 {c}' },
                }, {
                    name: '均值',
                    xAxis: 32,
                    itemStyle: { color: '#339dff' },
                    label: { show: true, position: 'insideEndBottom', formatter: '均值 {c}' },
                }]
            }
        }]
};

The operation is shown in the figure:
According to the background, the x-axis data is returned as an unordered array. This method does not correspond to the correct value.
Check the document. Baidu found that when the x-axis is of the value type and the y-axis is of the value type, the value should be written to go to series, and paired in pairs

option = {
    
    xAxis: {
        type: 'value',
    },
    yAxis: {
        type: 'value'
    },
    series: [{
            data: [
                [30.1, 170],
                [21.1, 110],
                [10.1, 70],
                [70.1, 200],
                [40.1, 120],
                [50.1, 120],
                [62.1, 168]
            ],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            }
        },
        {
            type: 'line',
            markLine: {
                data: [{
                    name: '均值',
                    yAxis: 62,
                    itemStyle: { color: 'red' },
                    label: { show: true, position: 'insideEndBottom', formatter: '均值 {c}' },
                }, {
                    name: '均值',
                    xAxis: 30,
                    itemStyle: { color: '#339dff' },
                    label: { show: true, position: 'insideEndBottom', formatter: '均值 {c}' },
                }]
            }
        }
    ]
};

Run as shown:

Attach markLine data configuration

The data array of the marking line. Each array item can be an array of two values, respectively representing the start and end of the line. Each item is an object. There are several ways to specify the position of the start or end.

1. Use the x, y attributes to specify the screen coordinates of the relative container, in pixels, and support percentages.
2. Use the coord attribute to specify the coordinate position of the data in the corresponding coordinate system. A single dimension supports the setting of'min','max', and'average'.
3. Mark the maximum and minimum values ​​in the series directly with the type attribute. At this time, you can use valueIndex or valueDim to
   specify the maximum, minimum, and average value in which dimension.
4. If it is a Cartesian coordinate system, you can also specify only xAxis or yAxis to achieve a line with a certain value on the X axis or Y axis.
   When multiple attributes exist at the same time, the priority is in the order described above. It can also directly set the type of the marking line through type, whether it is the maximum line or the average line. Similarly, at this time, you can specify the dimension by using valueIndex.

data: [

    {
        name: '平均线',
        // 支持 'average', 'min', 'max'
        type: 'average'
    },
    {
        name: 'Y 轴值为 100 的水平线',
        yAxis: 100
    },
    [{
            // 起点和终点的项会共用一个 name
            name: '最小值到最大值',
            type: 'min'
        },
        {
            type: 'max'
        }
    ],
    [{
            name: '两个坐标之间的标线',
            coord: [10, 20]
        },
        {
            coord: [20, 30]
        }
    ],
    [{
        // 固定起点的 x 像素位置，用于模拟一条指向最大值的水平线
        yAxis: 'max',
        x: '90%'
    }, {
        type: 'max'
    }],
    [{
            name: '两个屏幕坐标之间的标线',
            x: 100,
            y: 100
        },
        {
            x: 500,
            y: 200
        }
    ]
]