echarts个性柱状图

样式展示：

示例代码：

html:

<div id="charts" class="main_container"></div>

js

//初始化方法
    getOption(c, d, e, f) {
      var QYThingChart = this.$echarts.init(
        document.getElementById("charts")
      );
      QYThingChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，'line' | 'shadow'
          },
          formatter(params) {
            return `${params[0].seriesName}：${params[0].value}<br/>${params[1].seriesName}：${params[1].value}<br/>${params[2].seriesName}：${params[2].value}`;
          },
        },
        legend: {
          data: ["xxx", "xxx", "xxx"],//使用时请替换xxx为自己的实际数据
          icon: "horizontal",
          itemWidth: 20,
          itemHeight: 5,
          top: "5%",
          textStyle: {
            //图例文字样式
            color: "#8F93A2",
            fontSize: 18,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五"],
          axisTick: {
            show: false, // 设置x轴的刻度线
          },
          axisLine: {
            lineStyle: {
              color: "#3B537A",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#8F93A2", // 设置字体颜色
              fontSize: 22,
            },
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, //坐标轴刻度线
          },
          axisLine: {
            show: false, // 坐标轴线
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed", // 虚线类型
              color: "#273E63",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#8F93A2", // 字体颜色
              fontSize: 22,
            },
          },
        },
        series: [
          {
            name: "xxx", //使用时请替换数据名称
            type: "bar",
            stack: "总量",
            barWidth: 30,
            itemStyle: {
              normal: {
                color: "#159AFF",
              },
            },
            label: {
              normal: {
                show: false,
                position: "insideRight",
              },
            },
            data: c,
          },
          {
            name: "xxx",//使用时请替换数据名称
            type: "bar",
            stack: "总量",
            barWidth: 30,
            itemStyle: {
              normal: {
                color: "#15FFF6",
              },
            },
            label: {
              normal: {
                show: false,
                position: "insideRight",
              },
            },
            data: d,
          },
          {
            name: "xxx",//使用时请替换数据名称
            type: "bar",
            stack: "总量",
            barWidth: 30,
            itemStyle: {
              normal: {
                color: "#EECB5F",
              },
            },
            label: {
              normal: {
                show: false,
                position: "insideRight",
              },
            },
            data: e,
          },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#0B285D",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 5,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [30, 2],
            symbolPosition: "start",
            symbolOffset: [0, 1],
            data: f,
            width: 1,
            z: 10,
            zlevel: 1,
          },
        ],
      });
      this.echartResize(charts);//自适应窗口方法
    },
    echartResize(e){
    	window.addEventListener("resize", function () {
        	e.resize();
      	});
    },
//调用接口获取数据
getData(){
//c,d,e,f为模拟数据，根据接口返回数据结构可以重写逻辑
	  let c = [320, 302, 301, 334, 390];
      let d = [120, 132, 101, 134, 90];
      let e = [220, 182, 191, 234, 290];
      let f = [];//f为横线样式，f的数组是为了显示高度，为各组数据之和
      c.map((it, index) => {
        f.push(Number(it) + Number(d[index]) + Number(e[index]));
      });
      this.getCompanyThings(c, d, e, f);
}