ehcarts图示例 带边框的柱体分裂柱状图

ehcarts图示例 带边框的柱体分裂柱状图 效果：

      let option = {
        tooltip:{
          axis:"axis",
          formatter(v){
            if(v.data.flag){
              return v.name+"："+v.value
            }else {
              return v.name+"："+v.data.trueValue
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff"
          }
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#061349"
            }
          },
          axisLabel: {
            color: "#fff"
          }
        },
        series: [
          {
            //柱子
            trueData:true,
            type: 'bar',
            barWidth: 13,
            data:[120, 200, 150, 80, 70, 110, 130].map(item=>{
              let itemStyle = {
                "color": {
                  "x": 1,
                  "y": 0,
                  "x2": 0,
                  "y2": 0,
                  "type": "linear",
                  "colorStops": [{
                    "offset": 0,
                    "color": "rgba(69, 232, 246)"
                  }, {
                    "offset": 1,
                    "color": "rgba(69, 232, 246,0)"
                  }]
                },
              }
              return {
                itemStyle,
                value:item,
                flag:true
              }
            }),
          },
          {
            //背景
            trueData:false,
            data:[120, 200, 150, 80, 70, 110, 130].map(item=>{
              let itemStyle = {
               color:"#000032",
                borderColor: "#465298",
                borderWidth: 2,
              }
              return {
                itemStyle,
                value:200,
                flag:false,
                trueValue: item
              }
            }),
            type: 'bar',
            barGap: "-140%",
            z: 1,
            barWidth: 24,
          },
          {
            //分隔
            trueData:false,
            type: "pictorialBar",
            symbolRepeat: "fixed",
            symbolMargin: 20,
            symbol: "roundRect",
            symbolClip: true,
            symbolSize: [3, 13],
            symbolPosition: "start",
            symbolOffset: [-3, -3],
            data:[120, 200, 150, 80, 70, 110, 130].map(item=>{
              let itemStyle = {
               color:"#000032",
              }
              return {
                itemStyle,
                value:item,
                flag:false,
                trueValue: item
              }
            }),
            z: 4,
            animationEasing: "elasticOut",
          },
        ]
      };