echarts3.x，echarts5.x 的wordCloud兼容

echarts5.x 使用echarts-wordcloud2版本，参考官方Github https://github.com/ecomfe/echarts-wordcloud
且要注意写法，textStyle 设置随机色时，不用加normal，否则会出不了颜色

var chart = echarts.init(document.getElementById('main'));chart.setOption({...series: [{type: 'wordCloud',// The shape of the "cloud" to draw. Can be any polar equation represented as a// callback function, or a keyword present. Available presents are circle (default),// cardioid (apple or heart shape curve, the most known polar equation), diamond (// alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.shape: 'circle',// A silhouette image which the white area will be excluded from drawing texts.// The shape option will continue to apply as the shape of the cloud to grow.maskImage: maskImage,// 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',width: '70%',height: '80%',right: null,bottom: null,// Text size range which the value in data will be mapped to.// Default to have minimum 12px and maximum 60px size.sizeRange: [12, 60],// Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45rotationRange: [-90, 90],rotationStep: 45,// size of the grid in pixels for marking the availability of the canvas// the larger the grid size, the bigger the gap between words.gridSize: 8,// set to true to allow word being draw partly outside of the canvas.// Allow word bigger than the size of the canvas to be drawndrawOutOfBound: false,// If perform layout animation.// NOTE disable it will lead to UI blocking when there is lots of words.layoutAnimation: true,// Global text styletextStyle: {fontFamily: 'sans-serif',fontWeight: 'bold',// Color can be a callback function or a color stringcolor: function () {// Random colorreturn 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')';}},emphasis: {focus: 'self',textStyle: {shadowBlur: 10,shadowColor: '#333'}},// Data is an array. Each array item must have name and value property.data: [{name: 'Farrah Abraham',value: 366,// Style of single texttextStyle: {}}]}]
});

因为项目使用echarts3.x版本，那么echarts-wordcloud2版本的就没法使用了，在网上找到一个博主分享的
echarts4.0使用wordCloud的方法（支持彩色字体）
采用他分享的echarts-wordcloud版本就可以兼容了echart3.x版本

下载地址：点我下载
下载密码：fabw

注意：里面案例的写法，textStyle是有加normal的，且是有动态效果的

 var option = {series: [ {type: 'wordCloud',sizeRange: [10, 100],rotationRange: [-90, 90],rotationStep: 45,gridSize: 2,shape: 'pentagon',maskImage: maskImage,drawOutOfBound: false,textStyle: {normal: {color: function () {return 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')';}},emphasis: {color: 'red'}},data: data.sort(function (a, b) {return b.value  - a.value;})} ]};

echarts3.x，echarts5.x 的wordCloud兼容相关推荐

echarts5.x 词云图使用（`[ECharts] Unkown series wordCloud`）
文章目录 echarts5.x 词云图使用(`[ECharts] Unkown series wordCloud`) 背景预期效果样例代码自定义形状动效 echarts5.x 词云图使用([E ...
在echarts3中使用字符云
echarts2的官方API里是带有字符云的,但到了echarts3就被从官网上移除了,想要使用的话可以从github上下载: 下载地址:https://github.com/ecomfe/echar ...
使用python的wordcloud包实现中文标签云制作
一.前言数据分析报告之中文标签云在我的前一篇博客(python爬虫爬取拉勾网职业信息)中,获得了一份格式化的职业信息数据,不清楚的可以看看我的上一篇博客. python制作标签云的包有几个,我这里 ...
Echarts3 使用详解
因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...
用echarts3和worldcloud制作炫酷的字符云图
最近有个项目需要做出云图来,一开始还不知道云图是什么鬼,直到需求在网上找了个图我才恍然大悟,但是大悟完就开始一脸懵逼了,这玩意怎么做?因为当时项目紧,项目经理就先叫我用photoshop画了一个云图给 ...
Echarts3 关系图-力导向布局图
因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...
python程序创建词云中国地图_Python基于wordcloud及jieba实现中国地图词云图
热词图很酷炫,也非常适合热点事件,抓住重点,以图文结合的方式表现出来,很有冲击力.下面这段代码是制作热词图的,用到了以下技术: jieba,把文本分词 wordcloud,制作热图 chardet,辨 ...
IE8 + JQuery1.12.4 兼容之旅
公司的产品大部分的用户可能还在使用IE8,无奈兼容IE8重构中,其实对于兼容IE8没有太多的抗拒,这么久了网上关于如何兼容IE的资料比较多,整体看来没有什么特别大的坑. 起手式如果需要兼容IE8,那 ...
解决echarts5中国地图只显示南海问题，及china.js china.json下载
问题: echarts5中国地图,只显示南海说明: echarts3版本后,因为版权问题,echarts不再内置中国地图,也没有中国地图数据,网上找的又很多有问题,或者语焉不详... 1:需要手动引 ...

echarts3.x，echarts5.x 的wordCloud兼容

echarts3.x，echarts5.x 的wordCloud兼容相关推荐

最新文章

热门文章