ajax 동적 할당 echarts 의 인 스 턴 스(떡 그림 과 기둥 그림)
6254 단어 ajax값 을 부여 하 다echarts떡 그림기둥 그림
1.떡 지도 할당 절차
(1)jsp 페이지
<!-- echarts js -->
<script src="js/echarts.js"></script>
<body>
<!-- ECharts （ ） DOM -->
<div id="first" style="width: 600px;height:400px;"></div>
[html] view plain copy
</body>
//
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(" ");
}
});
(4)디 스 플레이 스타일
2.기둥 형 그림 할당 절차
(1)jsp 페이지
<!-- echarts js -->
<script src="js/echarts.js"></script>
<body>
<!-- ECharts （ ） DOM -->
<div id="second" style="width: 600px;height:400px;"></div>
</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 아이콘 을 사용 해 보 세 요...
이상 의 ajax 동적 할당 echarts 의 인 스 턴 스(떡 그림 과 기둥 그림)는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 실 수 있 고 많은 응원 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
