当前位置：科技动态 > echarts ajax动态赋值示例（饼图和柱状图）

echarts ajax动态赋值示例（饼图和柱状图）

发布：2023-09-29 19:08

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

1。饼图分配步骤

(1) jsp 页面





 
[html] 查看纯文本

(2) js页面

//饼图模板
var dom = document.getElementById("第一个");
var myChart = echarts.init(dom);
var 应用程序 = {};
选项=空；
选项={
    标题 ： {
      text: '用户位置记录',
      潜台词：''，
      x:'中心'
    },
    工具提示：{
      触发器：'项目'，
      格式化程序：“{a} 
{b} : {c} ({d}%)”
    },
    传奇： {
      东方：'垂直'，
      x：'左'，
      数据：[]
    },
    工具箱： {
      显示：真实，
      特征 ： {
        标记：{显示：true}，
        dataView: {显示: true, 只读: false},
        魔法类型：{
          显示：真实，
          类型：['饼'，'漏斗']，
          选项： {
            漏斗：{
              x: '25%',
              宽度：'50%'，
              漏斗对齐：'左'，
              最大：1548
            }
          }
        },恢复：{显示：true}，
        saveAsImage: {显示: true}
      }
    },
    可计算：真实，
    系列 ： [
      {
        姓名：''，
        类型：'馅饼'，
        半径：'55%'，
        中心：['50%','60%'],
        数据：[]
      }
    ]
  };
;
if (option && typeof option === "object") {
  myChart.setOption(选项, true);
}
//饼图动态赋值
var 年 = $("#year-search").val();
  var 嘴巴 = $("#mouth-search").val();
  $.ajax({
      类型：“获取”，
      url: rootPath+"/wxbound/getPieDataByMouth.action",
      数据：{“年”：年，“口”：口}，
      cache: false, //禁用缓存
      数据类型：“json”，
      成功：函数（结果）{
        变量名称=[]； //定义两个数组
         var nums=[];
         $.each(result,function(key,values){ //我这里返回的是list>循环map
           名称.push(values.province_name);
           var obj = new Object();
           www.sychzs.cn = value.province_name;
           obj.value = 值.count;
           nums.push(obj);});
        myChart.setOption({ //加载数据图表
             传奇： {
                数据：姓名
                },
            系列： {
                // 根据名称对应对应的系列
                名称：['数量'],
                数据：数字
                }
      });
      },
      错误：函数（XMLHttpRequest，textStatus，errorThrown）{
        alert("查询失败");
      }
    });

(3)后台代码可以根据自己的代码

(4)显示方式

2。柱形图赋值步骤

(1) jsp 页面

(2) js页面

//条形图模板
var domLong = document.getElementById("第二个");
var myChartSecond = echarts.init(domLong);
var 应用程序 = {};
选项=空；
选项={
   颜色：['#3398DB']，
   工具提示：{
     触发器：'轴'，
     axisPointer: { // 轴指示器，轴触发有效
       type: 'shadow' // 默认为直线，可选： 'line' | '阴影'
     }
   },
   网格： {左：“3%”，
     右：“4%”，
     底部：“3%”，
     包含标签：true
   },
   x轴：[
     {
       类型：'类别'，
       数据： []，
       轴刻度：{
         与标签对齐：true
       }
     }
   ],
   y 轴：[
     {
       类型：'值'
     }
   ],
   系列 ： [
     {
       name: '直接访问',
       类型：'酒吧'，
       条形宽度: '60%',
       数据：[]
     }
   ]
 };
if (option && typeof option === "object") {
 myChartSecond.setOption(选项, true);
}
//给柱形图赋值
 var 年 = $("#year-search").val();
 $.ajax({
      类型：“帖子”，
      url: rootPath+"/wxbound/getWxboundList.action",
      数据：{“年”：年}，
      cache: false, //禁用缓存
      数据类型：“json”，
      成功：函数（结果）{
     控制台.log(结果);
     var linNames=[];
   var linNums=[];
     $.each(结果.lin,函数(键,值){

     linNames.push(values.mouth);
     linNums.push(values.count);
     
    });
   //条形图赋值myChartSecond.setOption({ //加载数据图表
    x轴：{
                数据：linNames
                },
            系列： {
             // 根据名称对应对应的系列
             名称：['数量'],
             数据：linNums
         }
    });
      },
      错误：函数（XMLHttpRequest，textStatus，errorThrown）{
        alert("查询失败");
      }
    });
}

(3) 后台代码部分可以根据自己的需要进行调整。。。

(4) 图片风格