echarts饼图环心显示文字，自适应

最新推荐文章于 2024-06-01 10:47:21 发布

xiaodanda

最新推荐文章于 2024-06-01 10:47:21 发布

阅读量1.4k

点赞数

原文链接：https://blog.csdn.net/BDawn/article/details/123841786?spm=1001.2014.3001.5502

版权

环心文字显示

   let option = {
            color: ['#12ADFF', '#0ba984', '#ff6363', '#FFFC40 '],
            title: {
                show: true,
                text: '总数',
                subtext: 94,
                left:"47%",
                top:"45%",
                textAlign: 'center',
                textStyle: {
                    fontSize: '14',
                    color: 'white',
                },
                subtextStyle: {
                    fontSize: '20',
                    fontWeight: 'bold',
                    color: 'white',
                },
            },                    
        }

鼠标悬浮到其中一个区域

 // 鼠标悬浮
        analysisEchart.setOption(option)
        analysisEchart.on('mouseover', (params) => {
            option.title.show = false
            analysisEchart.setOption(option);
        });
        analysisEchart.on('mouseout', () => {
            option.title.show = true
            analysisEchart.setOption(option);
        });

自适应