词云图

首先，安装词云图依赖

npm i --save echarts-wordcloud

其次，进行加载

import * as echarts from "echarts";
import "echarts-wordcloud";

export default {
  install: (app: any) => {
    app.config.globalProperties.$leida = (id: any) => {
      var chartDom = document.getElementById(id)!;
      if (chartDom == null) {
        return;
      }
      echarts.dispose(chartDom);
      var myChart = echarts.init(chartDom, "", { width: 800, height: 500 });
      const option = {
        backgroundColor: "#fff",
        tooltip: {
          show: true,
        },
        series: [
          {
            type: "wordCloud",
            sizeRange: [12, 50],
            gridSize: 10, //距离
            shape: "triangle-forward",
            textStyle: {
              fontWeight: "bold",
              fontFamily: "sans-serif",
              borderColor: "pink",
              color: () => {
                return `rgb(${Math.round(Math.random() * 255)},${Math.round(
                  Math.random() * 255
                )},${Math.round(Math.random() * 255)})`;
              },
            },
            data: [
              { name: "前端工程化", value: 10 },
              { name: "HTML5新特性", value: 635 },
              { name: "Less", value: 124 },
              { name: "Scss", value: 246 },
              { name: "JavaScript", value: 754 },
              { name: "TypeScript", value: 754 },
              { name: "es6", value: 754 },
              { name: "小程序", value: 754 },
              { name: "Vite", value: 754 },
              { name: "Webpack", value: 754 },
              { name: "Vue3", value: 754 },
              { name: "React", value: 794 },
              { name: "Nodejs", value: 1000 },
            ],
          },
        ],
      };
      myChart.setOption(option);
    };
  },
};