基于Echarts4.0实现旭日图

昨天Echarts4.0正式发布,随着4.0而来的是一系列的更新,挑几个主要的简单说明:

1.展示方面通过增量渲染技术(4.0+)ECharts 能够展现千万级的数据量

2.针对移动端优化,移动端小屏上适于用手指在坐标系中进行缩放、平移。可选的 SVG 渲染模块让图表在移动端更加节省内存。

3.增加多种渲染方案,可实现跨平台使用,现有三种方案,可渲染Canvas、SVG(4.0+)、VML 的形式渲染图表。VML 可以兼容低版本 IE,SVG 使得移动端不再为内存担忧,Canvas 可以轻松应对大数据量和特效的展现。

4.从 4.0 开始通过和微信小程序的团队合作,提供了 ECharts 对小程序的适配!(目前功能开发完毕,内测中,等待微信开发者工具更新,超激动!!!!!!)

5.无障碍访问(4.0+),支持自动根据图表配置项智能生成描述,使得盲人可 以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问

6.增加旭日图图表

旭日图尝鲜:

旭日图也称为太阳图(长得确很像太阳,层级关系也很像地球的内部结构),层次结构中每个级别的比例通过1个圆环表示,离原点越近代表圆环级别越高,最内层的圆表示层次结构的顶级,然后一层一层去看数据的占比情况。另外,有人说旭日图是圆环图的子集,其实可以这样理解,因为当数据不存在分层,这时旭日图=圆环图。

实例:实现一个省市区的旭日图

1.html-----这个就不说了

<div id="sun" style="width: 500px;height: 500px;"></div>

2.配置项(部分常用);

type(类型):

设置为'sunburst'

type: 'sunburst'

center(图的坐标):

默认是[50%,50%],居中显示

旭日图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。

支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。

center: ['50%', '50%']

levels(多层配置):

多层配置(比如说旭日图最外层的阳光就得用到它,通过他配置每一层的样式);

例如,将最外层的扇形块的标签向外显示,形成阳光效果,可以这样设置:

data(数据):

 data的数据格式是树状的,例如:

[{
    name: 'parent1',
    value: 10,          // 可以不写父元素的 value,则为子元素之和;
                        // 如果写了,并且大于子元素之和,可以用来表示还有其他子元素未显示
    children: [{
        value: 5,
        name: 'child1',
        children: [{
            value: 2,
            name: 'grandchild1',
            itemStyle: {
                // 每个数据可以有自己的样式,覆盖 series.itemStyle 和 level.itemStyle
            },
            label: {
                // 标签样式,同上
            }
        }]
    }, {
        value: 3,
        name: 'child2'
    }],
    itemStyle: {
        // parent1 的图形样式,不会被后代继承
    },
    label: {
        // parent1 的标签样式,不会被后代继承
    }
}, {
    name: 'parent2',
    value: 4
}]

series[i]-sunburst------->data[i]----->value 数字

数据值,如果包含 children,则可以不写 value 值。这时,将使用子元素的 value 之和作为父元素的 value。如果 value 大于子元素之和,可以用来表示还有其他子元素未显示。

series[i]-sunburst.data[i].name 字符串

显示在扇形块中的描述文字。

series[i]-sunburst.data[i].children 数组

子节点,递归定义,格式同 series-sunburst.data

配置完成代码js

