Erste Schritte mit ECharts: So verwenden Sie ECharts

ECharts Erste Schritte: Zur Verwendung von ECharts sind spezifische Codebeispiele erforderlich.

ECharts ist eine JavaScript-basierte Datenvisualisierungsbibliothek. Mithilfe von ECharts können Benutzer problemlos eine Vielzahl von Diagrammen anzeigen, z. B. Liniendiagramme und Säulen . Grafiken, Kreisdiagramme usw. Dieser Artikel führt Sie in die Verwendung von ECharts ein und stellt detaillierte Codebeispiele bereit.

1. Installieren Sie ECharts

Um ECharts verwenden zu können, müssen Sie es zunächst installieren. Sie können ECharts von der offiziellen ECharts-Website https://echarts.apache.org/zh/index.html herunterladen oder mit npm installieren. Wenn Sie sich für die Verwendung von npm entscheiden, können Sie es mit dem folgenden Befehl installieren:

npm install echarts --save

2. Erstellen Sie eine neue ECharts-Seite

Bevor Sie eine neue ECharts-Seite erstellen, benötigen Sie eine HTML-Seite zum Hosten von ECharts. Im HTML müssen Sie die JavaScript-Datei von ECharts einbinden. Sie können es importieren über:

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

Sobald Sie die JavaScript-Datei von ECharts importiert haben, können Sie mit der Erstellung Ihrer ersten ECharts-Instanz beginnen. Wir empfehlen, der Seite zuvor ein div-Element hinzuzufügen, damit Sie das Diagramm auf der Seite rendern können. Sie können ein div-Element in HTML wie folgt hinzufügen:

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

3. Erstellen Sie Ihr erstes ECharts-Diagramm

Nachdem Sie die für ECharts erforderlichen Grundelemente in HTML erstellt haben, müssen Sie als Nächstes den Code schreiben, um Ihr ECharts-Diagramm zu implementieren. Hier ist ein Beispiel für ein sehr einfaches Liniendiagramm:

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 2. 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

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

Hier wenden wir diese Konfigurationselemente zunächst auf unser ECharts-Diagramm an, indem wir die init函数来初始化了一个新的ECharts实例，并将这个实例保存到一个变量myChart中。我们引入了一些配置项和数据，其中包括一个标题、一个提示框、一个图例、一个x轴、一个y轴和一个数据系列。在这个例子中，我们使用了一个折线图的数据系列。最后，我们通过调用setOption-Methode von ECharts verwenden.

4. Erstellen Sie andere Diagrammtypen

Neben Liniendiagrammen unterstützt ECharts auch viele andere Diagrammtypen, wie z. B. Balkendiagramme, Kreisdiagramme, Streudiagramme, Netzdiagramme und mehr. Nachfolgend finden Sie den Beispielcode für ein Balkendiagramm und ein Kreisdiagramm:

Balkendiagramm:

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 2. 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

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

Kreisdiagramm:

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 2. 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例',
        subtext: '饼图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

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

5. Zusammenfassung

Das Erstellen von Diagrammen mit ECharts ist eine relativ einfache Aufgabe, sofern Sie über grundlegende JavaScript-Kenntnisse verfügen . In diesem Artikel stellen wir Ihnen ein Einführungstutorial zur Verfügung, das Ihnen den Einstieg in ECharts erleichtert. Wenn Sie weitere Informationen und Codebeispiele benötigen, können Sie die offizielle Website von ECharts https://echarts.apache.org/zh/index.html besuchen.

Das obige ist der detaillierte Inhalt vonErste Schritte mit ECharts: So verwenden Sie ECharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!