Echarts之饼图内外圆重叠且图例不统一

最新推荐文章于 2025-02-14 14:07:05 发布
熟悉有你的地方
最新推荐文章于 2025-02-14 14:07:05 发布
阅读量627
点赞数
分类专栏： echarts
本文链接：https://blog.csdn.net/qq_43519782/article/details/116797029
版权
echarts 专栏收录该内容
15 篇文章
订阅专栏
该博客展示了如何使用ECharts创建一个交互式的饼图，分别显示学生类型（公办、民办）和性别（男、女）的比例。图表包含内外两圈，外圈展示学生类型，内圈展示性别，每个部分都有详细的百分比和人数。此外，饼图还配置了自定义的图例和提示信息，提供清晰的数据解读。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
需求：
在这里插入图片描述
鼠标移入：
外圆：

内圆：

实现：
<template>
  <div
    id="chart"
    style="width: 500px; height: 200px; background: rgba(2, 15, 43, 0.7)"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          name: "公办",
          value: 456,
        },
        {
          name: "民办",
          value: 123,
        },
        {
          name: "男",
          value: 100,
        },
        {
          name: "女",
          value: 200,
        },
      ],
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let that = this;
      let colors = ["#F3974A", "#00EA9C", "#529CF6", "#FC595A"];
      let danwei = "人";
      let option = {
        // 配置项
        color: colors,
        tooltip: {
          //   trigger: "item",
          //   backgroundColor: "rgba(0,0,0,0.9)",
          //   formatter: function (params) {
          //     let all = infoData.reduce((a, b) => {
          //       return Number(a) + Number(b.data.value);
          //     }, 0);
          //     return (
          //       '<div style="font-size: 16px;font-weight: bold;font-family: SourceHanSansCN">' +
          //       params.seriesName +
          //       "<br/>" +
          //       params.marker +
          //       '<span style="color:' +
          //       params.color +
          //       ';font-family: BoldCondensed">' +
          //       params.data["name"] +
          //       "\n" +
          //       params.data["value"]
          //         .toString()
          //         .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,") +
          //       "人 " +
          //       "(" +
          //       params.percent.toFixed(2) +
          //  //   ((params.data["value"] / all) * 100).toFixed(2) +
          //       "%" +
          //       ")" +
          //       "</span>" +
          //       "</div>"
          //     );
          //   },
        },
        legend: [
          {
            orient: "vertical",
            left: "5%",
            top: "35%",
            itemWidth: 10,
            itemHeight: 10,
            icon: "rect",
            itemGap: 20,
            textStyle: {
              fontSize: 16,
              color: "rgba(255,255,255,.8)",
              
              fontWeight: "bold",
            },
            data: [
              {
                name: "公办",
                textStyle: {
                  rich: {
                    title: {
                      color: "#A0B2D3",
                      fontSize: 16,
                      fontWeight: "bolder",
                      width: 60, //文字宽度
                      align: "left",
                    },
                    value: {
                      color: "#F3974A",
                      fontSize: 16,
                      fontWeight: "bolder",
                      fontFamily: "BoldCondensed",

                      width: 30, //数据宽度
                      align: "left",
                    },
                    unit: {
                      color: "#A0B2D3",
                      fontSize: 16,
                      fontWeight: "bolder",
                    },
                  },
                },
              },
              {
                name: "民办",
                textStyle: {
                  rich: {
                    title: {
                      color: "#A0B2D3",
                      fontSize: 16,
                      fontWeight: "bolder",
                      width: 60, //文字宽度
                      align: "left",
                    },
                    value: {
                      color: "#00EA9C",
                      fontSize: 16,
                      fontWeight: "bolder",
                      fontFamily: "BoldCondensed",

                      width: 30, //数据宽度
                      align: "left",
                    },
                    unit: {
                      color: "#A0B2D3",
                      fontSize: 16,
                      fontWeight: "bolder",
                    },
                  },
                },
              },
            ],

            formatter: function (name) {
              let newItem = "";
              that.data.map((item) => {
                if (item.name == name) {
                  newItem = item;
                }
              });
              return `{title|${newItem.name}}{value|${newItem.value.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,")}}{unit|${danwei}}`;
            },
          },
          {
            data: [
              {
                name: "男",
                // icon: `image://${man}`,
                icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAfCAMAAAAP3mfjAAAAvVBMVEUAAABAgP9Vqv9Jkv9Vqv9Gov9Onf9JpP9Om/9Mof9SnP9Nm/9Mn/9Onf9Rm/9Rnf9Nn/9OnP9On/tRnvxNnvxQnfxQnvxQnvxOnvxOnf1Pnv1Pnv1Qnv1Pnv1Pnf1Pnv1Pnv1On/1Qnv1Pnv1Onv1On/1Qnv5Qnv5Pnv5Pn/5Qnv5PnvxOnvxPnvxPnvxPnv1Pnv1Pnv1Onv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv3hJDdrAAAAPnRSTlMABAYHCQsNDhceHyElJykvOD5ITE9WWVxfaHF0g4SFi46PkJGWnKqwuLm9wsPHy87S1d3g4+ju7/T19vf4+zNjKZEAAACXSURBVBjTxdBFEgJBEETRxN3d3Rtr3P79j8WGaeYARPBX9Ta5KEmSMp1+Qd/yD6D59RrgHnE+A5B1ngOcQ87pAzwrvsForZF0d3trrbXW7icJSeENrlNKauFrKi39vko7LpePjiDtMObj8T9smHnucZNyw4yB4xaI90qSJANmDHgf+LVXYEbw8jyAbhkWnoP1akDFRkyS3hKPQR3ayj/hAAAAAElFTkSuQmCC",
                textStyle: {
                  rich: {
                    title: {
                      color: "#A0B2D3",
                      fontSize: 16,
                      fontWeight: "bolder",
                      width: 60, //文字宽度
                      align: "left",
                    },
                    value: {
                      color: "#529CF6",

                      fontSize: 16,
                      fontWeight: "bolder",
                      fontFamily: "BoldCondensed",

                      width: 30, //数据宽度
                      align: "left",
                    },
                    unit: {
                      color: "#A0B2D3",
                      fontSize: 16,
                      fontWeight: "bolder",
                    },
                  },
                },
              },
              {
                name: "女",
                // icon: `image://${woman}`,
                icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAiCAMAAABhn6n1AAABGlBMVEUAAAD/AAD/VVX/VVX/SUn/YGD/Zmb/YmL/VVX/Wlr/Xl7/WVn/VVX/Xl7/WFj/V1f/W1v5WVn6XFz6Wlr6W1v6WFj7WVn7WVn7WVn7WVn7W1v7WVn8Wlr8Wlr8W1v8Wlr8W1v8W1v8W1v9W1v9WVn9Wlr9Wlr9W1v9W1v9WVn9Wlr9WVn9Wlr7Wlr7W1v7Wlr7W1v7WVn7Wlr8W1v8Wlr8W1v8WVn8Wlr8WVn8W1v8Wlr8Wlr8Wlr8Wlr8Wlr8W1v8Wlr8Wlr8WVn8Wlr8W1v8Wlr9Wlr9Wlr9Wlr9Wlr7W1v7Wlr8Wlr8Wlr8Wlr8W1v8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8WlrVqYT9AAAAXXRSTlMAAQMGBwgKDQ8RExQVGyAjKi4yMzU3OTxCRUZIT1VaXl9iZWttbm9wc3V6e32AhIWKjJGVlpidn6Cjpaiqr7C0u72/w8XHzc/S1Nba2+Hl5+jp6+3w8/b3+Pn6/P2iRbbvAAAA7UlEQVQoz8XQV1ICARBF0auYs44BAybEnMUcQDErCGJA5e5/G37AyOzA9/dOVVd3NQDQGp+MEUnvsz50R2BfdTsCl6oXEVhXTUUgdlj52mtu9LbxxPRMIt4S9nhJVQujtd5Vtp6XdgCW/cs8AFdev6oW780AdHy7VFWtrPjRAiT8WawNJHUCOPDmpAbpR3ehqeBGfU1+xycY0oVwSVL7WbO0GcLquymOPboNIXvuAf2bw9UQKsFWHzDbuHQKgNMGpAGayw3IA4wZyQDQEwSB5u58D4Kgs/4izeR8i/z0n+DTs6zFCCSzgyNXcwD8AmVGYKFUgvUsAAAAAElFTkSuQmCC",
                textStyle: {
                  rich: {
                    title: {
                      color: "#A0B2D3",
                      fontSize: 16,
                      fontWeight: "bolder",
                      width: 60, //文字宽度
                      align: "left",
                    },
                    value: {
                      color: "#FC595A",
                      fontSize: 16,
                      fontWeight: "bolder",
                      fontFamily: "BoldCondensed",

                      width: 30, //数据宽度
                      align: "left",
                    },
                    unit: {
                      color: "#A0B2D3",
                      fontSize: 16,
                      fontWeight: "bolder",
                    },
                  },
                },
              },
            ],
            orient: "vertical",
            left: "70%",
            top: "30%",
            itemWidth: 15,
            itemHeight: 32, //图例宽高
            icon: "rect",
            formatter: function (name) {
              // console.log(name);
              let newItem = "";
              that.data.map((item) => {
                if (item.name == name) {
                  newItem = item;
                }
              });
              return `{title|${newItem.name}}{value|${newItem.value.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,")}}{unit|${danwei}}`;
            },
          },
        ],

        series: [
          {
            //外圆
            name: "学生比例",
            type: "pie",
            radius: ["75%", "60%"],
            center: ["50%", "50%"], //调整图像的位置
            hoverAnimation: false,
            label: {
              show: false,
              position: "center",
            },

            labelLine: {
              show: false,
            },
            animationType: "expansion",

            data: that.data.slice(0, 2).map((item) => {
              return { value: item.value, name: item.name };
            }),
            tooltip: {
              // show: true,
              // trigger: "item",
              backgroundColor: "rgba(0,0,0,0.9)",
              formatter: function (params) {
                let all = that.data.slice(0, 2).reduce((a, b) => {
                  return Number(a) + Number(b.value);
                }, 0); //计算总数
                // console.log(params);
                return (
                  '<div style="font-size: 16px;font-weight: bold;font-family: SourceHanSansCN">' +
                  params.seriesName +
                  "<br/>" +
                  params.marker +
                  '<span style="color:' +
                  params.color +
                  ';font-family: BoldCondensed">' +
                  params.data["name"] +
                  "\n" +
                  params.data["value"]
                    .toString()
                    .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,") +
                  "人 " +
                  "(" +
                  params.percent.toFixed(2) +
                  // ((params.data["value"] / all) * 100).toFixed(2) +
                  "%" +
                  ")" +
                  "</span>" +
                  "</div>"
                );
              },
            },
          },
          {
            //内圆
            name: "男女比例",
            type: "pie",
            radius: ["20%", "50%"],
            center: ["50%", "50%"], //调整图像的位置
            hoverAnimation: false,
            label: {
              show: false,
              position: "center",
            },

            labelLine: {
              show: false,
            },
            animationType: "expansion",

            data: that.data.slice(2, 4).map((item) => {
              return { value: item.value, name: item.name };
            }),
            tooltip: {
              // show: true,
              // trigger: "item",
              backgroundColor: "rgba(0,0,0,0.9)",
              formatter: function (params) {
                let all = that.data.slice(2, 4).reduce((a, b) => {
                  return Number(a) + Number(b.value);
                }, 0); //计算总数
                return (
                  '<div style="font-size: 16px;font-weight: bold;font-family: SourceHanSansCN">' +
                  params.seriesName +
                  "<br/>" +
                  params.marker +
                  '<span style="color:' +
                  params.color +
                  ';font-family: BoldCondensed">' +
                  params.data["name"] +
                  "\n" +
                  params.data["value"]
                    .toString()
                    .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,") +
                  "人 " +
                  "(" +
                  params.percent.toFixed(2) +
                  // ((params.data["value"] / all) * 100).toFixed(2) +
                  "%" +
                  ")" +
                  "</span>" +
                  "</div>"
                );
              },
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("chart"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style>
</style>
以上