ECarts Wasserballdiagramm: So zeigen Sie Datenanteil und Zielerreichung an
Einführung:
Im Bereich der Datenvisualisierung ist Wasserballdiagramm ein häufig verwendeter Diagrammtyp, der Datenanteil und Zielerreichung visuell anzeigen kann. ECharts ist eine leistungsstarke Datenvisualisierungsbibliothek, die Entwicklern eine Fülle von Diagrammtypen zur Auswahl bietet. In diesem Artikel wird detailliert beschrieben, wie Sie mit ECharts ein Wasserballdiagramm erstellen und Datenanteile und Zielerreichung anzeigen sowie spezifische Codebeispiele bereitstellen.
1. Was ist ein Wasserballdiagramm?
Das Wasserball-Diagramm ist ein spezielles Donut-Diagramm, das die Größe des Rings verwendet, um den Anteil der Daten darzustellen, und gleichzeitig einen ausgefüllten Kreis innerhalb des Rings hinzufügt, um die Erreichung des Ziels darzustellen. Wasserball-Diagramme werden normalerweise zur Anzeige von Daten wie Prozentsätzen und Fortschritten verwendet. Sie spiegeln die Lücke zwischen Daten und Zielen visuell wider.
2. Verwenden Sie ECharts, um eine Wasserballkarte zu erstellen.
Führen Sie die ECharts-Bibliothek ein.
Führen Sie zunächst die ECharts-Bibliothek in das Projekt ein. Dies kann durch direktes Herunterladen des Quellcodes oder mithilfe eines CDN eingeführt werden. Zum Beispiel:
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
Erstellen Sie einen Container
Erstellen Sie einen Container in HTML, um die Wasserball-Karte anzuzeigen, zum Beispiel:
<div id="waterball-chart" style="width: 400px; height: 400px;"></div>
JavaScript-Code schreiben
Verwenden Sie ECharts, um eine Wasserball-Karte über JavaScript-Code zu erstellen und entsprechend zu konfigurieren Parameter. Das Folgende ist ein Beispielcode:
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('waterball-chart'));
// 指定图表的配置项和数据
var option = {
series: [{
type: 'liquidFill',
data: [0.6], // 数据占比，范围为[0,1]
shape: 'circle',
outline: {
show: false
},
backgroundStyle: {
color: '#FFA500'
},
label: {
show: true,
position: ['50%', '50%'],
formatter: function(value) {
return Math.round(value * 100) + '%'; // 格式化显示百分比
},
fontSize: 32,
fontWeight: 'bold'
},
itemStyle: {
color: '#FF4500'
},
emphasis: {
itemStyle: {
color: '#FF0000'
}
}
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);Diagramm rendern
Wenden Sie Konfigurationselemente auf das Wasserballdiagramm an, indem Sie die Methode setOption aufrufen und rendern. Zum Beispiel: setOption方法将配置项应用到水球图中，并渲染出来。例如：
myChart.setOption(option);
三、代码解析
上述示例代码中，我们通过ECharts的liquidFill类型创建了一个水球图。其中，配置项series用于配置水球图的样式、数据等信息。
data字段表示数据占比，取值范围为[0,1]，示例中数据占比为0.6，即60%。shape字段表示水球图的形状，可以设置为circle（圆形）或rect（长方形）。outline字段表示是否显示水球图的轮廓线，这里设置为不显示。backgroundStyle字段表示水球图的背景样式，示例中颜色为橙色（#FFA500）。label字段表示水球图中显示的文本标签，通过设置show、position、formatter等参数控制标签的显示位置和格式。itemStyle字段表示水球图的填充样式，示例中颜色为橙红色（#FF4500）。emphasisrrreeeIm obigen Beispielcode haben wir ein Wasserballdiagramm mit dem Typ liquidFill von ECharts erstellt. Unter anderem wird das Konfigurationselement series verwendet, um den Stil, die Daten und andere Informationen des Wasserballdiagramms zu konfigurieren.
Das Feld data gibt den Datenanteil an und der Wertebereich beträgt [0,1]. Im Beispiel beträgt der Datenanteil 0,6, also 60 %.
Das Feld Form stellt die Form des Wasserballdiagramms dar, die auf Kreis (Kreis) oder rect (Rechteck) eingestellt werden kann.
Umriss gibt an, ob der Umriss des Wasserballdiagramms angezeigt werden soll, der hier so eingestellt ist, dass er nicht angezeigt wird. backgroundStyle gibt den Hintergrundstil des Wasserballbildes an. Im Beispiel ist die Farbe Orange (#FFA500). label stellt die in der Wasserballkarte angezeigte Textbeschriftung dar, indem Parameter wie show, position und festgelegt werden formatter Steuern Sie die Anzeigeposition und das Format von Etiketten. itemStyle stellt den Füllstil des Wasserballdiagramms dar. Im Beispiel ist die Farbe orange-rot (#FF4500). 🎜🎜Das Feld emphasis stellt den Hervorhebungsstil des Wasserballdiagramms dar. Im Beispiel ist die Hervorhebungsfarbe Rot (#FF0000). 🎜🎜🎜Durch Ändern der Werte dieser Konfigurationselemente können Sie Wasserballdiagramme erstellen und entsprechend Ihren eigenen Anforderungen anpassen. 🎜🎜Fazit: 🎜Dieser Artikel stellt detailliert vor, wie man mit ECharts ein Wasserballdiagramm erstellt, und zeigt den Datenanteil und die Zielerreichung. Ich hoffe, dass die Leser durch einfache Codebeispiele schnell mit ECharts beginnen können, um Wasserballdiagramme zu zeichnen und sie an die tatsächlichen Bedürfnisse anzupassen. ECharts ist eine leistungsstarke und benutzerfreundliche Datenvisualisierungsbibliothek, die Entwicklern dabei helfen kann, Daten besser anzuzeigen und zu verstehen. Versuchen Sie, mit ECharts eine Wasserballkarte zu erstellen, um Ihre Datenvisualisierung lebendiger und interessanter zu gestalten! 🎜🎜Referenzlinks: 🎜🎜🎜Offizielle ECharts-Dokumentation: https://echarts.apache.org/zh/index.html 🎜🎜Offizielle ECharts-Beispiele: https://echarts.apache.org/examples/zh/index.html 🎜🎜Das obige ist der detaillierte Inhalt vonECharts Wasserball-Diagramm: So zeigen Sie den Datenanteil und die Zielerreichung an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
