echarts 饼状图页面处理 Ajax 异步请求的查询数据

饼状图的series： data是以下的形式

{value:335, name:'直接访问'},

{value:310, name:'邮件营销'},

{value:234, name:'联盟广告'},

{value:135, name:'视频广告'},

{value:1548, name:'搜索引擎'}

========================================================

<!--HTML代码片段-->

<!--前端页面使用的layui框架，这里已去除layui引用的样式-->
<div>

  <div>

    <div>

      <div>

        <label>年份</label>

      <div>

<input name="yearDate" id="yearDate" value="${(page.param.yearDate)!}" placeholder="请输入创建时间" class="layui-input" type="text" readonly maxlength="20">

      </div>

     </div>

     <div class="layui-inline">

        <a href="javascript:void(0);" class="layui-btn" onclick="cx()"><i class="layui-icon"></i>查询</a>

     </div>

    </div>

  </div>

  <div id="main" style="height: 400px;"></div>

</div>

=======================================================

<!--js代码 初始加载统计图-->

//可参考官网，创建图例
<script type="text/javascript">

  var dom = document.getElementById("main");
  //基于准备好的dom，初始化echarts实例,macarons为设置的主题参数，是引入的*.js的名字 
  var myChart = echarts.init(dom,"macarons");

  var app = {};

  option = {

    title : {

    text: '项目分类',

    x:'center'

},

  tooltip : {

    trigger: 'item',

    formatter: "{a} <br/>{b} : {c} ({d}%)"

},

  legend: {

  orient: 'vertical',

  left: 'left',

data: [<#if resultList??> <#list resultList as data>'${data.name}',</#list></#if>]

},

series : [

  {

    name: '访问来源',

    type: 'pie',

    radius : '55%',

    center: ['50%', '60%'],

data:[<#if resultList??><#list resultList as data>{ value:${data.value},name:'${data.name}'},</#list></#if>],

itemStyle: {

  emphasis: {

  shadowBlur: 10,

  shadowOffsetX: 0,

  shadowColor: 'rgba(0, 0, 0, 0.5)'

      }

    }

    }

  ]

};

if (option && typeof option === "object") {

var startTime = +new Date();

myChart.setOption(option, true);

var endTime = +new Date();

var updateTime = endTime - startTime;

console.log("Time used:", updateTime);

}

</script>

===========================================================

<!--Ajax查询，加载统计图-->

<script type="text/javascript">

function cx(){

//获取条件：根据时间异步查询

var yearDate = $('#yearDate').val();

//Ajax查询

$.ajax({

url:"/${rootPath}/bus/tjfx/ajax_date?yearDate="+ yearDate,

type:'post',

dataType:'json',

success:function(data){

//返回结果为List<map>形式,处理查询结果

if(data!=null){

var seriesData=[];

var legendData=[];
//定义一个object引用类型对象，例：var person={firstname:"Bill", lastname:"Gates", id:5566};
var map = {};
//循环向数组中放入值
for (var i = 0; i < data.length; i++) {

map = {};

map.name = data[i].name;

map.value = data[i].value;

seriesData[i] = map;

legendData[i] = map.name;

}

}
//获取之前js中创建的myChart的option
var option = myChart.getOption();
//分别向series legend中的data赋值
option.series[0].data = seriesData;
option.legend[0].data = legendData;
//创建饼状图
myChart.setOption(option,true);

}

});

}

</script>