vue項目中使用echarts實現詞雲

0、先上效果圖

 

 

 

一、安裝插件 -- vue項目中

npm install echarts npm install echarts-wordcloud

 

二、vue頁面中引入組件

<word-cloud-chart id="echarts05" :title="chartsTitle[4]" :data="echarts05Data" :width="width" :height="height"
      />

 

三、建立組件--WordCloudChart.vue

<template>
  <div :id="id" :class="className" :style="{ height:height,width:width }" />
</template>

<script> import echarts from "echarts"; import resize from "./mixins/resize"; import "echarts-wordcloud/dist/echarts-wordcloud"; import "echarts-wordcloud/dist/echarts-wordcloud.min"; export default { mixins: [resize], props: { className: { type: String, default: "chart" }, id: { type: String, default: "chart" }, width: { type: String, default: "100%" }, height: { type: String, default: "400px" }, data: { type: Array, default: [] }, title: { type: String, default: "" } }, 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(this.id)); const option = { title: { text: this.title, x: "center" }, backgroundColor: "#fff", // tooltip: { // pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>" // },
 series: [ { type: "wordCloud", //用來調整詞之間的距離
            gridSize: 10, //用來調整字的大小範圍 // Text size range which the value in data will be mapped to. // Default to have minimum 12px and maximum 60px size.
            sizeRange: [14, 60], // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45 //用來調整詞的旋轉方向，，[0,0]--表明着沒有角度，也就是詞爲水平方向，須要設置角度參考註釋內容 // rotationRange: [-45, 0, 45, 90], // rotationRange: [ 0,90],
            rotationRange: [0, 0], //隨機生成字體顏色 // maskImage: maskImage,
 textStyle: { normal: { color: function() { return ( "rgb(" + Math.round(Math.random() * 255) +
                    ", " + Math.round(Math.random() * 255) +
                    ", " + Math.round(Math.random() * 255) +
                    ")" ); } } }, //位置相關設置 // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud // Default to be put in the center and has 75% x 80% size.
            left: "center", top: "center", right: null, bottom: null, width: "200%", height: "200%", //數據
            data: this.data } ] }; this.chart.setOption(option); } } }; </script>
<style lang='scss' scoped> .chartsClass { padding-left: 1.2rem; } </style>

 

data數據以下：內容太多了，刪掉了一部分

echarts05Data: [
        {
          name: "十九大精神",
          value: 15000
        },
        {
          name: "兩學一作",
          value: 10081
        },
        {
          name: "中華民族",
          value: 9386
        },
        {
          name: "馬克思主義",
          value: 7500
        },
        {
          name: "民族復興",
          value: 7500
        },
        {
          name: "社會主義制度",
          value: 6500
        },
        {
          name: "國防白皮書",
          value: 6500
        },
        {
          name: "創新",
          value: 6000
        },
        {
          name: "民主革命",
          value: 4500
        },
        {
          name: "文化強國",
          value: 3800
        },
        {
          name: "國家主權",
          value: 3000
        },
        {
          name: "武裝顛覆",
          value: 2500
        },
        {
          name: "領土完整",
          value: 2300
        },
        {
          name: "安全",
          value: 2000
        },
        {
          name: "從嚴治黨",
          value: 1900
        },
        {
          name: "現代化經濟體系",
          value: 1800
        },
        {
          name: "國防動員",
          value: 1700
        },
        {
          name: "信息化戰爭",
          value: 1600
        },
        {
          name: "局部戰爭",
          value: 1500
        },
        {
          name: "教育",
          value: 1200
        },
        {
          name: "職業教育",
          value: 1100
        },
        {
          name: "兵法",
          value: 900
        },
        {
          name: "一國兩制",
          value: 800
        },
        {
          name: "特點社會主義思想",
          value: 700
        },
      ]