echarts-wordcloud词云

GitHub

• echarts5版本以下的需要下载echarts-wordcloud1.0版本
• echarts5及以上的下载echarts-wordcloud2.0版本

可结合之前发表的封装vue-echarts组件一起使用，传入echarts-wordCloud相关的options即可。

示例代码：

<template>
  <div id="xxxx" style="height: 400px; width: 400px; background: pink"></div>
</template>

<script setup>
import * as echarts from "echarts";
import "echarts-wordcloud";
import { nextTick } from "vue";

const initEchart = () => {
  const echartDom = document.getElementById("xxxx");
  console.log("echartDom: ", echartDom);
  const myChart = echarts.init(echartDom);
  const option = {
    series: [
      {
        type: "wordCloud",
        shape: "circle",
        keepAspect: false,
        // maskImage: maskImage,
        left: "center",
        top: "center",
        width: "100%",
        height: "90%",
        right: null,
        bottom: null,
        sizeRange: [12, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        layoutAnimation: true,
        textStyle: {
          fontFamily: "sans-serif",
          fontWeight: "bold",
          color: function () {
            return (
              "rgb(" +
              [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
              ].join(",") +
              ")"
            );
          },
        },
        emphasis: {
          // focus: 'self',
          textStyle: {
            textShadowBlur: 3,
            textShadowColor: "#333",
          },
        },
        //data属性中的value值却大，权重就却大，展示字体就却大
        data: [
          { name: "Farrah", value: 366 },
          { name: "汽车", value: 900 },
          { name: "视频", value: 606 },
        ],
      },
    ],
  };
  option && myChart.setOption(option);

  //随着屏幕大小调节图表
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};

nextTick(() => {
  initEchart();
});
</script>