Echarts官网:Echarts官网
引入Echarts
引入Echarts文件和工具类
<script src="${ctx}/js/commons/chartUtils.js"></script>
<script src="${ctx}/js/lib/echarts.min.js"></script>
为Echarts饼图准备足够空间
<div class="eCharts_03 fl clearfix percent57" id="consumepie"></div>
初始化xAxis和yAxis中的data数据
var datamap=data.resultData.datamap;
var legends=["1次","2次","3次","3次以上"]
var series=[];
var onceMap={};
onceMap.name=legends[0];
onceMap.value=datamap["1次"].toFixed(0);
var twiceMap={};
twiceMap.name=legends[1];
twiceMap.value=datamap["2次"].toFixed(0);
var thriceMap={};
thriceMap.name=legends[2];
thriceMap.value=datamap["3次"].toFixed(0);
var overThreeMap={};
overThreeMap.name=legends[3];
overThreeMap.value=datamap["3次以上"].toFixed(0);
series.push(onceMap);
series.push(twiceMap);
series.push(thriceMap);
series.push(overThreeMap);
data.series=series;
data.legends=legends;
基于准备好的dom,初始化echarts实例并调用饼图饼图实现方法
var consumepie = echarts.init(document.getElementById('consumepie'));
initPie(consumepie,data);
饼图实现方法,指定饼图的配置项和数据
/**
* 饼图的公用方法
* @param chartObj
* @param data
*/
function initPie(chartObj,data){
option = {
//标题
title : {
text: '',
//subtext: '纯属虚构',
x:'left'
},
color: [
'#02b3c5','#f07476','#ffb04a','#f0e074','#5ab1ef',
'#5aefae','#6f7a85','#856f84','#b6a2de','#9c5f60'
],
//气泡提示框,常用于展现更详细的数据
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
//图例
legend: {
x : 'left',
y : 'bottom',
data:data.legends
},
calculable : true,
//驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据
series : [
{
labelLine:{
normal:{
length:5
}
},
name:data.name,
type:'pie',
//半径
radius : [30, 90],
//圆心坐标
center : ['40%', 100],
data:data.series
}
]
};
// 使用刚指定的配置项和数据显示图表
chartObj.setOption(option);
}
效果图