How to use donut charts to display data proportions in ECharts-JS Tutorial-php.cn

How to use donut charts to display data proportions in ECharts

PHPz

Release： 2023-12-17 12:47:50

Original

1350 people have browsed it

How to use donut charts to display data proportions in ECharts

How to use donut charts to display data proportions in ECharts，需要具体代码示例

ECharts是一款基于JavaScript的可视化图表库，可以方便地展示数据和分析趋势。其中，环形图是一种常见的图表类型，常用于展示数据占比关系。本文将介绍如何使用ECharts中的环形图来展示数据占比，并提供具体的代码示例。

首先，我们需要准备好ECharts的环境。可以通过CDN（内容分发网络）引入ECharts的JavaScript代码，也可以下载ECharts的源代码，引入至项目中。为了方便起见，我们可以通过CDN引入ECharts，具体代码如下：

<script src="https://cdn.jsdelivr.net/npm/echarts@4.10.0/dist/echarts.min.js"></script>

Copy after login

接下来，我们需要创建一个容器来放置环形图。可以通过HTML的<div>标签来创建一个容器，并设置一个唯一的ID，作为容器的标识。代码示例如下：

<div id="chart-container" style="width: 600px; height: 400px;"></div>

Copy after login

然后，我们可以使用JavaScript来动态生成环形图。首先，创建一个Echarts实例，并指定容器的ID作为参数。代码示例如下：

var myChart = echarts.init(document.getElementById('chart-container'));

Copy after login

接着，我们需要定义环形图的数据，以及图表的配置项。具体代码如下：

// 定义数据
var data = [
    { value: 335, name: '数据1' },
    { value: 310, name: '数据2' },
    { value: 234, name: '数据3' },
    { value: 135, name: '数据4' },
    { value: 1548, name: '数据5' }
];

// 定义配置项
var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['数据1', '数据2', '数据3', '数据4', '数据5']
    },
    series: [
        {
            name: '数据占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: data
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

Copy after login

以上代码中，我们首先定义了需要展示的数据，每个数据对象包括value和name两个属性，value代表数据的数值，name代表数据的名称。

然后，我们定义了图表的配置项。其中，tooltip用于设置提示框的样式和内容，legend用于设置图例的样式和位置。最后，我们使用series来定义系列，即图表的数据以及展示方式。此处使用的是pie类型的系列，代表环形图，通过radius设置内外半径的大小，label和labelLine用于设置文本标签和连接线的样式。

最后一行代码使用setOption方法将配置项和数据应用到图表中，图表将会自动更新并显示在容器中。

通过以上步骤，我们可以成功地在ECharts中使用环形图展示数据占比。在实际应用中，可以根据具体需求对代码进行修改和扩展，以满足更多的展示需求。

总结起来，使用ECharts中的环形图展示数据占比，需要准备好ECharts环境，在HTML中创建一个容器，使用JavaScript代码动态生成环形图。定义好数据和配置项，并通过setOption方法将其应用到图表中。以上就是在ECharts中使用环形图展示数据占比的具体步骤和代码示例。

The above is the detailed content of How to use donut charts to display data proportions in ECharts. For more information, please follow other related articles on the PHP Chinese website!