echart饼状图设置legend属性隐藏标题

最新推荐文章于 2024-06-03 13:48:08 发布

原创最新推荐文章于 2024-06-03 13:48:08 发布 · 5.4k 阅读

4 ·

CC 4.0 BY-SA版权

Html 同时被 3 个专栏收录

262 篇文章

订阅专栏

Jquery

200 篇文章

订阅专栏

Echarts

45 篇文章

订阅专栏

本文介绍如何使用ECharts配置项来控制饼状图的标题显示位置及隐藏，包括标题的位置调整和隐藏设置，适用于左侧或右侧显示的需求。

echart饼状图隐藏标题的属性设置

- 左侧显示
- 隐藏标题

左侧显示

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        show:true,
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

在这里插入图片描述

右侧显示标题

legend: {
        orient: 'vertical',
        left: 'right',
        show:true,
    },

在这里插入图片描述

隐藏标题

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        show:false,
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};