赞
踩
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); }
效果图
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。