1、Echart是什么？
Enterprise Charts的缩写，商业级数据图表，一个纯Javascript的图表库。更多的内容可以参考网上的资料
2、使用步骤
a、下载开发包
官网地址：http://echarts.baidu.com/
所需文件：\echarts-2.2.7\build\dist
b、html页面引入需要的js文件并准备放图表的div（一定要设置大小）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>The Chart</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/dist/echarts.js"></script> //这个js用来绘制图表
<script type="text/javascript" src="../js/chart.js"></script> //引入Echart开发包
</head>
<body>
<div id="main" style="height: 400px;width: 400px"> //这个div用来放图表 </div>
</body>
</html>
c、JavaScript绘制图表
echart.js
$(function(){
//配置Echart路径
require.config({
paths: {
echarts:'../js/dist'
}
});
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom（即html页面中的div），初始化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);
}
);
})
d、效果图
