Echart饼图实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ldb987/article/details/84066473

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);

}

效果图