官网： http://echarts.baidu.com/index.html
通过一个简单的小Demo介绍echart的使用：demo均亲测可以运行
demo1：
1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
</body>
2、新建<script>标签引入模块化单文件echarts.js
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>
3、新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js）
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: \'http://echarts.baidu.com/build/dist\'
}
});
</script>
</body>
4、<script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: \'http://echarts.baidu.com/build/dist\'
}
});
// 使用
require(
[
\'echarts\',
\'echarts/chart/bar\' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById(\'main\'));
var option = {
tooltip: {
show: true
},
legend: {
data:[\'销量\']
},
xAxis : [
{
type : \'category\',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : \'value\'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
5、浏览器中打开echarts.html，就可看到以下效果
如果需要不同形式的图标，只更换option就可以了。
demo2：展示了更换option的图标。
1.代码：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: \'http://echarts.baidu.com/build/dist\'
}
});
// 使用
require(
[
\'echarts\',
\'echarts/chart/map\' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById(\'main\'));
option = {
title : {
text: \'iphone销量\',
subtext: \'纯属虚构\',
x:\'center\'
},
tooltip : {
trigger: \'item\'
},
legend: {
orient: \'vertical\',
x:\'left\',
data:[\'iphone3\',\'iphone4\',\'iphone5\']
},
dataRange: {
min: 0,
max: 2500,
x: \'left\',
y: \'bottom\',
text:[\'高\',\'低\'], // 文本，默认为数值文本
calculable : true
},
toolbox: {
show: true,
orient : \'vertical\',
x: \'right\',
y: \'center\',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
roamController: {
show: true,
x: \'right\',
mapTypeControl: {
\'china\': true
}
},
series : [
{
name: \'iphone3\',
type: \'map\',
mapType: \'china\',
roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: \'北京\',value: Math.round(Math.random()*1000)},
{name: \'天津\',value: Math.round(Math.random()*1000)},
{name: \'上海\',value: Math.round(Math.random()*1000)},
{name: \'重庆\',value: Math.round(Math.random()*1000)},
{name: \'河北\',value: Math.round(Math.random()*1000)},
{name: \'河南\',value: Math.round(Math.random()*1000)},
{name: \'云南\',value: Math.round(Math.random()*1000)},
{name: \'辽宁\',value: Math.round(Math.random()*1000)},
{name: \'黑龙江\',value: Math.round(Math.random()*1000)},
{name: \'湖南\',value: Math.round(Math.random()*1000)},
{name: \'安徽\',value: Math.round(Math.random()*1000)},
{name: \'山东\',value: Math.round(Math.random()*1000)},
{name: \'新疆\',value: Math.round(Math.random()*1000)},
{name: \'江苏\',value: Math.round(Math.random()*1000)},
{name: \'浙江\',value: Math.round(Math.random()*1000)},
{name: \'江西\',value: Math.round(Math.random()*1000)},
{name: \'湖北\',value: Math.round(Math.random()*1000)},
{name: \'广西\',value: Math.round(Math.random()*1000)},
{name: \'甘肃\',value: Math.round(Math.random()*1000)},
{name: \'山西\',value: Math.round(Math.random()*1000)},
{name: \'内蒙古\',value: Math.round(Math.random()*1000)},
{name: \'陕西\',value: Math.round(Math.random()*1000)},
{name: \'吉林\',value: Math.round(Math.random()*1000)},
{name: \'福建\',value: Math.round(Math.random()*1000)},
{name: \'贵州\',value: Math.round(Math.random()*1000)},
{name: \'广东\',value: Math.round(Math.random()*1000)},
{name: \'青海\',value: Math.round(Math.random()*1000)},
{name: \'西藏\',value: Math.round(Math.random()*1000)},
{name: \'四川\',value: Math.round(Math.random()*1000)},
{name: \'宁夏\',value: Math.round(Math.random()*1000)},
{name: \'海南\',value: Math.round(Math.random()*1000)},
{name: \'台湾\',value: Math.round(Math.random()*1000)},
{name: \'香港\',value: Math.round(Math.random()*1000)},
{name: \'澳门\',value: Math.round(Math.random()*1000)}
]
},
{
name: \'iphone4\',
type: \'map\',
mapType: \'china\',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: \'北京\',value: Math.round(Math.random()*1000)},
{name: \'天津\',value: Math.round(Math.random()*1000)},
{name: \'上海\',value: Math.round(Math.random()*1000)},
{name: \'重庆\',value: Math.round(Math.random()*1000)},
{name: \'河北\',value: Math.round(Math.random()*1000)},
{name: \'安徽\',value: Math.round(Math.random()*1000)},
{name: \'新疆\',value: Math.round(Math.random()*1000)},
{name: \'浙江\',value: Math.round(Math.random()*1000)},
{name: \'江西\',value: Math.round(Math.random()*1000)},
{name: \'山西\',value: Math.round(Math.random()*1000)},
{name: \'内蒙古\',value: Math.round(Math.random()*1000)},
{name: \'吉林\',value: Math.round(Math.random()*1000)},
{name: \'福建\',value: Math.round(Math.random()*1000)},
{name: \'广东\',value: Math.round(Math.random()*1000)},
{name: \'西藏\',value: Math.round(Math.random()*1000)},
{name: \'四川\',value: Math.round(Math.random()*1000)},
{name: \'宁夏\',value: Math.round(Math.random()*1000)},
{name: \'香港\',value: Math.round(Math.random()*1000)},
{name: \'澳门\',value: Math.round(Math.random()*1000)}
]
},
{
name: \'iphone5\',
type: \'map\',
mapType: \'china\',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: \'北京\',value: Math.round(Math.random()*1000)},
{name: \'天津\',value: Math.round(Math.random()*1000)},
{name: \'上海\',value: Math.round(Math.random()*1000)},
{name: \'广东\',value: Math.round(Math.random()*1000)},
{name: \'台湾\',value: Math.round(Math.random()*1000)},
{name: \'香港\',value: Math.round(Math.random()*1000)},
{name: \'澳门\',value: Math.round(Math.random()*1000)}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
2.浏览器效果：
更多option，请参考官方文档：http://echarts.baidu.com/echarts2/doc/example.html
备注：灵活使用，注意API的调用，echart是一个很好的图表展示工具。