Echarts柱状图柱子上“画线”

需求背景

需要在柱状图上实现“画线”，作为其它数据的标识，图例

代码实现思路：“画线部分”由两部分组成，一部分透明柱子加线的部分

    let e5Data = {
        lastVal:[10,20,30,40,50],
        stationName:['name1','name2','name3','name4','name5'],
        breakevenEle:[6,30,42,40,10]
        };
    let lastVals = e5Data.lastVal;
    /*计算横线的显示高度，echarts图的y轴是自适应的，所以这里求出最大值，并按照比例计算出线的高度，这里可以自己调整*/
    let lineHeightData = eval("Math.max(" +lastVals.toString()+")") * 0.003;/*计算盈亏点线的高度*/
    let lineHeightDatas = [];
    lastVals.forEach(()=>{ 
        lineHeightDatas.push(lineHeightData);
    });
    option = {
      grid: {
            borderWidth: 1,
        },
      legend: {
            /*这里是四个指标，（去年同期和本月是柱状，增减百分比是折线，平衡点是在柱状上的横线）*/
            data: ['去年同期','盈亏平衡点'],
            textStyle: {
                color: '#A7A7A7',
            },
        },
      yAxis: [
            /*横坐标*/
            {
                axisTick: {show: false},
                type: 'category',
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#f8f8f8',//左边线的颜色
                        width: '1.5'//坐标线的宽度
                    },
                },
                axisLabel: {
                    color: "#A7A7A7",
                },
                data: e5Data.stationName,
                axisPointer: {
                    type: 'shadow'
                }
            },
            /*隐藏一个不显示的横坐标，用作横线的位置*/
            {
                type: 'category',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                data: []
            },
        ],
      xAxis: [
                {
                    type:'value',
                    axisLine: {show: false},
                    axisTick: {show: false},
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: ['#F8F8F8'],
                        width: 1,
                        type: 'solid'
                      }
                 },
              axisLabel: {
                color: ['#A7A7A7'],
                showMaxLabel: true,
                formatter: '{value}'
              }}
          ],
      series: [
          {
            // name: '去年同期',/*基础数据*/
            type: 'bar',
            barMaxWidth: 20,
            itemStyle: {
              normal: {
                color: '#238ef8'
              }
            },
            data: e5Data.lastVal
          },
          {
            /* 这个bar是撑起横线的高度，并设置透明*/
            // name: "盈亏平衡点",
            stack: 'breakevenEleGroup', /* 盈亏点数据组，需要设置才能将两个bar堆积在一起*/
            type: 'bar',
            barMaxWidth: 20,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)'/* 设置bar为隐藏，撑起下面横线*/
              }
            },
            data: e5Data.breakevenEle
          },
          {
            /* 这个bar是横线的显示*/
            // name: "盈亏平衡点",
            stack: 'breakevenEleGroup', /* 盈亏点数据组，需要设置才能将两个bar堆积在一起*/
            type: 'bar',
            barMaxWidth: 40,
            yAxisIndex: 1,
            barGap: '0',
            itemStyle: {
              normal: {
                color: '#c6504d'

              }
            },
            data: lineHeightDatas
          }
        ]
      }