echarts实现栅栏式柱状图

echarts实现栅栏式柱状图

其实我们看着像栅栏的图表是echarts中的象形柱图pictorialBar

提前说明：

因为我这里仅做教程展示使用，所以颜色和数据都是默认写死的，可以根据自己的需求进行改进，改成动态配置的

这里的设计就是象形柱图加上作为背景的柱状图，重点其实是位置的调整。

右侧展示的多少多少亿元是使用的背景图的label来设置的，为了使他的位置在右上角。但是仅仅设置position: "insideTopRight"，有时候会发现效果不尽人意，总是存在偏差，这时候我们可以使用两个工具来帮助我们调整他的位置。

1. distance:只有设置了position之后才有效果，设置偏差
2. padding:如果偏差不大可以通过这一配置来实现校准，虽然这个设置也可以设置较大的偏差，但是对于需要自适应或者尺寸不定的情况下设置会存在不适配问题，解决办法也有，设置成动态的或者百分比。

例：
padding: [0, 15, 0, 0],
distance: -14,

没什么难点，重点就是小的修改上。

老样子，话不多说，源码奉上：

drawPictorialBarEcharts() {
      this.rightBottomEcharts = echarts.init(
        document.getElementById("right_bottom_echarts")
      );
      document
        .getElementById("right_bottom_echarts")
        .removeAttribute("_echarts_instance_");

      var colors = [
        "#20A6FF",
        "#00E9E3",
        "#20A6FF",
        "#00E9E3",
        "#20A6FF",
        "#00E9E3",
        "#20A6FF",
        "#00E9E3",
        "#20A6FF"
      ];
      var colors1 = [
        "rgba(4, 124, 255, .4)",
        "rgba(0, 249, 238, .4)",
        "rgba(4, 124, 255, .4)",
        "rgba(0, 249, 238, .4)",
        "rgba(4, 124, 255, .4)",
        "rgba(0, 249, 238, .4)",
        "rgba(4, 124, 255, .4)",
        "rgba(0, 249, 238, .4)",
        "rgba(4, 124, 255, .4)"
      ];
      var data = [5436, 3106, 4560, 968, 3106, 4560, 3106, 4560, 968];

      let option = {};
      option = {
        grid: {
          top: "5%",
          left: "5%",
          right: "8%",
          bottom: "5%",
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: {
          type: "category",
          align: "left",
          padding: [0, 0, 40, 10],
          axisLabel: {
            color: "#FFF",
            fontSize: 14,
            width: 80,
            padding: [0, 0, 50, 8],
            align: "left",
            formatter: (params) => {
              return `${params}`;
            },
            rich: {
              value: {
                color: "#fff",
                fontSize: 12,
                fontWeight: 500,
              },
            },
          },
          axisTick: "none",
          inverse: true,
          axisLine: {
            show: false,
          },
          data: [
            "品类名称",
            "品类名称",
            "品类名称",
            "品类名称",
            "品类名称",
            "品类名称",
            "品类名称",
            "品类名称",
            "品类名称",
          ],
        },
        series: [
          {
            type: "pictorialBar",
            barWidth: 10,
            legendHoverLink: false,
            silent: true,
            symbolRepeat: true,
            symbolMargin: 1.2,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [4, 10],
            symbolPosition: "start",
            symbolOffset: ["200%", 0],
            itemStyle: {
              color: function (params) {
                return colors[params.dataIndex];
              },
            },
            data: data,
          },
          {
            type: "bar",
            barWidth: 16,
            label: {
              show: true,
              padding: [0, 15, 0, 0],
              distance: -14,
              position: "insideTopRight",
              formatter: (params)=>{
                return `${data[params.dataIndex]}亿元`
              },
              fontSize: 14,
              color: "#FFF",
            },
            itemStyle: {
              barBorderRadius: [20, 20, 20, 20],
              color: function (params) {
                return colors1[params.dataIndex];
              },
            },
            data: [6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000],
          },
        ],
      };
      option && this.rightBottomEcharts.setOption(option, true);
    },