[JavaScript知识库]柱状图-堆叠柱状图

效果图

this.state.workChartList的数据结构

const workChartList = [
 { name: "居民热线", chartData: [5, 8, 8, 7, 0, 5, 6, 5, 9, 5, 4, 7] },
 { name: "日常调度类", chartData: [5, 6, 8, 8, 5, 8, 5, 9, 8, 7, 3, 6] },
 { name: "调度预警类", chartData: [6, 8, 8, 7, 4, 6, 6, 9, 6, 8, 5, 3] },
 { name: "抢维修类", chartData: [1, 2, 3, 1, 4, 5, 6, 3, 9, 7, 8, 7] },
 { name: "物质申请类", chartData: [5, 8, 8, 7, 0, 5, 6, 5, 9, 5, 4, 7] },
 { name: "其他类", chartData: [5, 6, 8, 8, 5, 8, 5, 9, 8, 7, 6, 0] },
];

option相关代码 关键是每个serise需要设置同样的stack属性

	var colorList = ["#72fbfd", "#56c2f9", "#2e69e9", "#7a23f5", "#8082f7", "#ab4399"];
    const xData = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
        backgroundColor: "#030e2d",
        borderColor: "#030e2d",
        textStyle: {
          fontSize: "12px",
          color: "#96A4F4",
        },
      },
      color: colorList,
      legend: {
        left: "center",
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          fontSize: "12px",
          color: "#96A4F4",
          padding: [3, 0, 0, 0],
        },
      },
      grid: {
        left: 20,
        bottom: 20,
        top: 30,
        right: 20,
      },
      xAxis: {
        name: "\n\n(月)",
        type: "category",
        nameTextStyle: {
          color: "#7089ba",
          fontSize: "10px"
        },
        nameGap: -9,
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "#7089ba",
            fontSize: "10px"
          },
          margin: 6, //刻度标签与轴线之间的距离。
        },
        axisLine: {
          lineStyle: {
            color: "#414965",
          },
        },
        axisTick: {
          show: false,
        },
        data: xData,
      },
      yAxis: {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "#7089ba",
            fontSize: "10px",
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "#414965",
            opacity: 0.3,
          },
        },
      },
      series: [],
    };
    if (!this.state.workChartList) return;
    const seriesItem = this.state.workChartList;
    seriesItem.map((item, index) => {
      option.series.push({
        name: item.name,
        type: "bar",
        stack: "总数",
        barWidth: '50%',
        label: {
          show: false,
          position: "insideRight",
        },
        data: item.value,
        itemStyle: {
          normal: {
            label: {
              show: false, //开启显示
              position: "top", //在上方显示
              textStyle: {
                //数值样式
                color: "#fff",
                fontSize: "12px",
                fontWeight: 100,
              },
            },
          },
        },
      });
    });
    this.Chart_init2 = echarts.init(this.Chart_dom2.current);
    this.Chart_init2.clear();
    this.Chart_init2.setOption(option);