在echarts3中使用字符云

echarts2的官方API里是带有字符云的,但到了echarts3就被从官网上移除了,想要使用的话可以从github上下载:

下载地址:https://github.com/ecomfe/echarts-wordcloud

使用方法:

1.依次引入echarts.min.js和echarts-wordcloud.min.js(文件位置:下载的压缩包下dist/echarts-wordcloud.min.js);

<script src="echarts.min.js"></script>
<script src="echarts-wordcloud.min.js"></script>

2.自己翻译的简易说明(供参考)

 width---字符云画布宽度

 height---字符云画布宽度

maskImage---剪影图像,白色区域将被排除在绘图文本之外,形状选项将继续应用为云的形状。

如:

var maskImage = new Image();  
            //var world_option = world_cloud(eval('(' +  '${cloud}' + ')'),maskImage);  
            var world_option = world_cloud(data,maskImage);  
            maskImage.onload = function () {  
                world_option.series[0].maskImage  
                worldChart.setOption(world_option);  
            }  
            maskImage.src = 'img/ren1.png';  

gridSize---字符之间的间距(int)

sizeRange---字符的范围(array)

rotationRange---字符倾斜的角度(array)

3.实例:

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 45

        rotationRange: [-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 drawn
        drawOutOfBound: false,

        // Global text style
        textStyle: {
            normal: {
                fontFamily: 'sans-serif',
                fontWeight: 'bold',
                // Color can be a callback function or a color string
                color: function () {
                    // Random color
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                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 text
            textStyle: {
                normal: {},
                emphasis: {}
            }
        }]
    }]
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏vue学习

简单的Canvas

ps:上面画内圆时用的moveTo()方法,其实就是“提笔”,首先用“笔”画了个外圆,然后将笔提起来,放到内圆的一点上,然后再画。

593
来自专栏令仔很忙

C#----汉字转拼音

上一篇博客中介绍的是动态加载EasyUI控件显示到前台,里面包括按钮控件,而且每一个设备有可能有不同的命令和参数,不过总共可以显示的有八种不同的按钮,公用的,那...

562
来自专栏Java与Android技术栈

使用Kotlin高效地开发Android App(一)

最近我们在做区块链相关的钱包项目,新的App使用全新的技术栈。在Android中我们使用Kotlin+RxJava+Android Architecture C...

512
来自专栏Android点滴积累

Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)

  一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景。但是,也肯...

800
来自专栏Golang语言社区

【Go 语言社区】 H5 APP 前端开发专业的 HTML 5 Canvas

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canva...

2656
来自专栏编程之旅

iOS开发——Core Graphics绘图

我们在搭建UI界面时,有很多时候,我们会用到iOS自带的绘图功能来完成一些界面的效果,很常用也很方便。今天我们在这里就一起讨论一下iOS的绘图功能。

622
来自专栏hbbliyong

对于Ext.data.Store 介紹 与总结,以及对以前代码的重构与优化

     对于Ext.data.Store 一直不是很了解,不知道他到底是干嘛的有哪些用处,在实际开发中也由于不了解也走了不少弯路, store是一个为Ext器...

2905
来自专栏我和未来有约会

CaseStudy(showcase)数据篇-从XML中获取数据

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

1808
来自专栏web编程技术分享

js学习: 自定义类库 - miniQuery 2.0

2727
来自专栏十月梦想

canvas扇形图、饼状图绘制

上一篇说过使用arc属性绘制一个完整的圆,这是绘制扇形是不是可以刷一下小聪明吧弧度修改一下,你会发现绘制的扇形想西瓜皮一样,只有初始弧度到结束弧度的一个简单连接...

731

扫描关注云+社区