正文

轻松掌握ECharts双饼图设置双标题技巧，让数据展示更清晰直观

/0 浏览量
1024

在数据可视化领域，ECharts是一个功能强大的JavaScript图表库，它能够帮助开发者轻松创建各种图表，包括饼图。饼图常用于展示各部分占整体的比例关系，而双饼图则可以在一张图表中同时展示两组数据，使得数据对比更加直观。本文将教你如何轻松掌握ECharts双饼图设置双标题的技巧，让数据展示更加清晰直观。

了解ECharts双饼图

在ECharts中，双饼图是由两个相互嵌套的饼图组成，通常用来比较两个不同维度的数据。外层饼图代表总量，内层饼图则代表各个部分的占比。通过双饼图，我们可以同时展示两组数据的对比情况。

设置双标题

为了使双饼图的数据展示更加清晰，我们可以为每个饼图设置一个标题。以下是如何设置双标题的步骤：

1. 初始化ECharts实例

首先，你需要引入ECharts库，并在HTML中创建一个容器用于渲染图表。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 双饼图设置双标题</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
    <!-- 创建图表容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script src="chart.js"></script>
</body>
</html>

2. 配置图表选项

接下来，我们需要在JavaScript中配置图表的选项。以下是设置双标题的示例代码：

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

var option = {
    title: {
        text: '双饼图示例',
        subtext: '数据来源：某公司财务部',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['部门A', '部门B']
    },
    series: [
        {
            name: '总量',
            type: 'pie',
            radius: ['40%', '55%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '部门A'},
                {value: 310, name: '部门B'}
            ]
        },
        {
            name: '部门A',
            type: 'pie',
            radius: ['60%', '75%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 234, name: '部门A'}
            ]
        },
        {
            name: '部门B',
            type: 'pie',
            radius: ['60%', '75%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 135, name: '部门B'}
            ]
        }
    ]
};

myChart.setOption(option);

3. 分析代码

  • title：设置图表的标题和副标题。
  • legend：设置图例，定义了图表中的系列名称。
  • series：定义了图表的系列，每个系列代表一个饼图。
    • 第一个系列是外层饼图，radius属性定义了饼图的半径。
    • 第二个和第三个系列是内层饼图，它们共享相同的radius属性，但分别设置了不同的数据。
  • data：定义了每个系列的内部数据。

通过以上步骤，你就可以轻松地设置ECharts双饼图的双标题，使数据展示更加清晰直观。在实际应用中，你可以根据自己的需求调整标题内容、样式等参数，以达到最佳的视觉效果。

-- 展开阅读全文 --