后台数据结合百度echarts生成各类图表

1.首先要引入百度echarts.js文件。在下面地址可以下载到需要的JS文件。
http://echarts.baidu.com/download.html
下面方法中的data数据都是后台组装的字符串。data的具体格式参考百度echarts的事例中的数据格式

2.柱状图
function makeChart () {
var main = document.getElementById('main');
var div = document.createElement('div');
var width = document.body.clientWidth;
div.style.cssText ='height:400px;';
main.appendChild(div);
return echarts.init(div);
}
//加载图形
function makeShadow(data1,data2,data3) {
var chart = makeChart();
chart.setOption({
title: {
subtext: '(单位:万元)',
left: 'center'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
left: 'left'
},
legend: {
data:['合同总金额','认领总金额']
},
grid: {
left: '1%',
right: '1%',
bottom: '4%',
containLabel: true
},
xAxis : [
{
type : 'category',
data :data3,
axisLabel: {
interval:0,//横轴信息全部显示
rotate:0,//60度角倾斜显示
formatter:function(val){
return val.split("").join("\n"); //横轴信息文字竖直显示
}
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'合同总金额',
type:'bar',
data:data1
},
{
name:'认领总金额',
type:'bar',
stack: '广告',
data:data2
}

]
});
}



3.地图
function makeChart () {
var main = document.getElementById('main');
var div = document.createElement('div');
var width = document.body.clientWidth;
div.style.cssText = width + 'px; height:700px';
main.appendChild(div);
return echarts.init(main);
}
//加载图形
function makeMap(data) {
var tempdata=data.split("-");
data1=tempdata[0];
data2=eval(tempdata[1]);
var datas=tempdata[0].split(";");
var deps=data2.toString().split(",");
var chart = makeChart();
var option=({
title: {
text: '全国销量分布图',
subtext: '(单位:万元)',
left: 'center'
},
tooltip: {
trigger: 'item',

//自定义鼠标移动到地图某个位置后显示的数据和数据格式
formatter: function(params) {
var res = params.name+'<br/>';

var myseries =option.series;
var count=0;
for (var i = 0; i < myseries.length; i++) {

res+= myseries[i].name;
var data=myseries[i];
if(myseries[i].data.length <= 0){
res+=':0</br>';
}else{
var result=true;

for(var j=0;j<myseries[i].data.length;j++){

if(myseries[i].data[j].name==params.name){

res+=':'+myseries[i].data[j].value+'</br>';
count+=myseries[i].data[j].value;
result=false;
}
}
if(result){
res+=":0</br>";
}
}
}
if(count==0){
res+="总金额:"+count;
}else{
res+="总金额:"+count.toFixed(4);
}
return res;

}
},
legend: {
orient: 'vertical',
left: 'left',
data:data2
},
visualMap: {
min: 0,
max: 2000,
left: 'left',
top: 'auto',
text: ['高','低'], // 文本，默认为数值文本
calculable: true
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series:function(){
var serie=[];
for( var i=0;i <deps.length;i++){
var item={
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
name:deps[i],
data:eval(datas[i])
}
serie.push(item);
};
return serie;
}()
});
chart.setOption(option);
}



4.饼图
function makeChart () {
var main = document.getElementById('main');
var div = document.createElement('div');
var width = document.body.clientWidth*0.8;
div.style.cssText = width + 'px; height:400px;margin-left:50px;';
//main.removeChild(div);
main.appendChild(div);
return echarts.init(div);
}
//加载图形
function makePie(data1,data2) {
var chart = makeChart();
chart.setOption({
legend: {
orient: 'vertical',
left: 'left',
data:data2
},
tooltip: {
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [{
name: 'pie',
type: 'pie',
selectedMode: 'single',
hoverAnimation: false,
selectedOffset: 30,
clockwise: true,
data:data1
}]
});
}



5.折线图
function makeChart () {
var main = document.getElementById('main');
var div = document.createElement('div');
var width = document.body.clientWidth*0.8;
div.style.cssText = width + 'px; height:400px;margin-left:50px;';
//main.removeChild(div);
main.appendChild(div);
return echarts.init(div);
}
//加载图形
function makeLine(data1,data2,data3) {
var chart = makeChart();
chart.setOption({
title: {
text: '用户注册趋势'
},
tooltip : {
trigger: 'axis',
formatter:function(params){ //数据单位格式化

if($("#format").val()==1){
if(parseInt(params[0].name)==0){
var relVal =params[0].name; //x轴名称

}else{
var temp=parseInt(params[0].name)-1;
var relVal =temp+":00-"+temp+":59"; //x轴名称

}
}else{
var relVal=params[0].name;
}
for (var i = 0, l = params.length; i < l; i++) {

relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value;

}

return relVal;

}
},
legend: {
data:data1
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : data2
}
],
yAxis : [
{
type : 'value'
}
],
series:data3
});
}



6.漏斗图
function makeChartForStep () {
var step = document.getElementById('step');
var div = document.createElement('div');
var width = document.body.clientWidth*0.8;
div.style.cssText = width + 'px; height:400px;margin-left:50px;';
step.appendChild(div);
return echarts.init(div);
}
//加载图形
function makeFunnel(type,data,text,subtext) {
if(type==1){
var chart = makeChartForPage();
}else{
var chart = makeChartForStep();
}
var option=({
title: {
text:text,
subtext:subtext
},
tooltip: {
trigger: 'item',
formatter: function(params) {
var data=option.series[0].data;
var index=0;
var res="";
for(var i=0;i<data.length;i++){
if(data[i].name==params.name){
index=i;
break;
}
}
if(index>0){
res+=params.name+'<br/>转化:'+(data[i].value/data[i-1].value*100).toFixed(2)+"%,";

res+=params.value+"人";
//alert((100-data[i].value/data[i-1].value*100).toFixed(2));
res+="</br>流失:"+((100-data[i].value/data[i-1].value*100).toFixed(2))+"%,"+(data[i-1].value-data[i].value)+"人";
}else{
res+=params.name+'<br/>转化:'+"100%,";

res+=params.value+"人";
res+="</br>流失:0.00%,0人";
}
return res;
}
},
calculable: true,
series: [
{
name:'漏斗图',
type:'funnel',
left: '10%',
top: 60,
bottom: 60,
width: '80%',
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
normal: {
show: true,
position: 'inside'
},
emphasis: {
textStyle: {
fontSize: 20
}
}
},
labelLine: {
normal: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
}
},
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1
}
},
data:data
}
]
});
chart.setOption(option);
}



7.横着柱状图
function makeChart () {
var main = document.getElementById('main');
var div = document.createElement('div');
var width = document.body.clientWidth*0.8;
div.style.cssText = width + 'px;min-height:600px';
//main.removeChild(div);
main.appendChild(div);
return echarts.init(div);
}
//加载图形
function makeCategory(data1,data2,data3) {
var chart = makeChart();
chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter:function(params) {
//debugger;
console.log(params[0].value);
if(data3>0 && params[0].value>0){
return params[0].name+"</br>"+params[0].value+'('+(params[0].value/data3*100).toFixed(2)+'%)';
}else{
return params[0].name+"</br>0(0.00%)";
}
}
},
grid: {
left: '1%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: data1
},
series: [{
name:'',
type: 'bar',
data: data2,
itemStyle:{

normal:{
label:{
show:true,
position:'right',
formatter: function(params) {
//console.log(data3);
if(data3>0 && params.value>0){
return params.value+'('+(params.value/data3*100).toFixed(2)+'%)';
}else{
return "0(0.00%)";
}
}
}
}
}
}]
});
}