基于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(多层配置):
多层配置(比如说旭日图最外层的阳光就得用到它,通过他配置每一层的样式);
例如,将最外层的扇形块的标签向外显示,形成阳光效果,可以这样设置:
levels: [{}, {}, {}, {},
{
// 最后一层
label: {
position: 'outside',
padding: 3,
silent: false
},
itemStyle: {borderWidth: 3}
}
],
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
}]
数据值,如果包含 children,则可以不写 value 值。这时,将使用子元素的 value 之和作为父元素的 value。如果 value 大于子元素之和,可以用来表示还有其他子元素未显示。
series[i]-sunburst.data[i].name 字符串
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);
搞定收工
基于Echarts4.0实现旭日图的更多相关文章
- Web纯前端“旭日图”实现元素周期表
一.什么是旭日图 旭日图是在Excel 2016中新增的一种图表.有些类似饼图,饼图的优势是可以显示占比.但是饼图只能显示单级数据.旭日图用来表示多层级数据的占比.旭日图以一种分层方式显示,非常适合用 ...
- 编译可在Nexus5上运行的CyanogenMod13.0 ROM(基于Android6.0)
编译可在Nexus5上运行的CyanogenMod13.0 ROM (基于Android6.0) 作者:寻禹@阿里聚安全 前言 下文中无特殊说明时CM代表CyanogenMod的缩写. 下文中说的“设 ...
- 基于vue2.0的分页组件开发
今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...
- Servlet3.0学习总结——基于Servlet3.0的文件上传
Servlet3.0学习总结(三)——基于Servlet3.0的文件上传 在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileu ...
- 基于AFNetworking3.0网络封装
概述 对于开发人员来说,学习网络层知识是必备的,任何一款App的开发,都需要到网络请求接口.很多朋友都还在使用原生的NSURLConnection一行一行地写,代码到处是,这样维护起来更困难了. 对于 ...
- iOS_SN_基于AFNetworking3.0网络封装
转发文章,原地址:http://www.henishuo.com/base-on-afnetworking3-0-wrapper/?utm_source=tuicool&utm_medium= ...
- 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...
- 基于vue2.0的一个豆瓣电影App
1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...
- WmS简介(三)之Activity窗口是如何创建的?基于Android7.0源码
OK,在前面两篇博客中我们分别介绍了WmS中的token,同时也向小伙伴们区分了Window和窗口的区别,并且按照type值的不同将Android系统中的窗口分为了三大类,那么本篇博客我们就来看看应用 ...
随机推荐
- 用js筛选数据排序
题目 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示 <!DOCTYPE html> ...
- ES6 对象的扩展(下)
属性的可枚举性 对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为.Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象. var ob ...
- Create 命令详解
mkdir:创建一个目录 /mkdir a b c :创建同级目录 /mkdir -p aa/bb/cc: 递归创建目录touch:修改文件时间戳,或者新建一个不存在的文件 /-a 更改存取时间 /m ...
- Java NIO (三) 通道(Channel)
通道(Channel):由 java.nio.channels 包定义的,Channel 表示 IO 源与目标打开的连接.Channel 类似于传统的"流",只不过 Channel ...
- 安装MySQL时提示3306端口已被占用的解决方案
之前安装过mysql,用的好好的,但是今天开启服务时报异常,无法启动.为省事,于是想到卸载重装,安装过程中发现3306已经被占用,这也是一开始服务无法启动的原因. 看到有人说用fport查看端口号,于 ...
- 移动端IOS第三方输入法遮挡底部Input及android键盘回落留白问题
var interval; //消息框获取焦点 $('#J_text').focus(function(){ interval = setInterval(function() { scrollToE ...
- js遍历 子节点 子元素
Js 节点 子元素 属性 方法 // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); v ...
- 笔记-CGRectInset CGRectoffset UIEdgeInsetsInsetRect 这三个函数的使用情况
//CGRectInset 将原来的矩形放大或者缩小,正表示缩小,-表示放大. CGRect rect= CGRectMake(20, 50, 100, 80); CGRect rect1=CGRec ...
- 454ITS数据按barcode和primer分类程序v1.0
不知道有什么好办法可以让primer允许漏配,现在仅仅是允许错配,还是有一些没有配上,454数据有些primer漏配了一些,下一步解决这个问题 #include <cstdio> #inc ...
- 基础环境之Docker入门
随着Docker技术的不断成熟,越来越多的企业开始考虑使用Docker.Docker有很多的优势,本文主要讲述了Docker的五个最重要优势,即持续集成.版本控制.可移植性.隔离性和安全性. 有了Do ...