最开始接触到Echarts是在去年接私单的时候遇到，一使用，发现Echarts大有研究之处。恰逢工作里负责的两个项目均使用了大量的Echarts，现在就自己当前做过的一些图表做一些简单的总结，一来可以巩固加深自己的印象，二来其实是想养成一个总结的习惯。这样比较能在自我规划上有一个参考。
Echarts不难找，百度搜就能查到官网地址：echarts.baidu.com。 它主要是一个纯图表的JS库，基本上能想到的图表，这里能到找到。并且可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）。因为它的直观性高、交互性强，还有可视化的效果体现，运用最多的地方便是数据统计的模块。官网下载界面提供了几种版本的下载，便于以后的长期使用， 我建议下载完整版的。
使用也非常简单，下载完成后，先引入Echarts的JS文件，引入后，需要为图表设置一个DOM容器，并且设置容器的宽度和高度（切忌一定要设置高度，博主我刚开始用的时候经常忘记设置高度，当然你们比较聪明，不会忘记）。然后通过echarts.init方法初始化一个echarts实例，并通过setOption生成一个简单的图表。切忌，一定要为图表的容器设置一个高度，不然图表无法显示。完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts实例</title>
//引入Echarts.js文件
<script src="echarts.min.js" />
<body>
//为图表设置一个有宽高度的容器
<div id="main" style="height: 240px;width: 100px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
//使用刚指定的配置项和数据显示图表。
myChart.setOption("option");
</script>
</body>
</head>
</html>
这样，一个图表就完成了：（当然，还有很多效果需要参考文档来完善）
当一个页面需要多个图表的时候，只需要参照以上规范，重新定义myChart和option，例如：
var mapChart = echarts.init(document.getElementById("map"));
var mapoption = {
......
}
mapChart.setOption("mapoption");
关于图表里的交互事件，参考Echarts官网的文档就可以找到。
使用Echarts总结：多看文档，多练！基本上所有的功能和展示效果都能通过文档，结合自身项目需要完美实现。剩余不懂的，当然是问度娘啦~~~~
后面会详细讲解Echarts里的地图
网友评论