试用Echarts图表组件中的仪表盘
”ECharts是一款开源、功能强大的数据可视化产品,紧跟着大数据时代的步伐!希望ECharts在未来继续发扬开源的力量,让国内外更多的人用上这款数据可视化产品,为企业、社会创造更大的价值。”
---- 数盟社区创始人 · 兴宝
这句从官网上看到的对Echarts组件特点的描述,是我最开始了解Echarts的动力。应着团队项目需求,我被分配完成数据展示这块儿的任务,也就用到了Echarts组件,以下是一些实现流程和应用这种图表型js的感受。
项目需求:
在主页一个div中对后台警告数据进行图表化展示,鼠标移入可以显示出信息,点击后弹出警告数据的具体内容,点击关闭后回到主页面。
思路分析:
1.从Echarts.js特点出发,提供运行环境,这里就是在其函数作用之前设置画板大小。
2.在前端通过Ajax技术得到要展示的弱类型数据。
3.从Echarts组件中确定图表类型,使数据可以得到最科学的表达。
4.依据Echarts图表组件特点实现前端效果,调通前后端,实现需求。
实现步骤:
1.在页面定义空白带id的div:
2.在javascript中设置大小:
3.在页面引入echarts所依赖的echarts.min.js函数
4..根据图表的类型完成图表展示效果:
5.具体信息的显示:
展示效果:
使用感受:
1.echarts.min.js大小为602KB,移入方便
2.图表参数option选项较多,可操作性很强,需要花精力
3.整体流程很固定(前端基本都是这个特点)
4.Echarts图表类型很多,效果很炫