var myCharts = echarts.init(document.getElementById('sun'));
        var option = {
            series: {
                type: 'sunburst',
                center: ['50%', '50%'],
                levels: [{}, {}, {}, {}, {
                    
                    label: {
                        position: 'outside',
                        padding: 3,
                        silent: false
                    },
                    itemStyle: {
                        borderWidth: 3
                    }
                }],
                data: [{
                    name: '辽宁省',
                    children: [{
                            name: '沈阳市',
                            children: [{
                                    name: '沈河区',
                                    children: [{
                                        name: '抽烟人数',
                                        value: 20
                                    },{
                                        name: '不抽烟人数',
                                        value: 40
                                    }]
                                },
                                {
                                    name: '大东区',
                                    value: 40
                                },
                                {
                                    name: '沈北新区',
                                    value: 40
                                },
                                {
                                    name: '铁西区',
                                    children: [{
                                        name: '抽烟人数',
                                        value: 40
                                    },{
                                        name: '不抽烟人数',
                                        value: 20
                                    }]
                                }
                            ]
                        },
                        {
                            name: '朝阳市',
                            value: 10
                        },
                        {
                            name: '大连市',
                            value: 10
                        },
                        {
                            name: '铁岭市',
                            value: 10
                        },
                        {
                            name: '抚顺市',
                            value: 10
                        },
                    ]
                }, {
                    name: '吉林省',
                    value: 20
                }, {
                    name: '黑龙江省',
                    value: 20
                }, {
                    name: '河北省',
                    children: [{
                            name: '郑州市',
                            children: [{
                                    name: '1区',
                                    value: 70
                                },
                                {
                                    name: '2区',
                                    value: 40
                                },
                                {
                                    name: '3区',
                                    value: 40
                                },
                                {
                                    name: '4区',
                                    value: 5
                                }
                            ]
                        },
                        {
                            name: '信阳市',
                            value: 20
                        },
                        {
                            name: '安阳市',
                            value: 10
                        },
                        {
                            name: '邯郸市',
                            value: 30
                        },
                        {
                            name: '承德市',
                            value: 5
                        },
                    ]
                }]
            }
        };
        myCharts.setOption(option);

 搞定收工

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android机动车

自定义View之客服好评View

这个版本主要的任务就是完成环信客服系统的集成,上一篇文章 仿IOS下载View 也是这个版本开发需求中的一小部分,那今天介绍一下另一个小需求 客服好评。 客服好...

895
来自专栏企鹅号快讯

SVG之旅:SVG的图层和渲染顺序

不管是在制图软件中还是Web页面的DOM元素,都有层的概念。在制图软件中,大家比较熟悉,能非常的清晰的看出图层的概念。而在Web页面中,特别是我们熟悉的HTML...

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

分析Silverlight Button控件布局

分析Silverlight Button控件布局 答:关于按钮自适应 Silverlight也算一个比较开放的技术。Button控件其实也是一些标准的Grid...

3545
来自专栏数据小魔方

数据透视表入门

今天跟大家分享有关数据透视表入门的技巧! 数据透视表是excel附带功能中为数不多的学习成本低、投资回报率高、门槛低上手快的良心技能! 对于日程的排序、汇总、...

2706
来自专栏数据小魔方

一篇文章教你搞定JSON素材,从此告别SHP时代~

最近几天推送频率之所以下降了,不是因为偷懒,是在攻克一个难题~ 还记得前一篇推送,关于山东省财政数据可视化那一篇,因为没有精准、最新的山东省县级市边界地图素材数...

3015
来自专栏前端知识分享

第84天:jQuery动态创建表格

501
来自专栏数据小魔方

标注特定日期的折线图

今天给大家分享的标注特定日期的折线图! ▽▼▽ 有时候我们拿到的数据存在特定日气的波动,比如股市、衍生品等指数会存在星期(周末)的波动,如果能够在图表中标注出特...

3347
来自专栏数据小魔方

excel规划求解

今天要跟大家分享的是excel的规划求解的功能! excel的规划求解功能据说很强大,可以求解很多线性规划和其他最优化问题。 但是这个功能我们日常使用的频率却一...

2695
来自专栏yw的数据分析

R语言写2048游戏

       2048 是一款益智游戏,只需要用方向键让两两相同的数字碰撞就会诞生一个翻倍的数字,初始数字由 2 或者 4 构成,直到游戏界面全部被填满,游戏结...

3794
来自专栏编程之路

羊皮书APP(Android版)开发系列(二十四)不常用但是很有用的两个属性:clipToPadding 和 clipChildren

792

扫描关注云+社区