本文以柱形圖和餅形圖ajax動(dòng)態(tài)賦值為例
一、餅形圖賦值步驟
（1）jsp頁面
!-- 引入echarts官方j(luò)s --> script src="js/echarts.js">/script> body> !-- 為 ECharts 準(zhǔn)備一個(gè)具備大?。▽捀撸┑?DOM 餅形圖 --> div id="first" style="width: 600px;height:400px;">/div> [html] view plain copy /body>
（2）js頁面
//餅圖模板
var dom = document.getElementById("first");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title : {
text: '用戶位置記錄',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} br/> : {c} (xck7kd8%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:[]
},
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:[]
}
]
};
;
if (option typeof option === "object") {
myChart.setOption(option, true);
}
//餅圖動(dòng)態(tài)賦值
var year = $("#year-search").val();
var mouth = $("#mouth-search").val();
$.ajax({
type: "get",
url: rootPath+"/wxbound/getPieDataByMouth.action",
data : {"year":year,"mouth":mouth},
cache : false, //禁用緩存
dataType: "json",
success: function(result) {
var names=[];//定義兩個(gè)數(shù)組
var nums=[];
$.each(result,function(key,values){ //此處我返回的是listString,mapString,String>>循環(huán)map
names.push(values.province_name);
var obj = new Object();
obj.name = values.province_name;
obj.value = values.count;
nums.push(obj);
});
myChart.setOption({ //加載數(shù)據(jù)圖表
legend: {
data: names
},
series: {
// 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列
name: ['數(shù)量'],
data: nums
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("查詢失敗");
}
});
（3）后臺(tái)代碼根據(jù)你自己的代碼就好
（4）顯示樣式
二、柱型圖賦值步驟
（1）jsp頁面
!-- 引入echarts官方j(luò)s --> script src="js/echarts.js">/script> body> !-- 為 ECharts 準(zhǔn)備一個(gè)具備大小（寬高）的 DOM 柱形圖 --> div id="second" style="width: 600px;height:400px;">/div> /body>
（2）js頁面
//柱形圖模板
var domLong = document.getElementById("second");
var myChartSecond = echarts.init(domLong);
var app = {};
option = null;
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type : 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : [],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接訪問',
type:'bar',
barWidth: '60%',
data:[]
}
]
};
if (option typeof option === "object") {
myChartSecond.setOption(option, true);
}
//給柱形圖賦值
var year = $("#year-search").val();
$.ajax({
type: "post",
url: rootPath+"/wxbound/getWxboundList.action",
data : {"year":year},
cache : false, //禁用緩存
dataType: "json",
success: function(result) {
console.log(result);
var linNames=[];
var linNums=[];
$.each(result.lin,function(key,values){
linNames.push(values.mouth);
linNums.push(values.count);
});
//柱形圖賦值
myChartSecond.setOption({ //加載數(shù)據(jù)圖表
xAxis: {
data: linNames
},
series: {
// 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列
name: ['數(shù)量'],
data: linNums
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("查詢失敗");
}
});
}
（3）后臺(tái)代碼部分根據(jù)自己需要就好。。。
（4）圖片樣式
可以去試試你的echarts圖標(biāo)了。。。
以上這篇ajax動(dòng)態(tài)賦值echarts的實(shí)例(餅圖和柱形圖)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
標(biāo)簽：婁底 邯鄲 衡陽 內(nèi)江 黔東 德陽 海南 樂山
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《ajax動(dòng)態(tài)賦值echarts的實(shí)例(餅圖和柱形圖)》，本文關(guān)鍵詞 ajax,動(dòng)態(tài),賦值,echarts,的,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
