echarts动态数据 + 时间坐标轴与数据库绑定

[倾我一生来读]

最想做一个动态监测这些图，发现例子都是生成的随机数，如何才能与自己用ajax与自己后台格式化的json数据绑定，是加载的数据都是数据库中的数据。

[shoppo0505]

动态显示图表和静态相比，就是多写个进程，动态读取数据库数据，然后刷新图表，时间间隔自己定义就行了。

[xinbada1985]

// 大要案饼图 $.ajax({ url : "/menu-rest/serious-count-city", // 大要案饼图 type : "GET", // 传送请求数据 data : {}, datatype : 'JSON', beforeSend: function(xhr){ xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content")); $("#canvasDiv").addClass("loading-panel"); }, success : function(data) { // 饼图颜色 var colors = ['#a5c2d5','#cbab4f','#76a871', '#a56f8f','#c12c44','#9f7961', '#E7E9ED','#9966FF','#36A2EB', '#4BC0C0','#FFCD56']; // 后台数据 var data = [ {name : '石家庄市', value : data.city01, color:colors[0]}, {name : '唐山市', value : data.city02, color:colors[1]}, {name : '秦皇岛市', value : data.city03, color:colors[2]}, {name : '邯郸市', value : data.city04, color:colors[3]}, {name : '邢台市', value : data.city05, color:colors[4]}, {name : '保定市', value : data.city06, color:colors[5]}, {name : '张家口市', value : data.city07, color:colors[6]}, {name : '承德市', value : data.city08, color:colors[7]}, {name : '沧州市', value : data.city09, color:colors[8]}, {name : '廊坊市', value : data.city10, color:colors[9]}, {name : '衡水市', value : data.city11, color:colors[10]} ]; $("#canvasDiv").removeClass("loading-panel"); var chart = new iChart.Donut2D({ render : 'canvasDiv', data: data, title : { text : '大要案饼状图（近一年）', fontsize : 20, color : '#000' }, footnote : { textAlign:"left", height:20, text : '', color : '#486c8f', fontsize : 11 }, center : { text:'', color:'#3e576f', shadow:true, shadow_blur : 2, shadow_color : '#557797', shadow_offsetx : 0, shadow_offsety : 0, fontsize : 40 }, sub_option : { label : { background_color:null, sign:false,//设置禁用label的小图标 padding:'0 4', border:{ enable:false, color:'#666666' }, fontsize:11, fontweight:600, color : '#4572a7' }, border : { width : 2, color : '#ffffff' } }, shadow : true, shadow_blur : 6, shadow_color : '#aaaaaa', shadow_offsetx : 0, shadow_offsety : 0, background_color:'#fefefe', offset_angle:-120,//逆时针偏移120度 showpercent:true, decimalsnum:2, width : 800, height : 400, radius:120 }); chart.draw(); }, // 保存失败！ error : function(XMLHttpRequest, textStatus, errorThrown) { $("#canvasDiv").removeClass("loading-panel"); } }); 比如这样ajax的方法！其他图都是一样道理的e

[xinbada1985]

////载入基础案件的统计图表 function loadCloseCaseChart(closeCaseOrganizationNameArray,closeCaseOrganizationDataArray) { closeCaseChart.setOption({ title : { text: '【各部门已破案件数量】', x:'center', textStyle: { fontWeight: 'normal', //标题颜色 color: '#5cccd3' } }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c}" }, toolbox: { show : false, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, // legend: { // data : ['展现','点击','访问','咨询','订单'] // }, calculable : true, series : [ { name:'破案数量', type:'funnel', width: '60%', left: '10%', top: 60, //x2: 80, bottom: 5, itemStyle: { normal: { color: function(params) { // build a color map as your need. var colorList = [ '#bb3422','#1e6786','#a0dbcd','#e5e891','#159dbd' ]; return colorList[params.dataIndex] } } }, data:[ {value:closeCaseOrganizationDataArray[4], name:closeCaseOrganizationNameArray[4]}, {value:closeCaseOrganizationDataArray[3], name:closeCaseOrganizationNameArray[3]}, {value:closeCaseOrganizationDataArray[2], name:closeCaseOrganizationNameArray[2]}, {value:closeCaseOrganizationDataArray[1], name:closeCaseOrganizationNameArray[1]}, {value:closeCaseOrganizationDataArray[0], name:closeCaseOrganizationNameArray[0]} ] } ] }); } 刚才那个是ICHAR的图，这个是ECHAR的图，通过建一个function 把ajxa返回的josn传到function 里面就好了

[xinbada1985]

caseNumberChart = echarts.init(document.getElementById('div_CaseNumberChart'));