echart中如何在数字‘category‘ 类目轴中绘制相应位置的markLine标线

话不多说，先上效果图：

 基础版        

接下来介绍一下具体情境：

数据格式：

X轴数据：xAxisData = [0.06, 0.12, 0.18, 0.24, 0.31, 0.37,0.43, 0.49,0.56, 0.62];

Y轴数据：hist_data = [27, 19, 38, 14, 12, 3, 15, 14, 12, 3];

标志线数据：target_data = 0.16,  lsl_data = 0.28; 

需求分解：

可以看出X轴数据是有序递增，但并不是连续的，而标志线数据在X轴数据的范围内，但X轴数据数组中没有与其对应的值，这时，我又想将标志线数据画在X轴对应的位置上，该怎么办？

解决方案：

建立两个xAxis，一个用来表示 category 类目型数据（用于柱状图数据显示），一个用来表示 value 连续性数据（用于markLine标示线数据显示）；

使用 xAxisIndex 来选择series data所使用的X轴；

需要注意：两个X轴的大小范围要一致，这样用两个X轴绘出来的值才能对应起来

解决方案：

var xAxisData = [ 0.06, 0.12, 0.18, 0.24, 0.31, 0.37,0.43, 0.49,0.56, 0.62];
var hist_data = [ 27, 19, 38, 14, 12, 3, 15, 14, 12, 3];
var target_data = 0.16,lsl_data = 0.28;

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '6%',
        right: '6%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: xAxisData ,
        axisTick: {
            alignWithLabel: true
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#BFBFBF'
            }
        },
        axisLabel: {
            color: '#545454'
        }
    },
    {
        type: 'value',
        show: false,
        min: Math.min.apply(null, xAxisData),
        max:Math.max.apply(null, xAxisData)
    }],
    yAxis: [{
        type: 'value',
        axisLine: {onZero: false, show: false},
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: '#F1F1F1',
                opacity: '1'
            }
        },
        axisTick: {
            show: false
        }
    }],
    series: [{
        name: "CPK直方图",
        type: 'bar',
        data: hist_data,
        color: '#556AFF'
    },{
        name: "标志线",
        type: 'line',
        xAxisIndex: 1,
        markLine: { 
            symbol: 'none',
            silent: true,
            data: [ 
                {
                    xAxis: target_data,
                    lineStyle: {width: 2, color: 'red'},
                    label: {
                        show: true,
                        position: 'insideEndTop',
                        formatter: "target : " + '{c}',
                        color: 'red'
                    }
                },
                {
                    xAxis: lsl_data,
                    lineStyle: {width: 2, color: '#3AF671'},
                    label: {
                        show: true,
                        position: 'insideEndTop',
                        formatter: "LSL : " + '{c}',
                        color: '#3AF671'
                    }
                }
            ]
        },
        showSymbol: false,
        data: target_data
    }]
};

直接将代码粘贴到echart图表的编辑框中，即可看到效果。（例：https://echarts.apache.org/examples/zh/editor.html?c=bar-tick-align）

复杂情形可用于正态分布图表显示，处理方式同上。

正态分布版

正态分布chart图形可参考：

https://www.makeapie.com/editor.html?c=x_4gp4GYDQ
https://www.makeapie.com/editor.html?c=xBtzYvoXr2
https://www.cnblogs.com/daxiongblog/p/12679363.html