ThinkAdmin中使用echarts的饼状图 并把百分比显示在圆环上

1. 页面

<div class="layui-col-xs12 layui-col-md3">
     <div class="think-box-shadow">
         <div id="main2" style="width:100%;height:350px"></div>
     </div>
 </div>
<!--
循环 可忽略不计
{foreach $levels as $set=>$value}
      {foreach $value as $key=>$vo}
      <div class="layui-col-xs12 layui-col-md3">
          <div class="think-box-shadow">
              <div id="{$key}" style="width:100%;height:350px"></div>
          </div>
      </div>
      {/foreach}
  {/foreach}
-->

2. 页面接收并处理数组

 <label class="layui-hide">
     <textarea id="jsondata2">{$days|json_encode}</textarea>
     <textarea id="jsondata4">{$daysmoy|json_encode}</textarea>
     <textarea id="jsondata3">{$levels|json_encode}</textarea>
 </label>

3. 页面在script中处理并设置号

<script>
    require(['echarts'], function (echarts) {  
        var data2 = JSON.parse($('#jsondata2').html());
        var data4 = JSON.parse($('#jsondata4').html());
        var data3 = JSON.parse($('#jsondata3').html());
        // 总共呢个
        var chart2 = echarts.init(document.getElementById('main2'));
        var chart3 = echarts.init(document.getElementById('main3'));
        window.addEventListener("resize", function () {
            chart2.resize()
            chart3.resize()
        });
        chart3.setOption({
            title: {text: '物业金额总数据', left: 'right'},
            tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} 元 ( {d}% )'},
            legend: {orient: 'vertical', left: 'left'},
            series: [
                {
                    name: '物业金额总数据',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        // show: false,
                        // position: 'center'  
                        normal: {
                            show:true,
                            position:'inner',
                            textStyle: {
                                fontWeight: 200,
                                fontSize: 15 ,  //文字的字体大小
                                color:'#fff'
                            },
                            formatter: '{d}%',/*饼状图内显示百分比*/
                        },
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '17',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data:data4.map(function (item) {
                        return {name: item.name, value: item.value,itemStyle: { normal:{color: item.color_com} } }
                    }),
                }
            ]
        });
        chart2.setOption({
            title: {text: '物业数量总数据', left: 'right'},
            tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} 个 ( {d}% )'},
            legend: {orient: 'vertical', left: 'left'},
            series: [
                {
                    name: '物业数量总数据',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        // show: false,
                        // position: 'center'  
                        normal: {
                            show:true,
                            position:'inner',
                            textStyle: {
                                fontWeight: 200,
                                fontSize: 15 ,  //文字的字体大小
                                color:'#fff'
                            },
                            formatter: '{d}%',/*饼状图内显示百分比*/
                        },
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '17',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data:data2.map(function (item) {
                        return {name: item.name, value: item.value,itemStyle: { normal:{color: item.color_com} } }
                    }),
                }
            ]
        });
        // 单个
        data3.forEach(element => {
        for(let key in element){
            (function (charts) {
                window.addEventListener("resize", function () {
                    charts.resize()
                });           
                charts.setOption({
                    title: {text: element[key][0], left: 'right'},
                    legend: {orient: 'vertical', left: 'left'},
                    tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c}  ( {d}% )'},
                    series: [
                    {
                        name: element[key][0],
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            // show: false,
                            // position: 'center'  
                            normal: {
                                show:true,
                                position:'inner',
                                textStyle: {
                                    fontWeight: 200,
                                    fontSize: 15  ,  //文字的字体大小
                                    color:'#fff'
                                },
                                formatter: '{d}%',/*饼状图内显示百分比*/
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '17',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: element[key].map(function (item) {
                            return {name: item.name, value: item.value,itemStyle: { normal:{color: item.color_com} }}
                        }),
                    }
                    ]
                });
            })(echarts.init(document.getElementById(key)));
        };
    });
    });
</script>

效果图