使用Echarts生成图表

Echarts首页：http://echarts.baidu.com/index.html

Echarts是一款非常好用的图表生成工具，这里以常用的饼图和柱状图为例讲一下Echarts的简单使用

以下是生成饼图的代码：

function aa(json){
var a = new Array();
var b = new Array();
$.each(json,function(i,n){
a[i] = n.name;
b[i] = {
value : n.power,
name : n.name
}
});

require.config({
paths : {
echarts : 'http://192.168.80.3:8080/PNSS/build/dist/'
}
});

// 使用
require([ 'echarts',
'echarts/chart/pie' // 使用饼图就加载pie模块，按需加载
],

function(echarts) {
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var myChart1 = echarts.init(document.getElementById('main1'));
var option = {
title : {
text : '各套餐销售比例',
x : 'center'
},
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
x : 'left',
data : a
},
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
}
}
},
calculable : true,
series : [ {
name : '销售量',
type : 'pie',
radius : '55%',
center : [ '50%', '60%' ],
data :b
} ]
};
// 为echarts对象加载数据
myChart.setOption(option);
//myChart1.setOption(option1);
});
}

在实际项目中我们需要的数据从后台数据库获取的
function aa(json) //json是从后台获取的json数据
然后定义两个数组来储存从json中解析的数据

var a = new Array();
var b = new Array();
$.each(json,function(i,n){
a[i] = n.name;
b[i] = {
value : n.power,
name : n.name
};
});接下来配置

require.config({
paths : {
echarts : 'http://192.168.80.3:8080/PNSS/build/dist/'  //这个是你服务器下echarts的路径，如果你写的是静态html文件，
//                那你可以使用'http://echarts.baidu.com/build/dist'官方的服务器路径
}
});

// 使用
require([ 'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
],

将a，b两个数组放到配置文件中
series : [ {
name : '销售量',
type : 'pie',
radius : '55%',
center : [ '50%', '60%' ],
data :b
} ]

legend : {
                    orient : 'vertical',
                    x : 'left',
                    data : a
                },


然后再定义一个id为‘main’的div
<div id="main" style="height:400px"></div>

引入echarts的js库
<script src="http://192.168.80.3:8080/PNSS/build/dist/echarts.js"></script>做完这些就可以生成饼图了。
下面贴上柱状图的代码，配置方法与上面一样

function bb(json1){
var a = new Array();
var b = new Array();
$.each(json1,function(i,n){
a[i] = n.name;
b[i] = n.power;
});

require.config({
paths : {
echarts : 'http://192.168.80.3:8080/PNSS/build/dist/'
}
});

// 使用
require([ 'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],

function(echarts) {
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main1'));
var option = {
title : {
text : '业务员营业额',
x : 'center'
},
tooltip: {
show: true
},
legend: {
data:['业务员营业额(元)'],
x:'left'
},
xAxis : [
{
type : 'category',
data : a
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"业务员营业额(元)",
"type":"bar",
"data":b
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
});
}