echarts折柱混合结合目标线使用

首先看需求：

产品图中内容可以看出来 此图表涉及到两个y轴 同时折煮混合 折线图会有目标线，柱形图也有目标线。

根据echarts的配置项来看，目标线我们可以使用警戒线markline进行设置，但是警戒线的长度一般是横穿整个图表的虚线，折线图数据可以使用marklin来展示，但是对于柱形图的需求，柱形图要求每个柱状图上方有一截和此柱状图等宽的目标线，如果使用警戒线来设置，宽度不好控制。

由此想到一个办法可以通过xAxis属性设置两个横坐标，第一个展示真实数据，第二个展示目标值数据，但是由于第二个只能展示一条线，那么第二个坐标的值为目标的值颜色设为透明色，并在这个设为透明色的目标值上叠加一个数据很小的柱状图 这样的话，效果看起来是和产品图类似的，同时图例也可以同时控制这三个柱状图，上代码：

两个横坐标:

xAxis: [
     { type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
     },
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisPointer: {
          type: 'none',
        }
      }//这个坐标的不显示横坐标等等属性
  ],

坐标数据：

 series: [
    {
      name: 'Evaporation',
      type: 'bar',
      xAxisIndex:0,//展示在第一层横坐标上
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
      ]
    },//实际数据展示，
    {
      name: 'Evaporation',
      xAxisIndex:1,//展示在第二层横坐标上
      stack: 'Group1',//透明的目标柱状图叠加一小段横线，属性为相同值便可垂直叠加
      type: 'bar',
      itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)' /* 设置bar为透明色隐藏，撑起下面横线 */,
            },
          },
      data: [
         15, 76, 7.0, 23.2, 25.6, 76.7, 135.6,
      ]//目标值的数据
    },
    {
      name: 'Evaporation',
      xAxisIndex:1,//展示在第二层横坐标上
      stack: 'Group1',//叠在透明的目标值柱状图上当做横线
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
       itemStyle: {
            normal: {
              color: 'red' /* 设置bar为隐藏，撑起下面横线 */,
            },
          },
      data: [
        0.5,  0.5,0.5,  0.5, 0.5,  0.5,0.5, 
      ]
    },
    ]

简单效果如图：