So verwenden Sie Donut-Diagramme, um Datenanteile in ECharts anzuzeigen-js-Tutorial-php.cn

So verwenden Sie Donut-Diagramme, um Datenanteile in ECharts anzuzeigen

PHPz

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

Original

1350 Leute haben es durchsucht

So verwenden Sie Donut-Diagramme, um Datenanteile in ECharts anzuzeigen

Für die Verwendung von Donut-Diagrammen zum Anzeigen von Datenanteilen in ECharts sind bestimmte Codebeispiele erforderlich.

ECharts ist eine JavaScript-basierte visuelle Diagrammbibliothek, mit der Daten einfach angezeigt und Trends analysiert werden können. Unter diesen ist das Donut-Diagramm ein gängiger Diagrammtyp, der häufig zur Darstellung von Datenanteilsbeziehungen verwendet wird. In diesem Artikel wird erläutert, wie Sie das Donut-Diagramm in ECharts verwenden, um Datenproportionen anzuzeigen, und es werden spezifische Codebeispiele bereitgestellt.

Zuerst müssen wir die ECharts-Umgebung vorbereiten. ECharts-JavaScript-Code kann über CDN (Content Distribution Network) eingeführt werden, oder ECharts-Quellcode kann heruntergeladen und in das Projekt eingefügt werden. Der Einfachheit halber können wir ECharts über CDN einführen. Der spezifische Code lautet wie folgt:

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

Nach dem Login kopieren

Als nächstes müssen wir einen Container erstellen, um das Donut-Diagramm zu platzieren. Sie können einen Container über das HTML-Tag <div> erstellen und eine eindeutige ID als Kennung des Containers festlegen. Das Codebeispiel lautet wie folgt: <div>标签来创建一个容器，并设置一个唯一的ID，作为容器的标识。代码示例如下：

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

// 定义数据
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);

Nach dem Login kopieren

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

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

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

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

总结起来，使用ECharts中的环形图展示数据占比，需要准备好ECharts环境，在HTML中创建一个容器，使用JavaScript代码动态生成环形图。定义好数据和配置项，并通过setOptionrrreee

Dann können wir JavaScript verwenden, um das Donut-Diagramm dynamisch zu generieren. Erstellen Sie zunächst eine Echarts-Instanz und geben Sie die ID des Containers als Parameter an. Das Codebeispiel lautet wie folgt: 🎜rrreee🎜Als nächstes müssen wir die Daten des Donut-Diagramms und die Konfigurationselemente des Diagramms definieren. Der spezifische Code lautet wie folgt: 🎜rrreee🎜Im obigen Code definieren wir zunächst die Daten, die angezeigt werden müssen. Jedes Datenobjekt enthält zwei Attribute: value und name , value stellt den Wert der Daten dar und name stellt den Namen der Daten dar. 🎜🎜Dann definieren wir die Konfigurationselemente des Diagramms. Unter anderem wird tooltip verwendet, um den Stil und Inhalt des Eingabeaufforderungsfelds festzulegen, und legend wird verwendet, um den Stil und die Position der Legende festzulegen. Schließlich verwenden wir series, um die Serie zu definieren, also die Daten und die Anzeigemethode des Diagramms. Hier wird eine Reihe vom Typ pie verwendet, die ein Donut-Diagramm darstellt. Die Größe des Innen- und Außenradius wird durch radius,

label festgelegt. code> und <code>labelLine wird verwendet, um den Stil von Textbeschriftungen und Verbindungslinien festzulegen. 🎜🎜Die letzte Codezeile verwendet die Methode <code>setOption

, um Konfigurationselemente und Daten auf das Diagramm anzuwenden, und das Diagramm wird automatisch aktualisiert und im Container angezeigt. 🎜🎜Durch die oben genannten Schritte können wir Donut-Diagramme erfolgreich verwenden, um Datenanteile in ECharts anzuzeigen. In tatsächlichen Anwendungen kann der Code entsprechend den spezifischen Anforderungen geändert und erweitert werden, um mehr Anzeigeanforderungen zu erfüllen. 🎜🎜Um das Donut-Diagramm in ECharts zum Anzeigen von Datenanteilen zu verwenden, müssen Sie zusammenfassend die ECharts-Umgebung vorbereiten, einen Container in HTML erstellen und JavaScript-Code verwenden, um das Donut-Diagramm dynamisch zu generieren. Definieren Sie die Daten und Konfigurationselemente und wenden Sie sie über die Methode setOption auf das Diagramm an. Oben sind die spezifischen Schritte und Codebeispiele für die Verwendung von Donut-Diagrammen zur Anzeige von Datenanteilen in ECharts aufgeführt. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Donut-Diagramme, um Datenanteile in ECharts anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!