這次帶給大家ajax實現動態餅圖和長條圖的圖文詳解,ajax實現動態餅圖和長條圖的注意事項有哪些,下面就是實戰案例,一起來看一下。
本文以長條圖與圓餅圖ajax動態賦值為例
一、圓餅圖賦值步驟
(1)jsp頁面
<!-- 引入echarts官方js --> <script src="js/echarts.js"></script> <body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM 饼形图 --> <p id="first" style="width: 600px;height:400px;"></p> [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/>{b} : {c} ({d}%)" }, 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); } //饼图动态赋值 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=[];//定义两个数组 var nums=[]; $.each(result,function(key,values){ //此处我返回的是list<String,map<String,String>>循环map names.push(values.province_name); var obj = new Object(); obj.name = values.province_name; obj.value = values.count; nums.push(obj); }); myChart.setOption({ //加载数据图表 legend: { data: names }, series: { // 根据名字对应到相应的系列 name: ['数量'], data: nums } }); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("查询失败"); } });
#(3)後台程式碼會根據你自己的程式碼就好
(4)顯示樣式
##二、長條圖賦值步驟
(1)jsp頁面
<!-- 引入echarts官方js -->
<script src="js/echarts.js"></script>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM 柱形图 -->
<p id="second" style="width: 600px;height:400px;"></p>
</body>
//柱形图模板
var domLong = document.getElementById("second");
var myChartSecond = echarts.init(domLong);
var app = {};
option = null;
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'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({ //加载数据图表
xAxis: {
data: linNames
},
series: {
// 根据名字对应到相应的系列
name: ['数量'],
data: linNums
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("查询失败");
}
});
}
(4)圖片樣式
#可以去試試你的echarts圖示了。 。 。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
####以上是ajax實現動態圓餅圖與長條圖的圖文詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!