最近工作上用到这个图表库，图表丰富，用起来也很方便。纯javascript，可以流畅得运行在PC和移动设备上，兼容大部分浏览器。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗 图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
Echarts官网：http://echarts.baidu.com/echarts2/index.html
Echarts实例：http://echarts.baidu.com/echarts2/doc/example.html
配置
1. 下载资源文件，去官网下载
http://echarts.baidu.com/echarts2/index.html
2. 目录结构介绍
（1）build 开发所有源文件，一次性引入全部图表 echarts-all.js，推荐引入echarts.js
（2）doc 全部demo事例文件夹
（3）index.html 文档入口
开发模式
1. 开发
如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入
如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。
1、引用资源的主文件
<script src="build/source/echarts.js" type="text/javascript"></script>
2、指图表对象
var myChart = echarts.init(document.getElementById('div1'));
var option = {};
myChart.setOption(option);
示例1 折线图：
HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .chart{ width:900px; height:400px; border:1px solid #dddddd; margin:10px auto; } </style> <script src="build/source/echarts.js"></script> <script src="js/main.js"></script> </head> <body> <div class="chart" id="chart"></div> <script> </script> </body> </html>
js
// 自定义模块加载
require.config({
paths:{
echarts:'./build/dist' //引入资源文件夹路径
}
});
require(['echarts','echarts/chart/line'],function(ec){
var chart = document.getElementById("chart");
var myChart = ec.init(chart);
var option = {
title:{
text:'标题',
x:'center' //放置位置——水平
},
tooltip:{
trigger:'axis' //气泡提示配置
},
legend:{ //图例配置
data:['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
padding:5,//图例内边距，默认上下左右内边距为5
itemGap:10, //Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
y:'bottom' //垂直安放位置
},
toolbox:{ //工具箱
show:true, //是否显示工具箱
feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
magicType:{show:true,type:['line','bar','stack','tiled']},
restore:{show:true},
saveAsImage:{show:true}
}
},
xAxis:[{ //x轴
type:'category', //坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
boundary:false, //坐标轴两端空白策略
data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis:[{
type:'value'
}],
series:[
{ //图表数据
name:'邮件营销',
type:'line',
stack:'总量', //组合名称
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack:'总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
myChart.setOption(option);
});
运行结果：
2. 柱状图，饼图
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .chart{ width:900px; height:400px; border:1px solid #dddddd; margin:20px auto; } </style> </head> <body> <!-- 折线图 --> <div class="chart" id="chart1"></div> <!-- 柱状图 --> <div class="chart" id="chart2"></div> <!-- 饼图 --> <div class="chart" id="chart3"></div> <script src="build/source/echarts.js"></script> <script src="js/main.js"></script> </body> </html>
js:
/* *2016.9.6 *主模块 */ // 自定义模块加载 require.config({ paths:{ echarts:'./build/dist' //引入资源文件夹路径 } }); require([ 'echarts', 'echarts/chart/line', //折线图 'echarts/chart/bar', //柱形图 'echarts/chart/pie', //饼图 'echarts/chart/chord', //和弦图 'echarts/chart/map', //地图 'echarts/chart/radar' //雷达 //★一定要注意这里，用什么类型的图表，就要引入对应的文件，只能多引不能少引 ], function(ec){ var chart1 = document.getElementById("chart1"), //折线图 chart2 = document.getElementById("chart2"), //柱状图 chart3 = document.getElementById("chart3"); var myChart1 = ec.init(chart1), myChart2 = ec.init(chart2), mychart3 = ec.init(chart3); // 折线图 var option1 = { title:{ text:'标题', x:'center' //放置位置——水平 }, tooltip:{ trigger:'axis' //气泡提示配置 }, legend:{ //图例配置 data:['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'], padding:5,//图例内边距，默认上下左右内边距为5 itemGap:10, //Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔 y:'bottom' //垂直安放位置 }, toolbox:{ //工具箱 show:true, //是否显示工具箱 feature:{ mark:{show:true}, dataView:{show:true,readOnly:false}, magicType:{show:true,type:['line','bar','stack','tiled']}, restore:{show:true}, saveAsImage:{show:true} } }, xAxis:[{ //x轴 type:'category', //坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value' boundary:false, //坐标轴两端空白策略 data:['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }], yAxis:[{ type:'value' }], series:[ { //图表数据 name:'邮件营销', type:'line', stack:'总量', //组合名称 data: [120, 132, 101, 134, 90, 230, 210] }, { name:'联盟广告', type:'line', stack:'总量', data:[220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'line', stack: '总量', data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接访问', type: 'line', stack: '总量', data: [320, 332, 301, 334, 390, 330, 320] }, { name: '搜索引擎', type: 'line', stack: '总量', data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; // 柱状图 var option2 = { title:{ text:'某地区蒸发量和降水量', subtext:'数据纯属虚构' }, tooltip:{ trigger:'axis' }, legend:{ data:['蒸发量','降水量'] }, toolbox:{ show:true, feature:{ mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, xAxis:[{ type:'category', data:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }], yAxis:[{ type:'value' }], series:[ { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }, { name:'降水量', type:'bar', data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] } ] }; // 饼图 var option3={ title:{ text:'某站点用户访问来源', subtext:'虚构数据', x:'center' }, tooltip:{ trigger:'item', formatter:'{a} <br/>{b} : {c} ({d}%)' }, legend:{ orient:'vertical', x:'left', data:['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, toolbox:{ show:true, feature:{ mark: { show: true }, dataView: { show: true, readOnly: false }, magicType:{ show:true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore:{show:true}, saveAsImage:{show:true} } }, series:[ { name:'访问来源', type:'pie', radius:'55%', center:['50%','60%'], data:[ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ] } ] }; myChart1.setOption(option1); myChart2.setOption(option2); mychart3.setOption(option3); });
运行结果：
三：相关实例化方法
1、setOption(Object option,{boolean = true} notMerge)
var option={
title:{
text:'我的第一个图表示例'
},
tooltip:{
trigger:'axis'
}
};
2. boolean notMerge,表示是否合并option，默认false，可以不设置
万能接口，配置图表实例任何可配置选项（详见option），多次调用时option选项是默认是合并（merge）的，如果不需求，可以通过notMerger参数为true阻止与上次option的合并。
3. setSeries(Array series,{boolean = }notMerge)
1)Array类型的series序列数据，如下
var Array seriesList = new Array();
var seriesObj = new seriesObj();
seriesObj.name = "蒸发量";
seriesObj.type = "line";
seriesObj.data = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];
//设置series
myChart.setSeries(seriesList,false);
4. showLoading(Object loadingOption)
mychart.showLoading({
text:'图表数据正在努力加载...',
x:'center',
y:'center',
textStyle:{
color:'red',
fontSize:14
},
effect:'spin'
});
//隐藏图表数据加载过度提示消息
myChart.hideLoading();
四：主要配置
title:{ show:true, text:'标题'，
subtext:'副标题'，
left:150, //距离左边的像素 center||right
borderColor:'red', //边框颜色
borderWidth:5, //边框宽度
textStyle:{ //设置标题字体样式
fontSize:18
} }