堆叠横向柱状图顶部显示数值和

效果图

 不想写太多 过不了审核 下面代码

// num num1 num2 在全局定义 let num = 0
option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
          // formatter(params) {
          //   console.log("params---", params); //我们可以打印该值
          // }
        },
        legend: {
          textStyle: {
            color: "rgba(169, 217, 255, 1)"
          }
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          show: false
        },
        yAxis: {
          type: "category",
          data: ["社区1", "社区2", "社区3", "社区4", "社区5"],
          name: "单位/件",
          nameTextStyle: {
            color: "rgba(169, 217, 255, 1)"
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "rgba(169, 217, 255, 1)" //Y轴内容文字颜色
            }
          },
          axisLine: {
            lineStyle: {
              color: "rgba(56, 80, 148, 1)"
            }
          }
        },
        series: [
          {
            name: "疑似聚众",
            type: "bar",
            stack: "total",
            barWidth: 20, //柱图宽度
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: "series"
            },
            data: [320, 302, 301, 334, 390],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  formatter(params) {
                    // 处理数值显示格式
                    num1 = params.data;
                    console.log("num1", num);
                    return num;
                  },
                  position: "right", //在右侧显示
                  textStyle: {
                    //数值样式
                    color: "rgba(186, 211, 255, 0)",
                    fontSize: 12
                  }
                },
                //自定义颜色
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 120, 233, 0.4300)" //指0%处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(8, 201, 255, 1)" //指100%处的颜色
                    }
                  ],
                  false
                )
              }
            }
          },
          {
            name: "昼伏夜出",
            type: "bar",
            stack: "total",
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: "series"
            },
            data: [120, 132, 101, 134, 90],
            itemStyle: {
              //自定义颜色
              normal: {
                label: {
                  show: true, //开启显示
                  formatter(params) {
                    // 处理数值显示格式
                    num2 = params.data;
                    console.log("num2", num);
                    return num;
                  },
                  position: "right", //在右侧显示
                  textStyle: {
                    //数值样式
                    color: "rgba(186, 211, 255, 0)",
                    fontSize: 12
                  }
                },
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(99, 8, 255, 1)" //指0%处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(39, 0, 233, 0.4300)" //指100%处的颜色
                    }
                  ],
                  false
                )
              }
            }
          },
          {
            name: "人脸报警",
            type: "bar",
            stack: "total",
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: "series"
            },
            data: [220, 182, 191, 234, 290],
            itemStyle: {
              //自定义颜色
              normal: {
                label: {
                  show: true, //开启显示
                  formatter(params) {
                    // 处理数值显示格式
                    num = num1 + num2 + params.data;
                    console.log("num3", num);
                    return num;
                  },
                  position: "right", //在右侧显示
                  textStyle: {
                    //数值样式
                    color: "rgba(186, 211, 255, 1)",
                    fontSize: 12
                  }
                },
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 221, 233, 0.4300)" //指0%处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(8, 255, 213, 1)" //指100%处的颜色
                    }
                  ],
                  false
                )
              }
            }
          }
        ]
      };

echarts堆叠柱状图 涉及渐变，轴线及文字颜色，legend颜色，数值在顶部显示，横向柱状图，横向顶部显示堆叠柱状图的数值和及颜色等