ajax动态赋值echarts的实例(饼图和柱形图)

技术  /  管理员 发布于 7年前   337

本文以柱形图和饼形图ajax动态赋值为例

一、饼形图赋值步骤

（1）jsp页面

<!-- 引入echarts官方js --> <script src="https:/article/js/echarts.js"></script> <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 饼形图 --> <div id="first" style="width: 600px;height:400px;"></div> [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="https:/article/js/echarts.js"></script> <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 柱形图 --> <div id="second" style="width: 600px;height:400px;"></div> </body>

（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("查询失败");      }    });}

（3）后台代码部分根据自己需要就好。。。

（4）图片样式

可以去试试你的echarts图标了。。。

以上这篇ajax动态赋值echarts的实例(饼图和柱形图)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。


  • 上一条：
    Echarts教程之通过Ajax实现动态加载折线图的方法
    下一条：
    ajax实现select三级联动效果

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客