echarts学习
展示数据又一利器。现在先看看百度新开发的这货，发现展示的类型还很全。也可以满足需求，所以也学习。看看大家之间都有什么区别：
先看个教程：
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>