展示数据又一利器。现在先看看百度新开发的这货,发现展示的类型还很全。也可以满足需求,所以也学习。看看大家之间都有什么区别:

先看个教程:

http://genuinecx.blog.51cto.com/2890523/1294417

官网介绍:

http://ecomfe.github.io/echarts/index.html


不管如何引入ECharts,你都需要如下4步:

引入一个模块加载器,如esl.js或者require.js

为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的)

为模块加载器配置echarts的路径,从当前页面链接到echarts.js,见上述说明

动态加载echarts然后在回调函数中开始使用(容我罗嗦一句,当你确保同一页面已经加载过echarts,再使用时直接require('echarts').init(dom)就行)

下面开始小试牛刀:

做一个评估白滚滚羽毛球能力的radar图哦,源码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>白滚滚的羽毛球技能评估</title>
<script src="js/esl.js"></script>
<script type="text/javascript">
require.config({
packages:[
{
name:'echarts',
location:'../echarts-master/src',
main:'echarts'
},
{
name:'zrender',
location:'../zrender-master/src',
main:'zrender'
}
]
});

var option={
title:{
text:'羽毛球的技能评估雷达图',
subtext:'白滚滚的羽毛球技能'
},
tooltip:{
trigger:'axis'
},
legend:{
x:'center',
data:['白滚滚','小伙伴']
},
toolbox:{
show:true,
feature:{
mark:true,
dataView:{readOnly:false},
restore:true,
saveAsImage:true
}
},
calculable:true,
polar:[
{
indicator:[
{text:'进攻',max:100},
{text:'防守',max:100},
{text:'体能',max:100},
{text:'速度',max:100},
{text:'力量',max:100},
{text:'技巧',max:100}
],
radius:130

}
],
series:[
{
name:'完全实况球员数据',
type:'radar',
itemStyle:{
normal:{
areaStyle:{
type:'default'
}
}
},
data:[
{
value:[97,42,88,94,90,86],
name:'白滚滚'

},
{
value:[97,32,74,95,88,92],
name:'小伙伴'

}
]

}
]
};

require(
[
'echarts',
'echarts/chart/radar'
],
function(ec){
var myChart=ec.init(document.getElementById('main'));
myChart.setOption(option);
}
)
</script>
</head>

<body>
<div id="main" style="height:500px; border:1px solid #ccc; padding:10px;"></div>

</body>
</html>