饼状图的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>