工具:ECharts可视化解决方案

随着前端开源框架越来越多,界面和可视化越来越人性化,功能也越来越强大,笔者由于要做大数据定制化项目,可视化解决方案采用的就是ECharts框架。

一、安装部署

  1. 版本,目前有是三个版本。
    完全版:echarts/dist/echarts.js
    常用版:echarts/dist/echarts.common.js
    精简版:echarts/dist/echarts.simple.js
  2. 使用,echarts本质上还是一个javascript文件,所有在html中按照js文件加载就可以了,只不过分本地和线上两种方式加载而已。
    2.1 本地调用;从官网下载源代码,跟自己写的网页放一块,通过javascript引用。
    工具:ECharts可视化解决方案_第1张图片
    2.2 远程调用,首先要保证服务器或者电脑可以上网。
    工具:ECharts可视化解决方案_第2张图片

二、可视化

提到数据可视化有两种情况,一种是把数据写死在网页中,数据和页面是绑定在一起的,看不到数据的变化;另外一种方式是把数据和网页分开,我们通过更新数据来实时展示变化。

  1. 静态展示,就是把数据直接写在网页中。
    工具:ECharts可视化解决方案_第3张图片
    工具:ECharts可视化解决方案_第4张图片
  2. 动态展示,动态展示是把数据和网页分开,笔者这里把数据存放在json文件中,通过javascript异步加载数据到网页中,当更新json数据文件的时候就展示不同的显示了。
    工具:ECharts可视化解决方案_第5张图片
    工具:ECharts可视化解决方案_第6张图片
    工具:ECharts可视化解决方案_第7张图片
    虽然在展示上面都没什么差别,但在实际部署过程中注意区分,静态展示直接用浏览器打开就可以查看,动态展示一定要把相关文件存放到web服务器上才能查看。

参考文献
1.ECharts官网
2.ECharts中文教程
3.Github源代码
4.大屏数据可视化案例汇总

你可能感兴趣的:(工具,大数据)