Maison > Article > interface Web > Comment charger dynamiquement des graphiques linéaires via Ajax (tutoriel graphique)
Cet article présente principalement la méthode de chargement dynamique de graphiques linéaires via Ajax dans le didacticiel Echarts. Les amis dans le besoin peuvent s'y référer
Graphique GIF.
2. Code de la réception
// 调用方法 hotlineLine(); // 定时刷新 setInterval(function () { hotlineLine(); },5000); function hotlineLine(){ // 初始化图表元素 var hotlineLine = echarts.init(document.getElementById('hotlineLine_id')); $.get('${pageContext.request.getContextPath()}/m/hotline.do', function (res) { var option = { // 提示框组件,鼠标经过饼图时会出现提示框 tooltip: { // 触发类型 // 坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。 trigger: 'axis' }, // 每条折线的颜色 color: ['#87CEFA', '#9AFF9A', '#C0FF3E','#DB7093'], // 图例组件 legend: { // 内容 data:['呼入', '呼出', '应答', '用户放弃'], // 样式 textStyle:{ fontSize:10, color:'#66ffff' }, // 上距离,类似css中的margin top:'5%' }, // 网格 grid: { // 左距离 left: '7%', right: '5%', bottom: '10%', top:'20%' }, // 横坐标 xAxis: { // 类型 type: 'category', // 刻度 data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'], // 样式 axisLine:{ // 横坐标线的颜色 lineStyle:{ color:'#66ffff' } } }, yAxis: { type: 'value', name: '次数', axisLabel: { formatter: '{value}' }, axisLine:{ lineStyle:{ color:'#66ffff' } }, splitLine:{ show: true, lineStyle:{ color:'#66ffff' } } }, series: [ { name:'呼入', type:'line', data:res[3] }, { name:'呼出', type:'line', data:res[2] }, { name:'应答', type:'line', data:res[1] }, { name:'用户放弃', type:'line', data:res[0] } ], // 文本标签 label: { //是否展示 show: true, position: 'top', textStyle: { fontWeight:'bolder', fontSize : '12', fontFamily : '微软雅黑', color:defaultColor } } }; hotlineLine.setOption(option); }); } <p class="rightMain01-sub03 box-border"> <p class="box-title">话务指标趋势图</p> <p class="rightMain01-sub03-data"> <p id="hotlineLine_id" style="height:340px;"></p> </p> </p>
3. Code backend
List<List<Integer>> hotlineList = new ArrayList<List<Integer>>(); @RequestMapping("/m/hotline.do") @ResponseBody public JSONArray hotline() { List<List<Integer>> returnList = new ArrayList<List<Integer>>(); if (hotlineList.size() == 0 || hotlineList.get(0).size() >= 9) { hotlineList.clear(); for (int i = 0; i < 4; i++) { List<Integer> l = new ArrayList<Integer>(); l.add(i * 5 + AlexUtils.getRandomInteger(0, 5)); hotlineList.add(l); } } for (int i = 0; i < hotlineList.size(); i++) { List<Integer> list = hotlineList.get(i); int thisSize = list.size(); if (thisSize < 5) { list.add(list.get(thisSize - 1) + AlexUtils.getRandomInteger(1, 5)); } else { list.add(list.get(thisSize - 1) - AlexUtils.getRandomInteger(1, 5)); } returnList.add(list); } hotlineList = returnList; return JSONArray.fromObject(returnList); } public static int getRandomInteger(int min, int max) { int diff = max - min; return min + new Random().nextInt(diff); }
Format des données :
1.[[1,3,4,5,7],[ 6 ,9,11,12,13],[10,11,12,13,16],[16,19,21,22,24]]
Ce qui précède est ce que j'ai compilé pour vous, j'espère que cela sera utile à tout le monde à l'avenir.
Articles connexes :
Trois façons d'implémenter ajax
Connaissances connexes sur les exemples de requêtes AJAX ASP/PHP
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!