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,
          },
        ],
      });
    },
相关推荐
灵感__idea3 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
excel4 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
苏打水com7 小时前
JavaScript 入门学习指南:从零基础到能写交互效果
javascript
大前端helloworld7 小时前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端·javascript·面试
嫂子的姐夫7 小时前
11-py调用js
javascript·爬虫·python·网络爬虫·爬山算法
Dajiaonew7 小时前
Vue3 + TypeScript 一篇文章 后端变全栈
前端·javascript·typescript
勤奋菲菲10 小时前
Koa.js 完全指南:下一代 Node.js Web 框架
前端·javascript·node.js
10年前端老司机10 小时前
面试官爱问的 Object.defineProperty,90%的人倒在这些细节上!
前端·javascript
用户479492835691512 小时前
TypeScript 和 JavaScript 的 'use strict' 有啥不同
前端·javascript·typescript
bubiyoushang88812 小时前
MATLAB实现直流电法和大地电磁法的一维正演计算
前端·javascript·matlab