echarts词云实现效果

首先注意echarts和词云版本

  <template>
    <div>
    <div id="chart-container" class="charts-box"></div>
  </div>
  </template>
   
  <script>
import * as echarts from "echarts";
import "echarts-wordcloud";
export default {  
name: "dashboardone",
data() {
  return {
        chart: null,
      };
    },
    mounted() {
      this.initChart();
    },
    // beforeDestroy() {
    //   if (!this.chart) {
    //     return;
    //   }
    //   this.chart.dispose();
    //   this.chart = null;
    // },
    methods: {
      initChart() {
        this.chart = echarts.init(document.getElementById("chart-container"));
        //随机数字
        // var keywords = [];
        // for (let index = 0; index < 20; index++) {
        //   let random = Math.floor(Math.random() * 100);
        //   keywords.push({
        //     name: random,
        //     value: random,
        //   });
        // }
        var keywords = [{"name":"心脏病","value":15},
                            {"name":"高血压","value":10},
                            {"name":"高尿酸","value":24.95},
                            {"name":"高血糖","value":4.04},
                            {"name":"多运动","value":5},
                            {"name":"多喝水","value":50},
                            {"name":"清淡饮食","value":12},
                            {"name":"戒烟酒","value":30},
                            {"name":"糖尿病","value":6.33},
                            {"name":"关节炎","value":13},
                            {"name":"肩周炎","value":12},
                            {"name":"慢性肠炎","value":8.04},
                            {"name":"克罗恩","value":15},
                            {"name":"其他","value":6.97},
                            ]
        var option = {
          series: [
            {
              type: "wordCloud",
            sizeRange: [15, 80],
            rotationRange: [0, 45],
            rotationStep: 45,
            gridSize: 15,
              shape: "pentagon",
              width: "100%",
              height: "100%",
              drawOutOfBound: true,
              textStyle: {
                color: function () {
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                    ].join(",") +
                    ")"
                  );
                },
              },
              emphasis: {
                textStyle: {
                  shadowBlur: 10,
                  shadowColor: "#333",
                  color: "red",
                },
              },
              data: keywords,
            },
          ],
        };
        this.chart.setOption(option);
      },
    },
  };
  </script>
  <style scoped>
  #chart-container {
    height: 100%;
  }
  
  .charts-box {
    min-width: 800px;
    min-height: 300px;
  }
  </style>