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,
          },
        ],
      });
    },
相关推荐
张元清5 小时前
useEffect 之外:专门处理异步、深比较和 SSR 的 Effect Hook
前端·javascript·面试
XinZong6 小时前
OpenClaw 中最经典的 6 款skill,真正能进工作流的 skills
javascript·后端
XinZong6 小时前
2026 AI社交深度评测:InStreet 与 ClawReach 核心差异解析
javascript
Bug-制造者7 小时前
【Vue3 实战】全局错误处理体系搭建:实现业务与错误彻底解耦
前端·javascript·vue.js
竹林8187 小时前
从ethers.js迁移到Viem:我在DeFi Dashboard项目中踩过的坑与最终方案
javascript
zithern_juejin7 小时前
ES6——Promise
javascript
桜吹雪8 小时前
所有智能体架构(1):反思 (Reflection)
javascript·人工智能
ZC跨境爬虫9 小时前
跟着 MDN 学 HTML day_61:(构建反馈表单的结构化挑战)
前端·javascript·ui·html·音视频
豹哥学前端10 小时前
JavaScript 异步编程完全指南:从回调地狱到 async/await,一次通关
前端·javascript·面试
kyriewen10 小时前
面试官让我手写Promise,我打开Cursor三秒生成,他愣了两秒说“你过了”
前端·javascript·面试