이번에는 Ajax 동적 할당 데이터 그래프를 가져오겠습니다. Ajax 동적 할당 데이터 그래프의 주의사항은 무엇인가요?
이 글에서는 세로 막대형 차트와 원형 차트의 Ajax 동적 할당을 예로 들어 보겠습니다.
1. 원형 차트 할당 단계
(1)jsp 페이지
<!-- 引入echarts官方js --> <script></script> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM 饼形图 --> <p></p> [html] view plain copy
(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 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("查询失败"); } });</string>
(3) 배경 코드는 자신의 코드를 기반으로 할 수 있습니다
(4)디스플레이 스타일
2. 세로 막대형 차트 할당 단계
(1)jsp 페이지
<!-- 引入echarts官方js --> <script></script> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM 柱形图 --> <p></p>
(2) js 페이지
//柱形图模板 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("查询失败"); } }); }
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
Vue.js의 ul-li 태그로 select 태그를 모방하는 방법
element-ui에서 테이블 테이블을 스크롤하는 방법
위 내용은 Ajax 동적 할당 데이터 다이어그램의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!