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,
          },
        ],
      });
    },
相关推荐
threelab12 小时前
Three.js 咖啡杯烟雾效果 | 三维可视化 / AI 提示词
开发语言·javascript·人工智能
Heo12 小时前
14_React 中的更新队列 updateQueue
前端·javascript·面试
前端 贾公子12 小时前
解决浏览器端 globalThis is not defined 报错
前端·javascript·vue.js
之歆13 小时前
DAY12_CSS3选择器全攻略 + 盒子新特性完全指南(下)
前端·javascript·css3
kyriewen1113 小时前
代码写成一锅粥?3个设计模式让你的项目“起死回生”
开发语言·前端·javascript·设计模式·ecmascript
iCxhust14 小时前
在 emu8086 中可以直接编译运行的完整汇编程序,演示数组的定义、遍历、求和、求最大值。
开发语言·前端·javascript·汇编·单片机·嵌入式硬件·算法
JianZhen✓14 小时前
2026前端高频面试题总结(Vue/JS/网络/Webpack/性能优化/手写)
前端·javascript·vue.js
星光开发者14 小时前
基于springboot电动汽车租赁管理系统-计算机毕设 附源码 11217
javascript·spring boot·mysql·django·php·html5·express
空中海14 小时前
05 React Native架构设计、主线项目与专家实践
javascript·react native·react.js
kyriewen1 天前
代码写成一锅粥?3个设计模式让你的项目“起死回生”
前端·javascript·设计模式