echarts 词云图

npm install echarts-wordcloud

import "echarts-wordcloud";//引入词云

const colorList = [
        "#dd3020",
        "#8e39f6",
        "#ffffff",
        "#7ffbb5",
        "#77fb58",
        "#461df5",
        "#7ebd38",
        "#f6cf72",
        "#f0a13a",
        "#f0a13a",
        "#ee8582",
        "#ed70e5",
        "#7f6df5",
        "#88b3f8",
        "#3767f7",
        "#83fbfa",
        "#d9b8c3",
        "#00c995",
        "#e73f2c",
        "#fcfe5b",
        "#b91116",
        "#a8584d",
        "#64804f",
];
const option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "RGBA(12, 38, 66, 0.6)", // 修改背景颜色
          borderColor: "RGBA(36, 113, 183, 1)", // 修改边框颜色
          textStyle: {
            color: "rgba(210, 214, 222, 1)",
            fontSize: 20, // 字体大小
          },
        },
        grid: {
          left: 0,
          top: 0,
          bottom: 0,
          right: 0,
          containLabel: true,
        },
        series: [
          {
            type: "wordCloud",
            sizeRange: [21, 80],
            rotationRange: [0, 0],
            rotationStep: 45,
            gridSize: 8,
            shape: "pentagon",
            width: "100%",
            height: "100%",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 亿元";
              },
            },
            textStyle: {
              color: function (params) {
                if (params.dataIndex < 22) {
                  return colorList[params.dataIndex];
                } else {
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                    ].join(",") +
                    ")"
                  );
                }
              },
              fontFamily: "sans-serif",
              fontWeight: "normal",
              emphasis: {
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            data: datas.map((item) => {
              return {
                name: item.jtmc,
                value: item.count_num,
              };
            }),
          },
        ],
};