Echart柱状图背景板

。

。

 

 

 这种连续的背景板需要自己写背景series

echart只提供斑马线背景板 areaStyle

重点：

1.需要写两个y轴

2.需要多写一个series 并把data处设为[100,100,100,100,...] 

3.需要为每个series都写上yAxisIndex或者xAxisIndex看需求是横向柱状图还是纵向柱状图

双Y轴：

  yAxis: [
        {
          type: 'category',
          data: yAxisData.map((item, index) => ({
            value: item,
            textStyle: {
              width: 115,
              color: 'rgba(255, 255, 255, 0)',
              backgroundColor: {
                image:
                  item === '移动'
                    ? yidong
                    : item === '联通'
                    ? liantong
                    : dianxin,
              },
            },
          })),
          //y轴边线
          axisLine: {
            lineStyle: {
              width: 3,
              color: '#4A70C2',
            },
          },

          axisLabel: {
            margin: 35,
            height: 150,
            textStyle: {
              fontSize: 32,
              // color: 'red',
            },
          },
          position: 'left',
        },
        {
          data: yAxisData,
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          position: 'left',
        },
      ],

背景series：

{
      name: '',
      type: 'bar',
      barWidth: 160,
      yAxisIndex: 1,
      // yAxisIndex: 0,
      data: [100, 100, 100],
      itemStyle: {
        normal: {
          color: 'rgba(56,128,255,0.14)',
          borderColor: 'rgba(56,145,255,0.20)',
          borderWidth: 4,
        },
      },
    }