Detaillierte Einführung in die Verwendung von Echarts
In diesem Artikel wird hauptsächlich die grundlegende Verwendung von Echarts vorgestellt und die grundlegende Verwendung und Beispiele von Echarts im Detail vorgestellt.
Echarts ist so perfekt:
1, Open-Source-Software, stellt uns selbstlos eine schöne grafische Oberfläche zur Verfügung
2, einfach zu bedienen, kapselt stillschweigend wichtige JS für uns , solange Sie zitieren können, werden Sie Echarts verwenden;
3, es gibt viele Arten, Echarts stellt uns verschiedene Symbole zur Verfügung, von denen das symbolischste die Karte ist; >
4. Gute Kompatibilität, hervorragende Animationswiedergabe basierend auf HTML5.
Die offizielle Website von echarts bietet Quellcode und Dokumentation. Um Echarts zu verwenden, müssen Sie zunächst die offizielle Website aufrufen, um die erforderlichen js-Quelldateien herunterzuladen.
Die Demo auf der offiziellen Website enthält viele Dinge, die wir nicht benötigen. Wenn Sie das Kreisdiagramm verwenden möchten, müssen Sie die nicht verwendeten aus der Demo entfernen und nur die originellsten übrig lassen Funktionsimplementierung. Dies ist schließlich zeitaufwändiger, daher habe ich es im gekürzten Code zusammengefasst. Das neue Verwendungs-Tutorial lautet also wie folgt:
Echarts-Kreisdiagramm-Implementierungsschritte:
1. JS-Dateien in einfaches HTML einführen
<head> <meta charset="utf-8"> <title>Charts demo</title> <script src="js/esl.js"></script> </head> <body> </body>
<head> <meta charset="utf-8"> <title>Charts demo</title> <script src="js/esl.js"></script> </head> <body> <p id="picturePlace"></p> </body>
3, Modulimport js
<head>
<meta charset="utf-8">
<title>Charts demo</title>
<script src="js/esl.js"></script>
</head>
<body>
<p id="picturePlace"></p>
<script type="text/javascript">
// 路径配置
require.config({
paths:{
'echarts' : 'js/echarts',
'echarts/chart/pie' : 'js/echarts'
}
});
</script>
</body><head>
<meta charset="utf-8">
<title>Charts demo</title>
<script src="js/esl.js"></script>
</head>
<body>
<p id="picturePlace"></p>
<script type="text/javascript">
// 路径配置
requireconfig({
paths:{
'echarts' : 'js/echarts',
'echarts/chart/pie' : 'js/echarts'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('picturePlace'));
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} {b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>Die oben genannten Schritte sind die Schritte zum Implementieren des Kreisdiagramms. Das Histogramm-Streudiagramm ähnelt diesem Ist ein Kreis und das Histogramm ein Balken, sind die Daten in den entsprechenden Optionen unterschiedlich, aber der Programmrahmen ist derselbe.
Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Verwendung von Echarts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Detaillierte Einführung in Wapi
Jan 07, 2024 pm 09:14 PM
Benutzer haben möglicherweise den Begriff Wapi bei der Nutzung des Internets gesehen, aber einige Leute wissen definitiv nicht, was Wapi ist. Im Folgenden finden Sie eine detaillierte Einführung, um denjenigen, die es nicht wissen, das Verständnis zu erleichtern. Was ist Wapi: Antwort: Wapi ist die Infrastruktur für WLAN-Authentifizierung und Vertraulichkeit. Dies entspricht Funktionen wie Infrarot und Bluetooth, die im Allgemeinen in der Nähe von Orten wie Bürogebäuden verfügbar sind. Im Grunde sind sie Eigentum einer kleinen Abteilung, sodass der Umfang dieser Funktion nur wenige Kilometer beträgt. Verwandte Einführung in Wapi: 1. Wapi ist ein Übertragungsprotokoll im WLAN. 2. Diese Technologie kann die Probleme der Schmalbandkommunikation vermeiden und eine bessere Kommunikation ermöglichen. 3. Zur Übertragung des Signals ist nur ein Code erforderlich.
Detaillierte Erklärung, ob Win11 das PUBG-Spiel ausführen kann
Jan 06, 2024 pm 07:17 PM
Pubg, auch bekannt als PlayerUnknown's Battlegrounds, ist ein sehr klassisches Battle-Royale-Shooter-Spiel, das seit seiner Popularität im Jahr 2016 viele Spieler angezogen hat. Nach der kürzlichen Einführung des Win11-Systems möchten viele Spieler es auf Win11 spielen. Folgen wir dem Editor, um zu sehen, ob Win11 Pubg spielen kann. Kann Win11 Pubg spielen? Antwort: Win11 kann Pubg spielen. 1. Zu Beginn von Win11 wurden viele Spieler von Pubg ausgeschlossen, da Win11 TPM aktivieren musste. 2. Basierend auf dem Feedback der Spieler hat Blue Hole dieses Problem jedoch gelöst, und jetzt können Sie Pubg unter Win11 normal spielen. 3. Wenn Sie eine Kneipe treffen
Analysieren Sie die Verwendung und Klassifizierung von JSP-Kommentaren
Feb 01, 2024 am 08:01 AM
Klassifizierung und Verwendungsanalyse von JSP-Kommentaren JSP-Kommentare werden in zwei Typen unterteilt: einzeilige Kommentare: Mit der Endung kann nur eine einzelne Codezeile kommentiert werden. Mehrzeilige Kommentare: Beginnend mit /* und endend mit */ können Sie mehrere Codezeilen kommentieren. Beispiel für einen einzeiligen Kommentar Beispiel für einen mehrzeiligen Kommentar/**Dies ist ein mehrzeiliger Kommentar*Kann mehrere Codezeilen kommentieren*/Verwendung von JSP-Kommentaren JSP-Kommentare können zum Kommentieren von JSP-Code verwendet werden, um ihn leichter lesbar zu machen
So verwenden Sie die Exit-Funktion in der C-Sprache richtig
Feb 18, 2024 pm 03:40 PM
Für die Verwendung der Exit-Funktion in der C-Sprache sind bestimmte Codebeispiele erforderlich. In der C-Sprache müssen wir häufig die Ausführung des Programms zu Beginn des Programms beenden oder das Programm unter bestimmten Bedingungen beenden. Die C-Sprache stellt die Funktion „exit()“ zur Implementierung dieser Funktion bereit. In diesem Artikel wird die Verwendung der Funktion „exit()“ vorgestellt und entsprechende Codebeispiele bereitgestellt. Die Funktion „exit()“ ist eine Standardbibliotheksfunktion in der Sprache C und in der Header-Datei enthalten. Seine Funktion besteht darin, die Ausführung des Programms zu beenden und kann eine Ganzzahl annehmen
Verwendung der WPSdatedif-Funktion
Feb 20, 2024 pm 10:27 PM
WPS ist eine häufig verwendete Office-Software-Suite und die WPS-Tabellenfunktion wird häufig für die Datenverarbeitung und Berechnungen verwendet. In der WPS-Tabelle gibt es eine sehr nützliche Funktion, die DATEDIF-Funktion, die zur Berechnung der Zeitdifferenz zwischen zwei Datumsangaben verwendet wird. Die DATEDIF-Funktion ist die Abkürzung des englischen Wortes DateDifference. Ihre Syntax lautet wie folgt: DATEDIF(start_date,end_date,unit) wobei start_date das Startdatum darstellt.
Wir stellen die neueste Sound-Tuning-Methode für Win 11 vor
Jan 08, 2024 pm 06:41 PM
Nach dem Update auf das neueste Win11 stellen viele Benutzer fest, dass sich der Sound ihres Systems leicht verändert hat, sie wissen jedoch nicht, wie sie ihn anpassen können. Deshalb bietet Ihnen diese Website heute eine Einführung in die neueste Win11-Soundanpassungsmethode für Ihren Computer. Die Bedienung ist nicht schwer und die Auswahl ist vielfältig. Laden Sie sie herunter und probieren Sie sie aus. So passen Sie den Sound des neuesten Computersystems Windows 11 an 1. Klicken Sie zunächst mit der rechten Maustaste auf das Soundsymbol in der unteren rechten Ecke des Desktops und wählen Sie „Wiedergabeeinstellungen“. 2. Geben Sie dann die Einstellungen ein und klicken Sie in der Wiedergabeleiste auf „Lautsprecher“. 3. Klicken Sie anschließend unten rechts auf „Eigenschaften“. 4. Klicken Sie in den Eigenschaften auf die Optionsleiste „Erweitern“. 5. Wenn zu diesem Zeitpunkt das √ vor „Alle Soundeffekte deaktivieren“ aktiviert ist, brechen Sie den Vorgang ab. 6. Danach können Sie unten die Soundeffekte zum Einstellen auswählen und klicken
PyCharm-Einsteigerhandbuch: Umfassende Analyse von Ersetzungsfunktionen
Feb 25, 2024 am 11:15 AM
PyCharm ist eine leistungsstarke integrierte Python-Entwicklungsumgebung mit umfangreichen Funktionen und Tools, die die Entwicklungseffizienz erheblich verbessern können. Unter diesen ist die Ersetzungsfunktion eine der im Entwicklungsprozess häufig verwendeten Funktionen, die Entwicklern helfen kann, den Code schnell zu ändern und die Codequalität zu verbessern. In diesem Artikel wird die Ersetzungsfunktion von PyCharm ausführlich vorgestellt, kombiniert mit spezifischen Codebeispielen, um Anfängern zu helfen, diese Funktion besser zu beherrschen und zu verwenden. Einführung in die Ersetzungsfunktion Die Ersetzungsfunktion von PyCharm kann Entwicklern dabei helfen, bestimmten Text im Code schnell zu ersetzen
Detaillierte Informationen zum Speicherort des Druckertreibers auf Ihrem Computer
Jan 08, 2024 pm 03:29 PM
Viele Benutzer haben Druckertreiber auf ihren Computern installiert, wissen aber nicht, wie sie diese finden können. Deshalb gebe ich Ihnen heute eine detaillierte Einführung in den Speicherort des Druckertreibers im Computer. Für diejenigen, die es noch nicht wissen, werfen wir einen Blick darauf, wo der Druckertreiber zu finden ist, ohne die ursprüngliche Bedeutung zu ändern. Sie müssen die Sprache auf Chinesisch umschreiben und der Originalsatz muss nicht angezeigt werden. Es wird empfohlen, für die Suche 2. Suchen Sie nach „Toolbox“. Klicken Sie unten auf „Geräte-Manager“. Umgeschriebener Satz: 3. Suchen Sie unten nach „Geräte-Manager“ und klicken Sie darauf. 4. Öffnen Sie dann „Druckwarteschlange“ und suchen Sie Ihr Druckergerät. Diesmal sind es der Name und das Modell Ihres Druckers. 5. Klicken Sie mit der rechten Maustaste auf das Druckergerät und Sie können es aktualisieren oder deinstallieren.
