种类占比图echarts 配置项内容和展示

      option = {
        grid: {
          top: 0,
          left: 5,
          right: 5,
          bottom: 5,
          containLabel: true,
        },
        legend: {
          icon: "circle",
          bottom: 200,
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: "#000",
            fontSize: 12,
          },
          data: [
            {
              name: "来信",
            },
            {
              name: "来电",
            },
            {
              name: "走访收集",
            },
            {
              name: "来访",
            },
            {
              name: "网络",
            },
          ],
        },
        xAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            data: [""],
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "来信",
            type: "bar",
            barWidth: 10,
            stack: "反映方式",
            label: {
              normal: {
                distance: 10,
                align: "center",
                verticalAlign: "middle",
                show: true,
                position: "top",
                formatter: "{c}%",
                color: "#4C4C4F",
                fontSize: 12,
              },
            },
            itemStyle: {
              barBorderRadius: [
                5,
                0,
                0,
                5,
              ],
              color: "#5DC4FE",
            },
            data: [
              {
                value: ((20 / 100) * 100).toFixed(2),
                itemStyle: {
                  normal: {
                    color: {
                      type: "bar",
                      colorStops: [
                        {
                          offset: 0,
                          color: "#7CF0FE", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#5DC4FE", // 100% 处的颜色
                        },
                      ],
                      globalCoord: false, // 缺省为 false
                    },
                  },
                },
              },
            ],
          },
          {
            name: "来电",
            type: "bar",
            barWidth: 10,
            stack: "反映方式",
            label: {
              normal: {
                distance: 10,
                align: "center",
                verticalAlign: "middle",
                show: true,
                position: "top",
                formatter: "{c}%",
                color: "#4C4C4F",
                fontSize: 12,
              },
            },
            itemStyle: {
              color: "#FFB55A",
            },
            data: [
              {
                value: ((20 / 100) * 100).toFixed(2),
                itemStyle: {
                  normal: {
                    color: {
                      type: "bar",
                      colorStops: [
                        {
                          offset: 0,
                          color: "#FFB55A", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#F9687A", // 100% 处的颜色
                        },
                      ],
                      globalCoord: false, // 缺省为 false
                    },
                  },
                },
              },
            ],
          },
          {
            name: "走访收集",
            type: "bar",
            barWidth: 10,
            stack: "反映方式",
            itemStyle: {
              color: "#7F87FC",
            },
            label: {
              normal: {
                distance: 10,
                align: "center",
                verticalAlign: "middle",
                show: true,
                position: "top",
                formatter: "{c}%",
                color: "#4C4C4F",
                fontSize: 12,
              },
            },
            data: [
              {
                value: ((20 / 100) * 100).toFixed(2),
                itemStyle: {
                  normal: {
                    color: {
                      type: "bar",
                      colorStops: [
                        {
                          offset: 0,
                          color: "#88A6FD", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#7F87FC", // 100% 处的颜色
                        },
                      ],
                      globalCoord: false, // 缺省为 false
                    },
                  },
                },
              },
            ],
          },

          {
            name: "来访",
            type: "bar",
            barWidth: 10,
            stack: "反映方式",
            itemStyle: {
              color: "#2F6DFF",
            },
            label: {
              normal: {
                distance: 10,
                align: "center",
                verticalAlign: "middle",
                show: true,
                position: "top",
                formatter: "{c}%",
                color: "#4C4C4F",
                fontSize: 12,
              },
            },
            data: [
              {
                value: ((20 / 100) * 100).toFixed(2),
                itemStyle: {
                  normal: {
                    color: {
                      type: "bar",
                      colorStops: [
                        {
                          offset: 0,
                          color: "#79CBFD", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#2F6DFF", // 100% 处的颜色
                        },
                      ],
                      globalCoord: false, // 缺省为 false
                    },
                  },
                },
              },
            ],
          },
          {
            name: "网络",
            type: "bar",
            barWidth: 1,
            stack: "反映方式",
            itemStyle: {
              barBorderRadius: [
                0,
                5,
               5,
                0,
              ],
              color: "#01C998",
            },
            label: {
              normal: {
                distance: 10,
                align: "center",
                verticalAlign: "middle",
                show: true,
                position: "top",
                formatter: "{c}%",
                color: "#4C4C4F",
                fontSize: 12,
              },
            },
            data: [
              {
                value: ((20 / 100) * 100).toFixed(2),
                itemStyle: {
                  normal: {
                    color: {
                      type: "bar",
                      colorStops: [
                        {
                          offset: 0,
                          color: "#8BF780", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#01C998", // 100% 处的颜色
                        },
                      ],
                      globalCoord: false, // 缺省为 false
                    },
                  },
                },
              },
            ],
          },
        ],
      };