echarts詞雲圖是echarts的一個擴充套件

https://echarts.apache.org/zh/download-extension.html

1.安裝依賴

npm install echarts
 
npm install echarts-wordcloud

2.main.js引入

import echarts from 'echarts';
vue.prototype.$echarts = echarts

3.在用到的元件中引入擴充套件

<script>
import "ech程式設計客棧arts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
 
</script>

4.配置

<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-tab-pane label="各省現有確診" name="1">
          <div ref="chart2" style="width: 800px;height:600px;" class="charts-two"></div>
        </el-tab-pane>
        <el-tab-pane label="各市累計確診" name="2">
          <div ref="chart3" style="width: 800px;height:600px;"></div>
        </el-tab-pane>
        <el-tab-pane label="各市現有確診" name="3">
          <div ref="chart4" 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 chart2 = echarts.init(this.$refs.chart2);
      var chart3 = echarts.init(this.$refs.chart3);
      var chart4 = echarts.init(this.$refs.chart4);
      var data1 = [
         {'name': '香港','value': 11801},{'name': '臺灣','value': 1178},{'name': '上海','value': 2006},{'name': '廣東','value': 2365},{'name': '雲南','value': 347},{'name': '四川','value': 992},{'name': '福建','value': 595},{'name': '浙江','value': 1345},{'name': '海南','value': 188},{'name': '江蘇','value': 720},{'name': '天津','value': 387},{'name': '山西','value': 251},{'name': '廣西','value': 275},{'name': '陝西','value': 592},{'name': '湖北','value': 38158},{'name': '重慶','value': 597},{'name': '內蒙古','value': 382},{'name': '湖南','value': 1045},{'name': '山東','value': 879},{'name': '北京','value': 1057},{'name': '河南','value': 1312},{'name': '甘肅','value': 193},{'name': '西藏','value': 1},{'name': '吉林','value': 573},{'name': '河北','value': 1317},{'name': '青海','value': 18},{'name': '澳門','value': 49},{'name': '新疆','value': 980},{'name': '遼寧','value': 408},{'name': '安徽','value': 994},{'name': '黑龍江','value': 1610},{'name': '貴州','value': 147},{'name': '江西','value': 937},{'name': '寧夏','value': 75}
      ]
      var data2 = [
         {'name': '香港','value': 118},'value': 89},'value': 56},'value': 51},'value': 46},'value': 30},'value': 25},'value': 22},'value': 17},'value': 8},'value': 7},'value': 6},'value': 4},'value': 3},'value': 2},'value': 0},'value': 10},http://www.cppcns.com
 
'value': 0},'value': 0}
         ]
      var data3 = [
         {'name': '香港','value':www.cppcns.com 188},'value': 75}
      ]
      var data4 = [
         {'name': '香港','value': 0}
         ]
			var chart1Option = {
          title: {
              text: '各省累計確診-詞雲',//標題
              x: 'center',textStyle: {
                  fontSize: 23
              }
 
          },backgroundColor: '#fff',//F7F7F7
          tooltip: {
              show: true
          },series: [{
              name: '各省累計確診',//資料提示窗標題
              type: 'wordCloud',sizeRange: [12,64],//畫布範圍，如果設定太大會出現少詞（溢位螢幕）
              rotationRange: [-45,90],//資料翻轉範圍
              //shape: 'circle',textPadding: 0,autoSize: {
                  enable: true,minSize: 6
              },textStyle: {
                  normal: {
                      color: function() {
                          return 'rgb(' + [
                              Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },emphasis: {
                      shadowBlur: 10,shadowColor: '#333'
                  }
              },data: data1,}]
      };
 
      var chart2Option = {
          title: {
              text: '各省現有確診-詞雲',tooltip: {
              show: true
          },series: [{
              name: '各省現有確診',data: data2,}]
      };
      var chart3Option = {
          title: {
              text: '各市累計確診-詞雲',series: [{
              name: '各市累計確診',minSize: 6
             http://www.cppcns.com
 
 },textStyle: {
                  normal: {
                      color: function() {
                          console.log('rgb(' + [
                              Math.round(Math.random() * 160),Math.round(Math程式設計客棧.random() * 160)
                          ].join(',') + ')')
                          return 'rgb(' + [
                              Math.round(Math.random() * 160),data: data3,}]
      };
      var chart4Option = {
          title: {
              text: '各市現有確診-詞雲',series: [{
              name: '各市現有確診',data: data4,}]
      };
      chart1.setOption(chart1Option);
      chart2.setOption(chart2Option);
      chart3.setOption(chart3Option);
      chart4.setOption(chart4Option);
    },},};
</script>
<style lang="less">
 
</style>

5.完成圖

總結

到此這篇關於vue使用echarts詞雲圖的文章就介紹到這了,更多相關vue echarts詞雲圖內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！