基于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);
搞定收工
- 内部威胁那些事儿(二):系统破坏
- 从用户行为去理解内容-item2vec及其应用
- Dubbo与Zookeeper、SpringMVC整合和使用(入门级)
- Websocket HandShake Sec-WebSocket-Accept 生成策略
- 关于JVM CPU资源占用过高的问题排查
- ActiveMQ简单介绍以及安装
- Java Process destroy方法kill进程,返回码测试
- 百度人脸识别API Java调用
- Java Socket Timeout总结
- 求一个数组中子数组的最大和算法(Java实现)
- JDBC批量提交SQL的几点问题解答
- 工具推荐: 汽车CAN总线分析框架CANToolz
- Windows下jps, jconsole无法查看本地java进程问题解决
- DateFormat 线程不安全
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例