vue页面引用echart的词云图

效果图

（1）安装依赖

npm install echarts

npm install echarts-wordcloud

（2）main.js加入 import echarts from 'echarts' Vue.prototype.$echarts = echarts

（3）在新建的echar.vue页面中添加以下div和样式

div:绑定词云图的数据

样式：控制展示内容的大小

#char2 {
       float: left;
       padding-top: 20px;
       width: 100%;
       height: 300px;
       margin-top: 10px;
       border: 1px solid #E4E4E4;
       background: #ffffff;
       border-radius: 6px;
   }

（4）在script中的export default之前添加

import echarts from "echarts";
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";

（5）定义需要展示的词语和数值（数值越大，字体会越大）

worddata: [{
                       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
                   },
               ],

（6）在methods添加一个initChsrts()方法，option相关echart属性

initCharts() {

let myChart2 = echarts.init(this.$refs.chart2);
               myChart2.setOption({
                   title: {
                       //                       text: "热爱祖国",
                       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],
                       //随机生成字体颜色
                       textStyle: {
                           normal: {
                               color: function() {
                                   return(
                                       "rgb(" +
                                       Math.round(Math.random() * 255) +
                                       ", " +
                                       Math.round(Math.random() * 255) +
                                       ", " +
                                       Math.round(Math.random() * 255) +
                                       ")"
                                   );
                               }
                           }
                       },
                       //位置相关设置
                       left: "center",
                       top: "center",
                       right: null,
                       bottom: null,
                       width: "200%",
                       height: "200%",
                       //数据
                       data: this.worddata
                   }]

})

}

----------------------------------- 完成 ---------------------------------------------

vue页面引用echart的词云图相关推荐

Java+Python+Paddle提取长文本文章中词频，用于Echart词云图数据
公司有个需求,就是需要提供给echart词云图的数据,放在以前我们的数据来源都是从产品那直接要,产品也是跑的别的接口,那怎么行呢,当然有自己的一套可以随便搞了,那么操作来了 Java package ...
VUE弹窗加载另一个VUE页面
之前实现了一个功能VUE利用tree-transfer插件实现角色菜单动态设置在这个功能的基础上,进一步完善角色列表Uacter.vue页面,点击[菜单设置]按钮,弹出角色菜单MenuRole.v ...
vue 公用页面引用_关于vue全局引用公共的js和公共的组件的折腾
前沿最近在项目开发中遇到一些需要全局引用的公共js,或者公共组件,早就烦死了那种每个页面都写一遍,都引用一个js的写法,正好vue解决了这个额问题,于是乎就开始折腾,折腾的过程中也发现了一些自己之前 ...
vue实现词云图（echarts/Highcharts）
vue实现词云图 1.echarts实现安装注意版本 echarts-wordcloud@2 is for echarts@5 echarts-wordcloud@1 is for echarts ...
挖坑指南：如何在引用的外部js文件中获取vue页面实例？（独家）
原文链接前言在基于iView的后台项目中,表格组件是我们的老朋友了.实现如下的效果更是最基本的需求: 开始在iView早期1.x的版本(其实在~2.0.0-rc.7也能使用),想要渲染这样的效果 ...
vue多个页面引用相同组件在一个页面修改数据多个页面受影响
例如多个页面引用树结构当页面修改树结构默认值时离开的页面选择的树的数据会被修改查看很久发现不管当前路由是否为active 都会被修改解决办法:将树组件中的mounted和watch改为ac ...
vue页面和nvue页面、引用阿里图标库-图标方法
iconfont-阿里巴巴矢量图标库选择所有要使用的图标加入购物车如下图下载下载后下面的3个图标可以任意使用后期如果增加了图标需要重复以下步骤并且把 .ttf 这个文件替换掉项目 ...
vue页面参数传递(VUE+echart+map联动实例)
我们在使用vue的时候经常会遇到页面参数传递,相比之前JavaScript操作,js入参传参,js之间方法调用只要我们引入js就可以相互调用,但是vue里面的不太一样,主要涉及有三种方式,父子传参,子 ...
vue简单实现词云图组件
说在前面 JavaScript也有许多可以用来生成词云图的库,但我自己其实都没有使用过,之前使用python的时候倒是用过python的wordcloud库,wordcloud库配合jieba库就可以 ...
vue前端生成词云图的方法
我试过很多方法,自定义词云图.echarts-wordcloud.highcharts都是各种各样报错,基本是是找不到wordcloud模块,引入了也会报错,最终发现js2wordcloud可以用 i ...

vue页面引用echart的词云图

vue页面引用echart的词云图相关推荐

最新文章

热门文章