echarts给柱状图加一条目标线

1. 思路

画第二个x轴，在这个轴上绘制堆叠柱状图，下面的柱状图隐藏，上面的柱状图设置成白色，data取小一点，就可以看成一条直线了

2. 代码

xAxis: [
    {
        type: 'category',
        data: data.xArray,
        splitLine: {
            show: false
        },
        axisLabel: {// x轴字体设置
            fontSize: 12,
            color: '#ffffff',// 字体颜色
            interval: 0,// 不间隔显示标签，即显示所以标签
            rotate: 30// 标签倾斜角度
        },
        axisLine: {// x轴轴线设置
            lineStyle: {
                color: '#ffffff',
                width: 2,// 这里是为了突出显示加上的
            }
        }
    },
    {// 第二个x轴，不显示
        type: 'category',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisPointer: {
            type: 'none',
        },
        splitArea: {
            show: false
        },
        splitLine: {
            show: false
        },
        data: data.xArray
    }
],
// series里面加入2个bar(想在每个柱子上都画横线的话，则增加2n个bar，每两个bar为一组，构成一个bar)
{
    name: "目标值",
    stack: 'breakevenEleGroup',
    type: 'bar',
    barWidth: "75%",
    xAxisIndex: 1,
    itemStyle: {
        normal: {
            color: 'rgba(0,0,0,0)',/*设置bar为隐藏*/
            label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                formatter: function (params) {
                    //console.log(params);
                    return params.value;
                },// 百分比显示
                textStyle: { // 数值样式
                    color: 'white',
                    fontSize: 12,
                }
            }
        }
    },
    data: data.goal
},
{
    /*这个bar是横线的显示*/
    name: "目标值上面的柱子",
    stack: 'breakevenEleGroup',
    type: 'bar',
    xAxisIndex: 1,
    barWidth: "75%",
    itemStyle: {
        normal: {
            color: 'white'
        }
    },
    data: [0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3],
},

3. 效果

标签：bar,show,color,0.3,柱状图,false,目标线,data,echarts
来源： https://www.cnblogs.com/yddwinter/p/16326630.html