下面小编就为大家分享一篇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的实例(饼图和柱形图)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

    无相关信息
最新资讯
直击|盛大游戏CEO唐彦文:5G时代游戏行业将迎三巨变

直击|盛大游戏CEO唐彦

盛大游戏CEO唐彦文今日在2018年全球盛斗士大会上指出,5
优爱腾独播剧厮杀:爱奇艺弃播放量 腾讯改革会员体系

优爱腾独播剧厮杀:爱

影视行业电视收视率、网络平台播放量造假风波给行业带
奢侈手机品牌VERTU推新机:29800起,可远程删除数据

奢侈手机品牌VERTU推

国奢侈手机品牌VERTU发布全新ASTER P系列,该系列可远程
小牛上市,投资人还原创业故事,还评价了李一男

小牛上市,投资人还原创

明势资本是牛电科技天使轮领投方,在之后的每一轮都追加
分析师:苹果iPhone XR将成为最受欢迎的iPhone机型

分析师:苹果iPhone XR

Loup Ventures公司的分析师吉恩·明斯特(Gene Munster
法拉第未来:公司研发以及工厂的关键项目仍在推进中

法拉第未来:公司研发以

对于“FF91量产停顿”的传闻,法拉第未来回应e公司记者
最新文章
ajax动态查询数据库数据并显示在前台的方法

ajax动态查询数据库数

今天小编就为大家分享一篇ajax动态查询数据库数据并显
ajax获得json对象数组 循环输出数据的方法

ajax获得json对象数组

今天小编就为大家分享一篇ajax获得json对象数组 循环
ajax异步读取后台传递回的下拉选项的值方法

ajax异步读取后台传递

今天小编就为大家分享一篇ajax异步读取后台传递回的下
浅析IE浏览器关于ajax的缓存机制

浅析IE浏览器关于ajax

这篇文章主要介绍了IE浏览器关于ajax的缓存机制,文中
ajax上传多图到php服务器的方法

ajax上传多图到php服

这篇文章主要为大家详细介绍了ajax上传多图到php服务
ajax上传图片到PHP并压缩图片显示的方法

ajax上传图片到PHP并

这篇文章主要为大家详细介绍了ajax上传图片到PHP并压