Awesome Chartecharts 配置项内容和展示

累加柱状图

      option = {
    title: {
        text: 'Awesome Chart'
    },
    tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            var tar = params[1];
            return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          splitLine: { show: false },
          axisLabel: {
            show: true,
            interval: 0,
          },
          axisTick: {
            alignWithLabel: true,
          },
          data: [
            "Total",
            "Rent",
            "Utilities",
            "Transportation",
            "Meals",
            "Other",
          ],
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
             {
            name: "背景",
            type: "bar",
            label: {
              show: true,
              position: "top",
              color: "#333",
            },
            barGap: "-100%",
            itemStyle: {
              normal: {
                color: "transparent",
              },
            },
            data: [300, 1200, 1400, 1700, 2900],
          },
          {
            name: "Placeholder",
            type: "bar",
            stack: "Total",
            itemStyle: {
              borderColor: "transparent",
              color: "transparent",
            },
            emphasis: {
              itemStyle: {
                borderColor: "transparent",
                color: "transparent",
              },
            },
            data: [0, 300, 1200, 1400, 1700, 0],
          },
          {
            name: "Life Cost",
            type: "bar",
            // barWidth: 30,
            stack: "Total",
            label: {
              show: true,
              position: "inside",
              color: "#fff",
            },
            itemStyle: {
              color: "#F35875",
              barBorderRadius: 6,
            },
            data: [
              300,
              900,
              200,
              300,
              1200,
              {
                value: 2900,
                itemStyle: {
                  color: "#F5A21D ",
                },
              },
            ],
          },
      ],
};