Cara menggunakan carta donat untuk memaparkan perkadaran data dalam ECharts

Cara menggunakan carta donat untuk memaparkan perkadaran data dalam ECharts memerlukan contoh kod khusus

ECharts ialah perpustakaan carta visual berasaskan JavaScript yang boleh memaparkan data dan menganalisis arah aliran dengan mudah. Antaranya, carta donat ialah jenis carta biasa, sering digunakan untuk memaparkan hubungan perkadaran data. Artikel ini akan memperkenalkan cara menggunakan carta donat dalam ECharts untuk memaparkan perkadaran data dan memberikan contoh kod khusus.

Pertama, kita perlu menyediakan persekitaran ECharts. Kod JavaScript ECharts boleh diperkenalkan melalui CDN (rangkaian pengedaran kandungan), atau kod sumber ECharts boleh dimuat turun dan diperkenalkan ke dalam projek. Untuk kemudahan, kita boleh memperkenalkan ECharts melalui CDN, kod khusus adalah seperti berikut:

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

Seterusnya, kita perlu mencipta bekas untuk meletakkan carta donat. Anda boleh mencipta bekas melalui teg HTML <div> dan menetapkan ID unik sebagai pengecam bekas. Contoh kod adalah seperti berikut: <div>标签来创建一个容器，并设置一个唯一的ID，作为容器的标识。代码示例如下：

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

然后，我们可以使用JavaScript来动态生成环形图。首先，创建一个Echarts实例，并指定容器的ID作为参数。代码示例如下：

var myChart = echarts.init(document.getElementById('chart-container'));

接着，我们需要定义环形图的数据，以及图表的配置项。具体代码如下：

// 定义数据
var data = [
    { value: 335, name: '数据1' },
    { value: 310, name: '数据2' },
    { value: 234, name: '数据3' },
    { value: 135, name: '数据4' },
    { value: 1548, name: '数据5' }
];

// 定义配置项
var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['数据1', '数据2', '数据3', '数据4', '数据5']
    },
    series: [
        {
            name: '数据占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: data
        }
    ]
};

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

以上代码中，我们首先定义了需要展示的数据，每个数据对象包括value和name两个属性，value代表数据的数值，name代表数据的名称。

然后，我们定义了图表的配置项。其中，tooltip用于设置提示框的样式和内容，legend用于设置图例的样式和位置。最后，我们使用series来定义系列，即图表的数据以及展示方式。此处使用的是pie类型的系列，代表环形图，通过radius设置内外半径的大小，label和labelLine用于设置文本标签和连接线的样式。

最后一行代码使用setOption方法将配置项和数据应用到图表中，图表将会自动更新并显示在容器中。

通过以上步骤，我们可以成功地在ECharts中使用环形图展示数据占比。在实际应用中，可以根据具体需求对代码进行修改和扩展，以满足更多的展示需求。

总结起来，使用ECharts中的环形图展示数据占比，需要准备好ECharts环境，在HTML中创建一个容器，使用JavaScript代码动态生成环形图。定义好数据和配置项，并通过setOptionrrreee

Kemudian, kita boleh menggunakan JavaScript untuk menjana carta donat secara dinamik. Mula-mula, buat tika Echarts dan tentukan ID bekas sebagai parameter. Contoh kod adalah seperti berikut: 🎜rrreee🎜Seterusnya, kita perlu menentukan data carta donat dan item konfigurasi carta. Kod khusus adalah seperti berikut: 🎜rrreee🎜Dalam kod di atas, kami mula-mula mentakrifkan data yang perlu dipaparkan Setiap objek data termasuk dua atribut: value dan name , value mewakili nilai berangka data dan name mewakili nama data. 🎜🎜Kemudian, kami mentakrifkan item konfigurasi carta. Antaranya, tooltip digunakan untuk menetapkan gaya dan kandungan kotak gesaan, dan legend digunakan untuk menetapkan gaya dan kedudukan legenda. Akhir sekali, kami menggunakan siri untuk mentakrifkan siri, iaitu kaedah data dan paparan carta. Apa yang digunakan di sini ialah satu siri jenis pai, yang mewakili carta donat Saiz jejari dalam dan luar ditetapkan melalui radius, labelcode> dan <code>labelLine digunakan untuk menetapkan gaya label teks dan garis penghubung. 🎜🎜Barisan terakhir kod menggunakan kaedah setOption untuk menggunakan item konfigurasi dan data pada carta, dan carta akan dikemas kini dan dipaparkan secara automatik dalam bekas. 🎜🎜Melalui langkah di atas, kami boleh berjaya menggunakan carta donat untuk memaparkan perkadaran data dalam ECharts. Dalam aplikasi sebenar, kod boleh diubah suai dan dikembangkan mengikut keperluan khusus untuk memenuhi lebih banyak keperluan paparan. 🎜🎜Untuk meringkaskan, untuk menggunakan carta donat dalam ECharts untuk memaparkan perkadaran data, anda perlu menyediakan persekitaran ECharts, mencipta bekas dalam HTML dan menggunakan kod JavaScript untuk menjana carta donat secara dinamik. Tentukan data dan item konfigurasi dan gunakannya pada carta melalui kaedah setOption. Di atas ialah langkah dan contoh kod khusus untuk menggunakan carta donat untuk memaparkan perkadaran data dalam ECharts. 🎜

Atas ialah kandungan terperinci Cara menggunakan carta donat untuk memaparkan perkadaran data dalam ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!