Bermula dengan ECharts: Cara Menggunakan ECharts

Panduan Bermula ECharts: Cara menggunakan ECharts, contoh kod khusus diperlukan

ECharts ialah perpustakaan visualisasi data berasaskan JavaScript Dengan menggunakan ECharts, pengguna boleh memaparkan pelbagai carta dengan mudah, seperti carta garisan dan lajur . Graf, carta pai, dsb. Artikel ini akan memperkenalkan anda kepada cara menggunakan ECharts dan memberikan contoh kod terperinci.

1. Pasang ECharts

Untuk menggunakan ECharts, anda perlu memasangnya terlebih dahulu. Anda boleh memuat turun ECharts dari tapak web rasmi ECharts https://echarts.apache.org/zh/index.html, atau pasangkannya menggunakan npm. Jika anda memilih untuk menggunakan npm, anda boleh memasangnya dengan arahan berikut:

npm install echarts --save

2. Buat halaman ECharts baharu

Sebelum mencipta halaman ECharts baharu, anda memerlukan halaman HTML untuk mengehoskan ECharts. Dalam HTML, anda perlu memasukkan fail JavaScript ECharts. Anda boleh mengimportnya melalui:

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

Setelah anda mengimport fail JavaScript ECharts, anda boleh mula membuat contoh ECharts pertama anda. Kami mengesyorkan agar anda menambah elemen div pada halaman sebelum melakukan ini supaya anda boleh memaparkan carta ke dalam halaman. Anda boleh menambah elemen div dalam HTML seperti ini:

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

3. Buat carta ECharts pertama anda

Selepas mencipta elemen asas yang diperlukan untuk ECharts dalam HTML, seterusnya anda perlu menulis kod untuk melaksanakan carta ECharts anda. Berikut ialah contoh carta garisan yang sangat mudah:

// 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);

Di sini, kami mula-mula menggunakan item konfigurasi ini pada carta ECharts kami dengan menggunakan kaedah init函数来初始化了一个新的ECharts实例，并将这个实例保存到一个变量myChart中。我们引入了一些配置项和数据，其中包括一个标题、一个提示框、一个图例、一个x轴、一个y轴和一个数据系列。在这个例子中，我们使用了一个折线图的数据系列。最后，我们通过调用setOption ECharts.

4. Buat jenis carta lain

Selain carta garis, ECharts juga menyokong banyak jenis carta lain, seperti carta bar, carta pai, carta serakan, carta radar dan banyak lagi. Di bawah ialah contoh kod untuk carta bar dan carta pai:

Carta bar:

// 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);

Carta pai:

// 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. Ringkasan

Mencipta carta dengan ECharts ialah tugas yang agak mudah, asalkan anda mempunyai pengetahuan JavaScript asas . Dalam artikel ini, kami menyediakan anda dengan tutorial pengenalan yang akan membantu anda bermula dengan ECharts. Jika anda memerlukan lebih banyak maklumat dan contoh kod, anda boleh melawati tapak web rasmi ECharts https://echarts.apache.org/zh/index.html.

Atas ialah kandungan terperinci Bermula dengan ECharts: Cara Menggunakan ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!