Was sind Echarts? Wie benutzt man? Einführung in Echarts

Diagramme können uns intuitiv große Datenmengen auf geeignete Weise anzeigen. Das Front-End-Personal ist hier, um die Daten auf sehr komfortable und intuitive Weise darzustellen in einer Weise, die tatsächlich ECharts erfordert, also Was genau ist Echarts? Wie benutzt man? In diesem Artikel stellen wir Ihnen den Inhalt von Echarts vor.

Lassen Sie uns zunächst einen Blick darauf werfen Was sind Echarts?

Aus der Erklärung auf der offiziellen Website können wir erkennen, dass es sich bei Echarts um ein kommerzielles Datendiagramm handelt. Es handelt sich um eine reine JavaScript-Symbolbibliothek, die mit den meisten Browsern und der zugrunde liegenden Ebene kompatibel ist basiert auf der leichtgewichtigen Canvas-Klasse. Die Bibliothek ZRender bietet intuitive, anschauliche, interaktive und hochgradig anpassbare Datenvisualisierungsdiagramme. Innovative Drag-and-Drop-Neuberechnungen, Datenansichten, Wertebereichs-Roaming und andere Funktionen verbessern das Benutzererlebnis erheblich und geben Benutzern die Möglichkeit, Daten zu extrahieren und zu integrieren.

Kurz gesagt ist Echarts eine Bibliothek, die bei der Datenvisualisierung hilft.

Nachdem wir die Erklärung darüber gelesen haben, was Echarts sind, werfen wir einen Blick auf Wie verwendet man Echarts?

Wir haben oben erwähnt, dass es sich bei Echarts um ein Datendiagramm in kommerzieller Qualität handelt. Schauen wir uns also an, was diese Diagramme sind

Liniendiagramm (Flächendiagramm), Säulendiagramm (Balkendiagramm), Streudiagramm (Blasendiagramm), K-Liniendiagramm, Kreisdiagramm (Donutdiagramm)

Zwölf Arten von Diagrammen, darunter Radardiagramm (gefülltes Radardiagramm), Akkorddiagramm, kraftgesteuertes Layoutdiagramm, Karte, Dashboard, Trichterdiagramm, Ereignisflussdiagramm usw.

Nachdem wir wissen, was Diagramme sind, müssen wir wissen, wie man sie verwendet.

Zuerst müssen wir das Plug-in herunterladen: https://github.com/ecomfe/echarts/archive/1.4.1.zip

Dann verwenden wir ein Beispiel, um den grundlegenden Prozess der Verwendung von Echarts zu veranschaulichen.

Der erste Schritt bei der Verwendung von Echarts: Zuerst müssen Sie die JS-Bibliothek in die Datei einführen, Sie können Baidus CDN verwenden

<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>

Der zweite Schritt bei der Verwendung von Echarts: Erstellen Sie dann ein DIV zur Anzeige das Diagramm

<div id="pie" style="height:400px"></div>
<div id="bar" style="height:400px"></div>

Der dritte Schritt bei der Verwendung von Echarts: Konfigurieren Sie den geladenen Diagrammtyp und -pfad

<script type="text/javascript">
        // 路径配置
        require.config({
            paths:{ 
                &#39;echarts&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;,
                &#39;echarts/chart/bar&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;,
        &#39;echarts/chart/pie&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;
            }
        });
</script>

Der vierte Schritt bei der Verwendung von Echarts: Konfigurieren Sie die Diagrammdaten

optionpie = {
　　title: {
　　　　text: '2018年08月客户总满意度比例图',subtext: '测试人员',x: 'center'
　　},
　　tooltip: {
　　　　trigger: 'item',
　　　　formatter: "{a}<br/>{b} : {c} ({d}%)"
　　},
　　legend: {
　　　　orient: &#39;vertical&#39;,
　　　　x: &#39;left&#39;,
　　　　data: [&#39;满意&#39;, &#39;不满意&#39;]
　　},
　　toolbox: {
　　　　show: true,
　　　　feature: {
　　　　　　restore: true,
　　　　　　saveAsImage: true
　　　　}
　　},
　　calculable: true,
　　series: [
　　{
　　　　name: &#39;总满意度百分比&#39;,
　　　　type: &#39;pie&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [
　　　　{ value: 100, name: &#39;满意&#39; },
　　　　{ value: 16, name: &#39;不满意&#39;}
　　]
　　}
　　]
};

option = {
　　title: {
　　　　text: &#39;2018年08月客户满意度分布图&#39;,subtext: &#39;测试人员&#39;,x: &#39;left&#39;
　　},
　　tooltip: {
　　　　trigger: &#39;axis&#39;,
　　　　formatter: "{b}<br/>{a0} : {c0}<br/>{a1} : {c1}"
　　},
　　legend: {
　　　　x: &#39;right&#39;,
　　　　padding: [5,70,5,5],
　　　　data: [&#39;满意&#39;, &#39;不满意&#39;]
　　},
　　toolbox: {
　　　　show: true,
　　　　feature: {
　　　　　　restore: true,
　　　　　　saveAsImage: true
　　　　}
　　},
　　calculable: true,
　　xAxis: [
　　{
　　　　type: &#39;category&#39;,
　　　　data: [&#39;客服人员满意度&#39;, &#39;维修人员满意度&#39;, &#39;售后人员满意度&#39;]
　　}
　　],
　　yAxis: [
　　{
　　　　type: &#39;value&#39;,
　　　　splitArea: { show: true }
　　}
　　],
　　series: [
　　{
　　　　name: &#39;满意&#39;,
　　　　type: &#39;bar&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [10, 5, 8]},
　　{
　　　　name: &#39;不满意&#39;,
　　　　type: &#39;bar&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [2, 4, 6]}
　　]
};

Der fünfte Schritt zur Verwendung von Echarts: Anzeigen der Daten in Diagrammen

require(
[
　　'echarts',
　　'echarts/chart/pie',
　　'echarts/chart/bar'
],
function (ec) {
　　//饼状图
　　var pieChart = ec.init(document.getElementById('pie'));
　　pieChart.setOption(optionpie);
　　
　　//柱状图
　　var myChart = ec.init(document.getElementById('bar'));
　　myChart.setOption(option);
}
)

Verwandte Empfehlungen:

Detaillierte Einführung in die Verwendung von Echarts

Anleitung ECharts im Webpack verwenden?

Das obige ist der detaillierte Inhalt vonWas sind Echarts? Wie benutzt man? Einführung in Echarts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!