近日,工作原因接触到绘制图表,粗糙的查询了下绘制图表工具,也因此接触到了echarts,下面简单的谈一下使用时一些体会。
(ps:认识较为肤浅,大神勿喷)
首先,简单介绍一下echarts:百度出品,纯Javascript图表库,基于Canvas,底层依赖ZRender,商业产品通用图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表,支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图(内置世界地图、中国及全国34个省市自治区地理数据),同时支持任意维度的堆积和多图表混合展现。刚好迎合了现在的大数据时代。是一款十分好的免费开源插件。
首先谈一下初次接触echarts的感受,第一感觉:大气,优雅,而且能够清晰的体现数据的走势。通过网页审查元素,了解到在网页解析后通过HTML5中标签Canvas画板来进行绘制,毋庸置疑,后台必然通过JS来控制Canvas来绘制图表,又查看了一下数据传输,使用JSON数据格式配合来进行绘制,好了,初步了解到此为止。下面进行详细解释。
首先,要使用echarts,先要从echarts官网下载一下最新的源码包http://echarts.baidu.com/index.html 文章中设计相关名词可参见http://echarts.baidu.com/doc/doc.html#简介
下面开始绘制图表开始:
首先在网页中要创建好一个容器,即为一个具有固定宽高的div即可
接下来要做的就是生成图表需要使用的文件路径等
require.config({
paths:{
'echarts':'./ echarsjs/echarts', //echarts.js的路径
}
});
接下来还要做的一步就是动态加载echarts然后在编写一个回调函数,最后在回调函数中使用echarts设置 参数,最后就能生成图表了。
require([
'echarts',
'echarts/chart/line'
],
下面说一下需要设置的各项具体有
title (标题)、tooltip(气泡提示框)、legend(图例)、toolbox(辅助工具箱)、calculable(固定是否可计算)、xAxis(X轴)、yAxis(Y轴)、series(数据系列)大体的设置项有这些,其实其中好多东西都是为了生成的图表更好看而添加的设置项,所以大家可以按照自己的所需来进行添加,这点我就不多说了,毕竟每个人的审美观不一样。
咱们在详细的说一下各设置项需要注意的东西
title:标题可分为正标题和副标题
tooltip:气泡提示框说白了就是鼠标放在对应位置动态出来的一个提示框
legend:图例,每一项代表一个系列的name,默认布局到达边缘会自动分行这里面需要设置的一项是data,这里面的data会根据该值索引series中同名系列所用的图表类型和itemStyle,如果索引不到,该item将默认为没启用状态
toolbox:这里面要设置的是显示策略 和具体的显示信息
calculable:让图表一些值能够可计算
xAxis:X轴显示的数据
yAxis:Y轴显示的数据
series:这就是echarts的核心了,是各项数据的详细,对应索引的是lengend
<!DOCTYPE html&