echarts-词云图

const colorList= [
      "#0DD3D5",
      "#6C62EF",
      "#317BF5",
      "#4872EA",
      "#39C5FF",
      "#FFFFFF",
      "#BFCE5D",
      "#66C97D",
      "#FEBD40",
      "#b2b2b2",
];
const myChart = ref(null);
const initChart = () => {
  if (!document.getElementById(props.id)) return;

  if (myChart.value) {
    myChart.value.dispose();
  }
  myChart.value = markRaw(
    echarts.init(document.getElementById(props.id), null, { renderer: "svg" })
  );
  window.onresize = myChart.value.resize;

  let option = {
    series: [
      {
        type: "wordCloud",
        gridSize: 20,
        shape: 'pentagon',// 词云形状，默认circle(圆形)，cardioid（心形）、diamond（菱形 正方形）、triangle-forward、triangle（三角形）、star（星形）、pentagon （五边形）；
        sizeRange: [10, 50], // 字体大小范围
        rotationRange: [0, 0],// 设置文字倾斜角度
        drawOutOfBound: false,
      
        textStyle: {
          fontFamily: "sans-serif",
          fontWeight: "normal",
          color: function (params) {
              return colorList[params.dataIndex]; // 自定义颜色函数
            },
        
        },
        data: props.data,
      },
    ],
  };

  myChart.value.setOption(option, true);
  // 添加点击事件
  myChart.value.on("click", function (params) {
    // params 是包含点击事件相关信息的对象
    // 例如，你可以通过 params.name 获取被点击的词的名称
    console.log("点击了词:", params.data);
    if (props.currentId === 1 || props.currentId === 3) {
      emit("handlelog", {
        showDialog: true,
        showDialogAi: false,
        ...params.data,
      });
    } else {
      emit("handlelogAi", {
        showDialog: false,
        showDialogAi: true,
        ...params.data,
      });
    }

    // 在这里可以添加你自己的逻辑，比如根据点击的词更新其他图表的数据等
  });
};