数据可视化【Echarts】
想实现炫酷的动态数据效果嘛?想制作属于自己的数据可视化页面嘛?跟着咱魔鬼的步伐,5分钟,带你快速写出自己想要的可视化数据。
在聊如何实现之前,必须要提的就是Echarts官网了,里面有大量的数据可视化库,供我们学习与使用。网站我放这里了Apache ECharts一个基于 JavaScript 的开源可视化图表库。
其他不多说,直接上才艺,想实现任意一个可视化数据模块,大致可以分为五个步骤:
- 引入Echarts.min.js / Echarts.js
- 给数据模块创建一个DOM容器,用于存放数据可视块 ,容器可以是盒子(记得CSS给宽高)
- 实例化Echarts,语法:
echarts.init(DOM容器)
eg:var my_echarts = echarts.init(document.querySelector('.box'));
- 配置数据option ,这个数据在官网查找,找到你想添加的数据块图,点进去,把左边框起来的代码直接复制到你的页面JS代码中,点进去,如下图:
- 最后把option添加给第二部实例化的对象my_echarts. eg:
my_echarts.setOption(option)
.
随便在官网上找一个饼图:
把他实例化到自己的网页中
代码如下:
// 第一步引入echarts文件 (echarts.min.js/echarts.js)在官网直接下载即可
<script src="../JS动态效果文件/Echarts/echarts.min.js"></script>
// 第二部: 为Echarts准备准备一个DOM容器
<div class="box"></div>
// 第三步: 实例化echarts
var my_bing = echarts.init(document.querySelector('.box'));
// 第四步 配置数据(直接在官网上黏贴)
option = {
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
series: [{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [{
value: 40,
name: 'rose 1'
}, {
value: 38,
name: 'rose 2'
}, {
value: 32,
name: 'rose 3'
}, {
value: 30,
name: 'rose 4'
}, {
value: 28,
name: 'rose 5'
}, {
value: 26,
name: 'rose 6'
}, {
value: 22,
name: 'rose 7'
}, {
value: 18,
name: 'rose 8'
}]
}]
};
// 第五步 把配置好的option数据传给实例化对象my_bing
my_bing.setOption(option);
实现后的效果:
tips: 记得给DOM盒子设置一下样式,给它个宽高,不然这个图形是不显示的(自适应宽高的原因)。
看到这里,想必已经可以实现一些官网存在的数据可视化图了吧,是不是很愉快的操作
仅仅知道这些是可以实现官网上存在的图,但是,怎么设计跟自己业务相匹配的图表呢?如果细心发现,上面js代码中,第四部也就是option配置数据步骤里有许许多多的数据,我们就是在这里修改的,具体怎么修改,我们来认识一下里面的属性…
- title 标题组件,可以修改标题和副标题的内容
- legend 图例组件可以控制图例组件的显隐
- toolbox工具栏 控制着可视图表的下载与刷新等,下载以后是下载成了png图片
- tooltip 提示框组件 控制着鼠标移动到图表上是否显示提示信息
- yAxis 与 xAxis 代表的分别是 y轴与x轴 ,Axis的意思是坐标轴。
- grid 代表绘图网格 ,主要控制网格的大小,形态 ,可以通过调节它的bottom ,left.right等值来控制
- color 控制着折线图线条的颜色【特别注意】颜色写成数组的形式
- series代表着系列列表,主要控制着图表中的数据。 【特别注意】和color一样都是数组的形式。
tips: Echarts的组件是非常多的,在这里就不再一一介绍,再开发中具体用到哪个,在官网的 文档–>配置项手册中查找,了解其技术。
不断复盘,不断优秀,让自己成为镜子里想成为的那个人.关注三连,持续更新~~~