echarts柱状图堆叠和不堆叠-放在一起

javascript 复制代码
<div id="average-score1" class="risk-percent" />
javascript 复制代码
import * as echarts from "echarts";
javascript 复制代码
averageBusinessScore1() {
      let unsolvedAmountArr = [1, 2, 0, 4, 5, 6, 7, 8, 9, 10, 11, 12];
      let solvedAmountArr = [1, 0, 0, 4, 5, 6, 7, 8, 9, 10, 11, 12];
      let overAmountArr = [0, 0, 0, 0, 5, 6, 7, 8, 9, 10, 11, 12];
      let solvedQuantityArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

      var data1 = [320, 600, 901, 934, 1290, 1330, 1320];
      var data2 = [430, 182, 191, 234, 290, 250, 310];
      var data3 = [150, 212, 201, 154, 190, 300, 0];
      for (var i = 0; i < overAmountArr.length; i++) {
        if (overAmountArr[i] == 0) {
          if (solvedAmountArr[i] == 0) {
            unsolvedAmountArr[i] = {
              value: unsolvedAmountArr[i],
              itemStyle: {
                barBorderRadius: [30, 30, 0, 0],
              },
            };
          } else {
            solvedAmountArr[i] = {
              value: solvedAmountArr[i],
              itemStyle: {
                barBorderRadius: [30, 30, 0, 0],
              },
            };
          }
        } else {
          overAmountArr[i] = {
            value: overAmountArr[i],
            itemStyle: {
              barBorderRadius: [30, 30, 0, 0],
            },
          };
        }
      }

      var elementById = document.getElementById("average-score1");
      var myChart = echarts.init(elementById);
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          backgroundColor: "rgba(16,92,125,0.57)",
          borderColor: "rgba(204,204,204,0)",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          top: "15%",
          left: "4%",
          right: "4%",
          bottom: "8%",
          containLabel: true,
        },
        legend: {
          orient: "horizontal",
          show: true,
          type: "plain",
          right: "2%",
          top: "1%",
          selectedMode: false,
          itemHeight: 6,
          itemWidth: 6,
          textStyle: {
            // color: '#fff',
            // fontWeight: 600
          },
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisLine: {
              show: true,
              lineStyle: {
                color: "#e8e8e8",
                width: 1,
              },
            },
            axisLabel: {
              color: "#737373",
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#BFD4F1",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            // splitLine: {
            //   show: true,
            //   lineStyle: {
            //     type: 'dashed',
            //     interval: 1,
            //     opacity: 0.5,
            //     color: '#04bbff'
            //   }
            // },
            splitLine: {
              show: true,
              lineStyle: {
                interval: 1,
                color: "#e8e8e8",
              },
            },
            axisLabel: {
              color: "#737373",
              // show: false,
              // formatter: '{value} ml'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#e8e8e8",
                width: 1,
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "value",
            name: "",
            splitLine: {
              show: false,
              lineStyle: {
                interval: 1,
                color: "#BFD4F1",
              },
            },
            axisLabel: {
              color: "#737373",
              // show: false,
              // formatter: '{value} °C'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#e8e8e8",
                width: 1,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            // name: "已化解金额",
            name: "金额1",
            type: "bar",
            stack: "Ad", //堆叠
            barWidth: 18,
            barGap: "70%",
            itemStyle: {
              color: "#327ef7",
            },
            data: unsolvedAmountArr,
          },
          {
            // name: "未化解金额",
            name: "金额2",
            type: "bar",
            stack: "Ad",
            barWidth: 18,
            itemStyle: {
              color: "#ff7070",
            },
            data: solvedAmountArr,
          },
          {
            // name: "超目标化解金额",
            name: "金额3",
            type: "bar",
            stack: "Ad",
            barWidth: 18,
            itemStyle: {
              color: "#f89f46",
              barBorderRadius: [30, 30, 0, 0],
            },
            data: overAmountArr,
          },
          {
            name: "本月新增事项金额",
            type: "bar",
            barWidth: 18,
            barGap: "70%",
            itemStyle: {
              color: "#8dcfa3",
              barBorderRadius: [30, 30, 0, 0],
            },
            data: solvedQuantityArr,
          },
        ],
      });
    },
相关推荐
好名字082128 分钟前
monorepo基础搭建教程(从0到1 pnpm+monorepo+vue)
前端·javascript
Flying_Fish_roe36 分钟前
浏览器的内存回收机制&监控内存泄漏
java·前端·ecmascript·es6
c#上位机1 小时前
C#事件的用法
java·javascript·c#
万物得其道者成1 小时前
React Zustand状态管理库的使用
开发语言·javascript·ecmascript
小白小白从不日白1 小时前
react hooks--useReducer
前端·javascript·react.js
下雪天的夏风1 小时前
TS - tsconfig.json 和 tsconfig.node.json 的关系,如何在TS 中使用 JS 不报错
前端·javascript·typescript
diygwcom1 小时前
electron-updater实现electron全量版本更新
前端·javascript·electron
volodyan2 小时前
electron react离线使用monaco-editor
javascript·react.js·electron
^^为欢几何^^2 小时前
lodash中_.difference如何过滤数组
javascript·数据结构·算法
Hello-Mr.Wang2 小时前
vue3中开发引导页的方法
开发语言·前端·javascript