如何自定义echarts饼状图formatter函数

如何自定义echarts饼状图formatter函数

先看一下效果

假数据数据格式如下：（就是在series的data中设置data的datas属性）

去掉echarts饼状图的引导线(在series 中设置label属性)

series : [
                    {
                        type: 'pie',
                        radius : '80%',
                        center: ['60%', '50%'],
                        data:seriesData,
                        label: {
                            normal: {
                                position: 'inner',//隐藏引导线
                                show : false//隐藏标识文字
                            }
                        },
                        itemStyle: {
                            normal:{  
                                color: function (params){
                                    var colorList = [
                                        '#FF6565','#7B6CFF','#FF6CB8','#D56CFF','#6CD7FF','#FF6565','#7B6CFF','#FF6CB8','#D56CFF','#6CD7FF'
                                        ];
                                    return colorList[params.dataIndex];
                                },
                            },
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]

全部代码

<template>
	<div>
       <div id="sunEcharts" ref="sunEcharts" style="width:100%;height:255px;margin-top:20px;"></div>
    </div>
</template>
<script>
const elementResizeDetectorMaker = require("element-resize-detector"); //使图自适应
import echarts from 'echarts'
import {statisticsProject} from '@/api/apis/urgentRepair'
export default {
    data(){
        return {
            projectModel:{
                pageNum:1,
                pageSize:20,
                enterAreaId:'',
                faultTimeStart:'',
                faultTimeEnd:''
            }

        }
    },
    mounted(){
        // 饼状图数据
        this.getStatisticsProject()
        // 监听echartsBox变动，调整echarts大小,当侧边栏收缩时，加定时器可避免页面卡顿   
        var erd = elementResizeDetectorMaker();
        let that_ = this;
        erd.listenTo(document.getElementById("sunEcharts"), function (element) {
            that_.$nextTick(function () {
                setTimeout(()=>{
                    that_.echartsSize();
                },80)
             
            })
            
        })
    },
    methods:{
    	// 初始化图表大小
        echartsSize(){
             this.$echarts.init(this.$refs.sunEcharts,null, { renderer: 'svg' }).resize();
        },
        handleClick(tab, event) {
            // console.log(tab,'tab')
            if(tab.name=='first'){
                this.$nextTick(()=>{ //重构dom树
                //    this.sunEcharts()
                })
                
            }else if(tab.name=='second'){
                this.$nextTick(()=>{
                    // this.defaultEcharts()
                })
            }
        },
       
 		atisticsProject(){
            statisticsProject(this.projectModel).then(res=>{
                let {code,data}=res
                if(code==10000){
                    // console.log(res,'res')
                    // this.areaOptions=data.data
                    //循环
                    let datasLeft=[]
                    let seriesData=[]
                    for(let item of data.data){
                        let obj={}
                        for(let sonItem of data.data){
                            obj.name=item.projectName
                            obj.value=item.stopNo
                            let datas=[]
                            let childObj={}
                            let childboj2={}
                            for(let childItem of data.data){
                                childObj.stopNo=item.stopNo
                                childboj2.stopYes=item.stopYes
                            }
                            datas.push(childObj)
                            datas.push(childboj2)
                            obj.datas=datas
                        }
                        if(datasLeft.indexOf(item.projectName)==-1){
                            datasLeft.push(item.projectName)
                        }
                        if(seriesData.indexOf(obj.name)==-1){
                            seriesData.push(obj)
                        }
                        
                    }
                    this.sunEcharts(datasLeft,seriesData);
                }
            })
        },

        // 饼状图
        sunEcharts(datasLeft,seriesData){
            let myChart = echarts.init(document.getElementById('sunEcharts'));
            let resizeTimer = null;
            let option = {
                tooltip : {
                    trigger: 'item',
                    
                    formatter: function(data){
                        return ("名称 : "+data['name']
                        +"</br>修 : " + data['data'].datas[0].stopNo
                        +"</br>梯 : " + data['data'].datas[1].stopYes
                        )
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: datasLeft 
                },
                
                series : [
                    {
                        type: 'pie',
                        radius : '80%',
                        center: ['60%', '50%'],
                        data:seriesData,
                        label: {
                            normal: {
                                position: 'inner',//隐藏引导线
                                show : false//隐藏标识文字
                            }
                        },
                        itemStyle: {
                            normal:{  
                                color: function (params){
                                    var colorList = [
                                        '#FF6565','#7B6CFF','#FF6CB8','#D56CFF','#6CD7FF','#FF6565','#7B6CFF','#FF6CB8','#D56CFF','#6CD7FF'
                                        ];
                                    return colorList[params.dataIndex];
                                },
                            },
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener('resize', function () {
                if (resizeTimer) clearTimeout(resizeTimer);
                resizeTimer = setTimeout(function () {
                myChart.resize();
                }, 100)
            })

        },


}
</script>