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

最新推荐文章于 2024-04-25 16:41:54 发布

xiaodanda

最新推荐文章于 2024-04-25 16:41:54 发布

阅读量1.6k

点赞数

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

版权

本文介绍了一种使用Echarts实现的环形文字图表，具有鼠标悬浮时标题隐藏与显示的交互功能，并强调了图表的自适应设计。通过`letoption`配置，可以控制标题样式和位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环心文字显示

   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);
        });

自适应