vue使用echarts词云图的实战记录

000

echarts词云图是echarts的一个扩展

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

vue使用echarts词云图的实战记录

1.安装依赖

 npm install echarts
 
 npm install echarts-wordcloud

2.main.js引入

import echarts from \'echarts\';
Vue.prototype.$echarts = echarts

3.在用到的组件中引入扩展

<script>
import \"echarts-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},
         {\'name\': \'台湾\', \'value\': 89},
         {\'name\': \'上海\', \'value\': 56},
         {\'name\': \'广东\', \'value\': 51},
         {\'name\': \'云南\', \'value\': 46},
         {\'name\': \'四川\', \'value\': 30},
         {\'name\': \'福建\', \'value\': 25},
         {\'name\': \'浙江\', \'value\': 22},
         {\'name\': \'海南\', \'value\': 17},
         {\'name\': \'江苏\', \'value\': 8},
         {\'name\': \'天津\', \'value\': 7},
         {\'name\': \'山西\', \'value\': 7},
         {\'name\': \'广西\', \'value\': 7},
         {\'name\': \'陕西\', \'value\': 6},
         {\'name\': \'湖北\', \'value\': 6},
         {\'name\': \'重庆\', \'value\': 6},
         {\'name\': \'内蒙古\', \'value\': 4},
         {\'name\': \'湖南\', \'value\': 4},
         {\'name\': \'山东\', \'value\': 3},
         {\'name\': \'北京\', \'value\': 2},
         {\'name\': \'河南\', \'value\': 1},
         {\'name\': \'甘肃\', \'value\': 1},
         {\'name\': \'西藏\', \'value\': 0},
         {\'name\': \'吉林\', \'value\': 0},
         {\'name\': \'河北\', \'value\': 0},
         {\'name\': \'青海\', \'value\': 0},
         {\'name\': \'澳门\', \'value\': 0},
         {\'name\': \'新疆\', \'value\': 10},
         {\'name\': \'辽宁\', \'value\': 0},
         {\'name\': \'安徽\', \'value\': 0},
         {\'name\': \'黑龙江\', \'value\': 0},
         {\'name\': \'贵州\', \'value\': 0},
         {\'name\': \'江西\', \'value\': 0},
         {\'name\': \'宁夏\', \'value\': 0}
         ]
      var data3 = [
         {\'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 data4 = [
         {\'name\': \'香港\', \'value\': 118},
         {\'name\': \'台湾\', \'value\': 89},
         {\'name\': \'上海\', \'value\': 56},
         {\'name\': \'广东\', \'value\': 51},
         {\'name\': \'云南\', \'value\': 46},
         {\'name\': \'四川\', \'value\': 30},
         {\'name\': \'福建\', \'value\': 25},
         {\'name\': \'浙江\', \'value\': 22},
         {\'name\': \'海南\', \'value\': 17},
         {\'name\': \'江苏\', \'value\': 8},
         {\'name\': \'天津\', \'value\': 7},
         {\'name\': \'山西\', \'value\': 7},
         {\'name\': \'广西\', \'value\': 7},
         {\'name\': \'陕西\', \'value\': 6},
         {\'name\': \'湖北\', \'value\': 6},
         {\'name\': \'重庆\', \'value\': 6},
         {\'name\': \'内蒙古\', \'value\': 4},
         {\'name\': \'湖南\', \'value\': 4},
         {\'name\': \'山东\', \'value\': 3},
         {\'name\': \'北京\', \'value\': 2},
         {\'name\': \'河南\', \'value\': 1},
         {\'name\': \'甘肃\', \'value\': 1},
         {\'name\': \'西藏\', \'value\': 0},
         {\'name\': \'吉林\', \'value\': 0},
         {\'name\': \'河北\', \'value\': 0},
         {\'name\': \'青海\', \'value\': 0},
         {\'name\': \'澳门\', \'value\': 0},
         {\'name\': \'新疆\', \'value\': 10},
         {\'name\': \'辽宁\', \'value\': 0},
         {\'name\': \'安徽\', \'value\': 0},
         {\'name\': \'黑龙江\', \'value\': 0},
         {\'name\': \'贵州\', \'value\': 0},
         {\'name\': \'江西\', \'value\': 0},
         {\'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: \'各省现有确诊-词云\',//标题
              x: \'center\',
              textStyle: {
                  fontSize: 23
              }
 
          },
          backgroundColor: \'#fff\',
          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: data2,
          }]
      };
      var chart3Option = {
          title: {
              text: \'各市累计确诊-词云\',//标题
              x: \'center\',
              textStyle: {
                  fontSize: 23
              }
 
          },
          backgroundColor: \'#fff\',
          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() {
                          console.log(\'rgb(\' + [
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160)
                          ].join(\',\') + \')\')
                          return \'rgb(\' + [
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160)
                          ].join(\',\') + \')\';
                      }
                  },
                  emphasis: {
                      shadowBlur: 10,
                      shadowColor: \'#333\'
                  }
              },
              data: data3,
          }]
      };
      var chart4Option = {
          title: {
              text: \'各市现有确诊-词云\',//标题
              x: \'center\',
              textStyle: {
                  fontSize: 23
              }
 
          },
          backgroundColor: \'#fff\',
          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() {
                          console.log(\'rgb(\' + [
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160)
                          ].join(\',\') + \')\')
                          return \'rgb(\' + [
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160)
                          ].join(\',\') + \')\';
                      }
                  },
                  emphasis: {
                      shadowBlur: 10,
                      shadowColor: \'#333\'
                  }
              },
              data: data4,
          }]
      };
      chart1.setOption(chart1Option);
      chart2.setOption(chart2Option);
      chart3.setOption(chart3Option);
      chart4.setOption(chart4Option);
    },
  },
};
</script>
<style lang=\"less\">
 
</style>

5.完成图

vue使用echarts词云图的实战记录

vue使用echarts词云图的实战记录 

总结

© 版权声明
版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
JavaScript
# 编程开发# JavaScript
喜欢就支持一下吧
点赞0 分享
网络的头像-偶像资源网
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
27天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
27天前 28
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked-偶像资源网
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checke...
30天前 4
jQuery实现滚动效果-偶像资源网
jQuery实现滚动效果
jQuery实现滚动效果
27天前 3
PHP队列原理及基于队列的写文件案例-偶像资源网
PHP队列原理及基于队列的写文件案例
PHP队列原理及基于队列的写文件案例
27天前 2
css文本两端对齐的实现代码-偶像资源网
css文本两端对齐的实现代码
css文本两端对齐的实现代码
30天前 2
相关推荐
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
27天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
27天前 28
吊打全网所有精美导航页引导页HTML源码-偶像资源网
吊打全网所有精美导航页引导页HTML源码
吊打全网所有精美导航页引导页HTML源码
31天前 24
5.9K⭐ 轻松搞定定时任务！Web管理超便捷-偶像资源网
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
30天前 23
css的基本选择器有哪些？-偶像资源网
css的基本选择器有哪些？
css的基本选择器有哪些？
31天前 23
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked-偶像资源网
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
30天前 4
评论 抢沙发

请登录后发表评论

    暂无评论内容