ECharts拥有强大的数据可视化功能,而且使用非常便捷,下面做个总结:
第一步,导入库文件:
<script src="lib/echarts.min.js"></script>
第二步,创建一个放置图表的box:
<div style="width: 600px;height:400px"></div>
第三步,以该box为参数创建一个echarts实例:
var mCharts = echarts.init(document.querySelector("div"))
第四步,准备配置项,这里以条形图为例,包含最基本的三个选项:x轴、y轴和数据点。
var option = { xAxis: { type: ‘category‘, data: [‘小明‘, ‘小红‘, ‘小王‘] }, yAxis: { type: ‘value‘ }, series: [ { name: ‘语文‘, type: ‘bar‘, data: [70, 92, 87] } ] }
第五步,将配置项设置给echarts实例对象。
mCharts.setOption(option)
最核心的步骤便是配置option对象了,这里面的细节数不胜数,必须参考文档,但是一些常用的配置还是有必要熟悉一下。