echarts 饼图 引导线前的圆点怎么做的?

新手上路,请多包涵

图片描述

阅读 9.5k
1 个回答
新手上路,请多包涵

series里面写两次,两次的饼图数据一样,第一次的label是不带点的文字,第二次的label只有一个点,这样就可以单独移动点了,这边有我写的一个例子
const data = {

        dataSex: [ {
            value: '202',
        }],
        dataAge: [{
            name: '中风险',
            value: '272'
        }, {
            name: '高风险',
            value: '292'
        }, {
            name: '无风险',
            value: '120'
        }, {
            name: '低风险',
            value: '42'
        }]
    };
   option = {
        color: 'rgb(193,193,193)',
        series: [
            {
                color: ['rgb(255,99,39)', 'rgb(17,95,225)','rgb(2,144,255)','rgb(252,214,88)'],
                type: 'pie',
                radius: ['60', '90'],
                center: ['50%', '40%'],
                hoverAnimation: false, //鼠标移入变大
                labelLine: {
                    normal: {
                        length: 10,
                        length2: 80,
                        lineStyle: {
                            type: 'solid'
                        }
                    }

                },
                label: {
                    normal: {
                        formatter: (params)=>{
                            return '{b| '+params.name+'}  ' + '{c|'+params.percent.toFixed(0)+'%}'
                        },
                        borderWidth: 0,
                        borderRadius: 4,
                        padding: [0, -86],
                        height: 70,
                        fontSize: 13,
                        align: 'left',
                        color: '#3494BD',
                        rich: {
                            b: {
                                fontSize: 12,
                                lineHeight: 10,
                                padding: [0, 0, 30, 0]
                            },
                            c: {
                                fontSize: 12,
                                lineHeight:10,
                                padding: [0, 0, 30, 0]
                            }

                        }
                    }
                },
                data: data.dataAge,
            },
            {
                color: ['rgb(255,99,39)', 'rgb(17,95,225)','rgb(2,144,255)','rgb(252,214,88)'],
                type: 'pie',
                radius: ['60', '90'],
                center: ['50%', '40%'],
                hoverAnimation: false, //鼠标移入变大
                labelLine: {
                    normal: {
                        length: 10,
                        length2: 80,
                        lineStyle: {
                            type: 'solid'
                        }
                    }

                },
                label: {
                    normal: {
                        formatter: '{a|·}',
                        rich: {
                            a: {
                                height: 50,
                                fontSize: 60,
                                padding: [10,77,15,77]
                            }
                        },
                        borderWidth: 0,
                        borderRadius: 4,
                        padding: [0, -86],
                        height: 70,
                        fontSize: 13,
                        align: 'left',
                        color: '#3494BD'
                    }
                },
                data: data.dataAge,
            },
            {
                type: 'pie',
                radius: ['95', '96'],
                center: ['50%', '40%'],
                hoverAnimation: false, //鼠标移入变大
                data: [100],
                label: {
                    show: false
                }
            },
            {
                type: 'pie',
                radius: ['55', '56'],
                hoverAnimation: false, //鼠标移入变大
                center: ['50%', '40%'],
                data: [100],
                label: {
                    show: false
                }
            }
        ]
    };
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题