正文

教你轻松设置echarts饼图标题与图间距，让数据展示更美观直观

/0 浏览量
0821

在数据可视化领域，ECharts 是一款非常流行的 JavaScript 库，它可以帮助我们轻松创建各种图表，包括饼图。饼图是一种展示数据占比的图表，通过将数据分割成不同的扇形区域来直观地展示每个部分在整体中的比例。今天，我们就来聊聊如何设置 ECharts 饼图的标题与图间距，让数据展示更美观直观。

一、设置饼图标题

ECharts 饼图的标题可以通过 title 属性来设置。这个属性接受一个对象，其中可以包含标题的文本、样式等配置。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '饼图标题',
        subtext: '这里是副标题',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    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)'
                }
            }
        }
    ]
};

myChart.setOption(option);

在上面的代码中，我们设置了标题文本为 '饼图标题'，副标题为 '这里是副标题'，并且将标题放置在图表的中心位置。

二、设置饼图图间距

ECharts 饼图的图间距可以通过 series 属性中的 center 和 radius 属性来设置。

  • center：指定饼图的中心位置，它是一个包含两个元素的数组，分别代表横坐标和纵坐标。
  • radius：指定饼图的半径，它是一个数组，可以包含两个值，分别代表内半径和外半径。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '饼图标题',
        subtext: '这里是副标题',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            center: ['50%', '50%'], // 设置饼图中心位置
            radius: ['40%', '70%'], // 设置内半径和外半径
            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)'
                }
            }
        }
    ]
};

myChart.setOption(option);

在上面的代码中，我们将饼图的中心位置设置为 (50%, 50%)，内半径设置为 40%，外半径设置为 70%。

通过以上设置，我们可以轻松地调整 ECharts 饼图的标题和图间距，让数据展示更美观直观。希望这篇文章能帮助你更好地使用 ECharts 饼图。

-- 展开阅读全文 --