收入支出正负柱状图

最近大屏项目用了echarts，先贴一个比较好的网站，有很多素材模板可选
https://www.makeapie.com/explore.html
来看一下实现后的效果图

正负值的话数值正负就行了，关键是设置stack属性–柱状堆叠图
具体代码

    init3() {
      let myChart = this.$echarts.init(document.getElementById("main7"));
      // Generate data
      let category = ['1月','2月','3月','4月','5月','6月',];
      // eslint-disable-next-line no-unused-vars
      let lineData = [];
      let barData1 = [];
      let barData2 = [];
      for (let i = 0; i < 6; i++) {
        let b = Math.random() * 200;
        let d = Math.random() * -200;
        barData1.push(b);
        barData2.push(d);
        console.log("barData1", barData1);
      }

      // option
      let option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#333",
            },
          },
        },
        legend: {
          data: ["原材料", "包材", "半成品", "成品"],
          top: '5%',
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          data: category,
          axisTick: {
            alignWithLabel: true,
          },

          splitLine: {
            show: false,
          },
          axisLabel: {
            //fontWeight:10,
            //interval:2,
            fontsize: 4,
            align: "center",
            color: "rgba(255,255,255,0.5)",
          },
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.2)",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              fontWeight: 10,
              fontsize: 5,
              color: "rgba(255,255,255,0.5)",
            },
          },
        ],
        series: [
          {
            name: "原材料",
            type: "bar",
            stack: "总量1",
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [50,50,0,0],
                color: '#ff932a',
              },
            },
            data: barData1,
          },
          {
            name: "包材",
            type: "bar",
            stack: "总量2",
            data: [100, 150, 160, 180, 170, 150],
            barWidth: 10,
            barGap: 0, //柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: '#27fffc',
                barBorderRadius: [50, 50, 0, 0],
                borderWidth: 0,
              },
            },
          },
          {
            name: "半成品",
            type: "bar",
            stack: "总量3",
            data: [60, 80, 100, 120, 140, 160],
            barWidth: 10,
            barGap: 0, //柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: '#3a9bff',
                barBorderRadius: [50, 50, 0, 0],
                borderWidth: 0,
              },
            },
          },
          {
            name: "成品",
            type: "bar",
            stack: "总量4",
            data: [80, 120, 140, 160, 180, 200],
            barWidth: 10,
            barGap: 0, //柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: '#b527ff',
                barBorderRadius: [50, 50, 0, 0],
                borderWidth: 0,
              },
            },
          },

          // 负数轴
          {
            name: "原材料",
            type: "bar",
            stack: "总量1",
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [0,0,50,50],
                color: '#ff932a',
              },
            },
            data: barData2,
          },
          {
            name: "包材",
            type: "bar",
            stack: "总量2",
            data: [-100, -150, -200, -120, -140, -200],
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [0, 0, 50, 50],
                color: "#27fffc",
              },
            },
          },
          {
            name: "半成品",
            type: "bar",
            stack: "总量3",
            data: [-60, -80, -100, -120, -140, -160],
            barWidth: 10,
            barGap: 0, //柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: '#3a9bff',
                barBorderRadius: [0,0,50,50],
                borderWidth: 0,
              },
            },
          },
          {
            name: "成品",
            type: "bar",
            stack: "总量4",
            data: [-80, -120, -140, -160, -180, -200],
            barWidth: 10,
            barGap: 0, //柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: '#b527ff',
                barBorderRadius: [0,0,50,50],
                borderWidth: 0,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },