试用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图表类型很多，效果很炫