近日，工作原因接触到绘制图表，粗糙的查询了下绘制图表工具，也因此接触到了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&
最低0.47元/天 解锁文章
1301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
