echarts 雷达图配置

echarts 雷达图配置

    <div class="radarMap" ref="radarMapRef"></div>

radar 配置

radar	构建指示器和雷达图的样式配置	具体配置说明
shape	雷达图的形状	取值为 “circle” 表示雷达图的形状为圆形。
indicator	雷达图的指示器	这里未给出具体值，通常是一个数组，每个元素代表一个指标的配置，用于定义雷达图的坐标轴。
radius	雷达图的半径	值为 66，表示雷达图的半径大小。可以是具体像素值，也可以是百分比
splitArea	雷达图的分割区域配置	areaStyle:分割区域的样式;color:每个圆的背景颜色;shadowColor:每个圈的阴影颜色;shadowBlur:阴影的模糊程度
name	雷达图指示器名称的配置
name.formatter	指示器名称的格式化函数	该函数接收 value（指示器名称）和 indicator（指示器对象）作为参数。函数内部通过查找 dataList 数组中的数据，将当前指标的名称、你的账户数据值和单位、相似账户数据值和单位进行格式化，返回一个包含这三部分信息的数组，通过 \n 连接成多行文本。
name.rich	富文本样式配置	a:指示器名称的样式;b:你的账户数据值的样式;c:相似账户数据值的样式

series配置

series	配置项用于定义 ECharts 图表中的系列，这里通过 flatMap 方法和 buildSeriesForStudent 函数为每个数据生成雷达图系列。每个数据会生成一个主系列和多个辅助系列，主系列用于展示整体数据，辅助系列用于在鼠标悬停时显示每个指标的详细信息。	描述
name	系列的名称	用于在图例、提示框等地方显示。
type	图表类型	设置为 “radar” 表示使用雷达图
symbol	标记的类型	就是折线上的小圆点,当 index === 0 时为 “circle” 表示圆形标记，其他情况为 “none” 表示不显示标记。
symbolSize	标记的大小	设置为 5
color	标记的填充颜色	设置为 “#fff” 即白色。
borderColor	标记的边框颜色	当 index === 0 时dataList的颜色，其他情况为 “transparent” 即透明。
lineStyle	线条的样式配置。	设置颜色 color ;区域设置areaStyle
tooltip	提示框的配置。
z	系列的 z 轴值，当 index === 0 时为 1，其他情况为 2，用于控制系列的层叠顺序。
data	系列的数据，这里是一个包含单个元素的数组，元素为处理后的数据。

 getEcharts() {
      var chart = this.$echarts.init(this.$refs.radarMapRef);
      const dataList = [
        {
          name: "你的账号",
          data: [
            { name: "播放量", value: 672, unit: "万" },
            { name: "互动率", value: 0.5, unit: "%" },
            { name: "投稿数", value: 40, unit: "" },
            { name: "粉丝净增", value: 77, unit: "" },
            { name: "完播率", value: 20, unit: "%" },
          ],
          color: "#587df7",
        },
        {
          name: "同类账号",
          data: [
            { name: "播放量", value: 255, unit: "" },
            { name: "互动率", value: 3, unit: "%" },
            { name: "投稿数", value: 2, unit: "" },
            { name: "粉丝净增", value: 2, unit: "" },
            { name: "完播率", value: 11.2, unit: "%" },
          ],
          color: "#f1a376",
        },
      ];

      const indicator = [
        { name: "播放量", max: 870 },
        { name: "互动率", max: 4 },
        { name: "投稿数", max: 40 },
        { name: "粉丝净增", max: 77 },
        { name: "完播率", max: 25 },
      ];

      // 构建单个学生的系列数据
      const buildSeriesForStudent = (studentData, studentIndex) => {
        const data = studentData.data.map((item) => item.value);
        const helper = data.map((item, index) => {
          const arr = new Array(data.length).fill(0);
          arr[index] = item;
          return arr;
        });
        return [data, ...helper].map((item, index) => {
          return {
            name: studentData.name,
            max: item.max,
            type: "radar",
            symbol: index === 0 ? "circle" : "none",
            symbolSize: 5,
            itemStyle: {
              color: "#fff",
              borderColor: index === 0 ? studentData.color : "transparent", // 标记边框颜色
              borderWidth: 1, // 标记边框宽度
            },
            lineStyle: {
              color: index === 0 ? studentData.color : "transparent",
            },
            areaStyle: {
              // 设置径向渐变
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: "transparent", // 中心颜色，使用学生数据的颜色
                  },
                  {
                    offset: 1,
                    color: studentData.color, // 边缘颜色，透明
                  },
                ],
                global: false, // 缺省为 false
              },
              opacity: 0.1,
            },
            tooltip: {
              show: index === 0 ? false : true,
              formatter: () => {
                let res =
                  `${
                    indicator[index - 1].name
                  }` + "：
";
                for (let x of dataList) {
                  let str = `${
                    x.color
                  };margin-right: 5px;border-radius: 50%;"> ${x.name}： ${
                    x.data[index - 1].value
                  }${x.data[index - 1].unit}
`;
                  res += str;
                }
                return `
${res}`;
              },
            },
            z: index === 0 ? 1 : 2,
            data: [item],
          };
        });
      };

      // 构建所有学生的系列数据
      const series = dataList.flatMap((studentData, index) =>
        buildSeriesForStudent(studentData, index)
      );

      let option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgb(255,255,255)",
          textStyle: {
            color: "#333", // 修改为深色以便查看
          },
        },
        color: ["#ff5a2c", "#6776ff"],

        radar: {
          shape: "circle",
          indicator: indicator,
          radius: 66,
          splitArea: {
            // 'show': false
            areaStyle: {
              color: "transparent", // 每个圆的背景颜色
              shadowColor: "#32dadd", // 每个圈的阴影颜色
              shadowBlur: 10,
            },
          },
          name: {
            formatter: function (value, indicator) {
              // 查找对应的数据项
              let yourAccountData = dataList[0].data.find(
                (item) => item.name === indicator.name
              );
              let similarAccountData = dataList[1].data.find(
                (item) => item.name === indicator.name
              );
              return [
                `{a|${value}}`,
                `{b|${yourAccountData.value}${yourAccountData.unit}}/{c|${similarAccountData.value}${similarAccountData.unit}}`,
              ].join("\n");
            },

            rich: {
              a: {
                align: "center",
                fontSize: 14,
                lineHeight: 22,
                color: "#333",
                fontWeight: "bold",
                padding: [0, 0, 10, 0],
              },
              b: {
                align: "center",
                fontSize: 13,
                lineHeight: 22,
                fontWeight: "bold",
                color: "#4C7DFF",
              },
              c: {
                align: "center",
                fontSize: 13,
                lineHeight: 22,
                fontWeight: "bold",
                color: "#FF8C4C",
              },
            },
          },
          // legend: {
          //   data: dataList.map((item) => ({
          //     name: item.name,
          //     icon: "circle", // 图例的图标形状
          //     textStyle: {
          //       color: "#333", // 设置图例文本颜色
          //     },
          //     itemStyle: {
          //       color: item.color, // 设置图例图标的颜色
          //     },
          //   })),
          //   bottom: 0,
          //   left: "center",
          //   textStyle: {
          //     color: "#333", // 设置图例文本颜色
          //   },
          //   itemWidth: 10,
          //   itemHeight: 10,
          // },
        },
        series: series,
      };
      chart.setOption(option);

      const handleResize = () => {
        chart.resize();
      };

      window.addEventListener("load", handleResize);
      window.addEventListener("resize", handleResize);

      // 可以在组件销毁时解绑事件，避免内存泄漏
      // 假设在 Vue 组件中，可以在 beforeDestroy 钩子中执行
      this.$once("hook:beforeDestroy", () => {
        window.removeEventListener("load", handleResize);
        window.removeEventListener("resize", handleResize);
      });
    },

注销图表

  let chart = this.$echarts.init(this.$refs.audiencePreferenceRef);
        this.$echarts.dispose(chart);