• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    ajax动态赋值echarts的实例(饼图和柱形图)

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

    一、饼形图赋值步骤

    (1)jsp页面

    !-- 引入echarts官方js --> 
    script src="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){ //此处我返回的是listString,mapString,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" 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动态加载多条折线图的实现代码
    • echarts多条折线图动态分层的实现方法
    • echarts实现折线图的拖拽效果
    • vue+echarts实现动态折线图的方法与注意
    • vue使用echarts实现水平柱形图实例
    • Echarts基本入门之柱状图、折线图通用配置
    上一篇:ajax 实现微信网页授权登录的方法
    下一篇:Ajax的原生实现关于MIME类型的使用方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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