下面小编就为大家分享一篇ajax动态赋值echarts的实例(饼图和柱形图),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

一、饼形图赋值步骤

(1)jsp页面

<!-- 引入echarts官方js --> 
<script src="js/echarts.js"></script> 
<body> 
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM 饼形图 --> 
<div id="first"></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="js/echarts.js"></script> 
<body> 
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM 柱形图 --> 
<div id="second"></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的实例(饼图和柱形图)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

    无相关信息
最新资讯
扎克伯格5小时听证鏖战:五大焦点,四处尴尬

扎克伯格5小时听证鏖

全场灯光仿佛都打在扎克伯格身上,他穿着正装,一遍又一遍
光线传媒一季度利润预增近10倍,新丽分手费成最大彩蛋

光线传媒一季度利润预

扣除新丽传媒股份出(bu)售(mai)资金的影响,光线传媒扣非后净利润
AI发来贺电,您的2333号奶牛已进入恋爱时节

AI发来贺电,您的2333号

不过,也有农场主吐槽说,给奶牛戴上传感器之后,每天收到的
“颅内高潮”不设限 语音直播命不久矣?

“颅内高潮”不设限

“性”似乎是一个永恒的博眼球的噱头,打着ASMR的旗号招
起底十月“难产”的腾讯智能音箱

起底十月“难产”的腾

腾讯智能音箱真机首次现身,BAT小米全面开战!
Switch上居然能玩“电爱”了,任天堂是怎么想的?

Switch上居然能玩“电

这款游戏此前因为尺度原因,多次被苹果拒绝。
最新文章
利用ajax提交form表单到数据库详解(无刷新)

利用ajax提交form表单

这篇文章主要给大家介绍了关于利用ajax提交form表单到
ajax动态赋值echarts的实例(饼图和柱形图)

ajax动态赋值echarts

下面小编就为大家分享一篇ajax动态赋值echarts的实例(
纯javascript的ajax实现php异步提交表单的简单实例

纯javascript的ajax实

下面小编就为大家带来一篇纯javascript的ajax实现php
深入浅析Jsonp解决ajax跨域问题

深入浅析Jsonp解决aja

这篇文章主要介绍了深入浅析Jsonp解决ajax跨域问题的
Ajax跨域问题的解决办法汇总(推荐)

Ajax跨域问题的解决办

本文给大家分享多种方法解决Ajax跨域问题,非常不错具有
完美解决ajax访问遇到Session失效的问题

完美解决ajax访问遇到

下面小编就为大家带来一篇完美解决ajax访问遇到Sessio