最近使用到了 百度的 Echarts 数据可视化工具,这里简单介绍如何快速上手。
一.下载
这里选择目前最新版本,4.2.1
地址:https://github.com/apache/incubator-echarts/archive/4.2.1.zip
在解压出来的文件夹里的 dist
目录里可以找到最新版本的 echarts 库。
二.上手
不管你使用那种 js 语言,要想实现功能,最核心的就是 下面的三个步骤。
引入 Echarts 之前,要引入 jquery 库
1.引入 ECharts
2.准备容器
3.绘制图表
通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。
最终效果
三、使用
到这里,你可以在自己的项目中实现了简单的引入,但是具体实现还要根据自己的业务需求进行定制。
这是官方提供的几个简单的实例:https://echarts.baidu.com/examples/,可以根据需求,选择不同的展示类型。
这些例子都可以点开,在线编辑,实时展示在线修改效果。
1.数据异步加载
入门示例中的数据是在初始化后setOption
中直接填入的,但是很多时候可能数据需要异步加载后再填入。ECharts
中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption
填入数据和配置项就行。
先设置完其它的样式,显示一个空的直角坐标轴,然后获取数据后填入数据。
不管使用那种方式,最关键的的就是 一定要等到 <div id="main" style="width: 600px;height:400px;"></div> 渲染完成!!
方式一:
方式二:
注意:这里的 series 是一个数组,后台赋值的时候要注意数值的对应。
说明:x轴与 y轴 数据的对应,其实就是 option.xAxis.data 与 option.series[0].data 数值的对应,这两个数组的长度是一样的,数据也是一一对应的 比如:xAxis.data[0], 对应 series[0].data[0],只要后台对应好数据就可以了。
2.loading 动画
如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 b