echarts之词云图

使用词云图

使用npm下载依赖

npm install echarts-wordcloud@1.1.3 --save

demo例子：

<template>
  <div class="result">
      <el-tabs type="border-card" v-model="name">
        <el-tab-pane label="各省累计确诊" name="0">
          <div ref="chart1" style="width: 800px;height:600px;"></div>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";

export default {
  name: "VisitShow",
  data() {
    return {
      userVisitNum: [],
      date: [],
      goodVisitNum: [],
      goodsName: [],
      name: "0"
    };
  },
  mounted() {
    this.showEeharts();
  },

  methods: {
    showEeharts() {
      var chart1 = echarts.init(this.$refs.chart1);
      var presents = [
        "有更多经济需求",
        "娱乐活动简单",
        "社交空间单一",
        "集市设施简陋",
        "游客体验感不高",
        "日常较单一",
        "集市停车不便",
        "菜市场利用不高",
        "主街界面封闭",
        "公共空间基本没有",
        "空间利用率低",
        "村镇缺乏活力",
        "缺乏儿童游乐空间",
        "建筑风格少特点",
        "认知度不高",
        "优质的自然人文资源没发挥最好作用"
      ];

      var data = [];
      for (var i = 0; i < presents.length; ++i) {
        data.push({
          name: presents[i],
          value: (presents.length - i) * 20
        });
      }
      for (var i = 10; i < presents.length; ++i) {
        var cnt = Math.floor(Math.random() * 10);
        for (var j = 0; j < cnt; ++j) {
          data.push({
            name: presents[i],
            value: Math.random() * 10
          });
        }
      }
      var chart1Option = {
        title: {
          text: "班级宣言", //标题
          x: "center",
          textStyle: {
            fontSize: 23
          }
        },
        backgroundColor: "#00023f",

        grid: {
          left: 0,
          bottom: 0,
          top: 0,
          right: 0
        },
        xAxis: {
          type: "category",
          show: false
        },
        yAxis: {
          max: 100,
          show: false
        },
        series: [
          {
            type: "wordCloud",
            sizeRange: [8, 60],
            rotationRange: [0, 0],
            textPadding: 100,
            gridSize: 8,
            width: "100%",
            height: "65%",
            left: "center",
            top: "center",
            drawOutOfBound: false,
            textStyle: {
              normal: {
                color: function() {
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160)
                    ].join(",") +
                    ")"
                  );
                }
              }
            },
            data: data
          }
        ]
      };
      chart1.setOption(chart1Option);
    }
  }
};
</script>
<style lang="less">
</style>

实现效果：