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,
          },
        ],
      });
    },
相关推荐
DoraBigHead9 分钟前
小Dora 的 JavaScript 修炼日记 · Day 1:变量三兄弟与作用域迷宫
前端·javascript·面试
Trust yourself24323 分钟前
easyui碰到想要去除顶部栏按钮边框
前端·javascript·easyui
一洽客服系统34 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead1 小时前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠2 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农2 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
爱编程的喵2 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
唐叔在学习2 小时前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr2 小时前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js