当前位置:   article > 正文

Echart饼图实现_echarts怎么展现工作经验和学历对应的岗位数量的两个饼图(两个饼图均按照顺时针方

echarts怎么展现工作经验和学历对应的岗位数量的两个饼图(两个饼图均按照顺时针方

Echarts官网:Echarts官网

引入Echarts
引入Echarts文件和工具类

   <script src="${ctx}/js/commons/chartUtils.js"></script>
   <script src="${ctx}/js/lib/echarts.min.js"></script>
  • 1
  • 2

为Echarts饼图准备足够空间

<div class="eCharts_03 fl clearfix percent57" id="consumepie"></div>
  • 1

初始化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;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

基于准备好的dom,初始化echarts实例并调用饼图饼图实现方法

var consumepie = echarts.init(document.getElementById('consumepie'));
initPie(consumepie,data);
  • 1
  • 2

饼图实现方法,指定饼图的配置项和数据

/**
 * 饼图的公用方法
 * @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);

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54

效果图
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/769591
推荐阅读
相关标签
  

闽ICP备14008679号