Carta Polo Air ECharts: Bagaimana untuk memaparkan perkadaran data dan penyiapan matlamat

Carta Polo Air ECharts: Bagaimana untuk memaparkan perkadaran data dan pencapaian matlamat

Pengenalan:
Dalam bidang visualisasi data, carta polo air ialah jenis carta yang biasa digunakan yang boleh memaparkan perkadaran data dan pencapaian matlamat secara visual. ECharts ialah perpustakaan visualisasi data yang berkuasa yang menyediakan pelbagai jenis carta untuk dipilih oleh pembangun. Artikel ini akan memperkenalkan secara terperinci cara menggunakan ECharts untuk mencipta carta polo air dan memaparkan perkadaran data dan penyiapan matlamat, serta menyediakan contoh kod khusus.

1. Apakah gambarajah polo air?
Carta polo air ialah carta donat khas yang menggunakan saiz cincin untuk mewakili perkadaran data, sambil menambah bulatan pepejal di dalam gelanggang untuk mewakili penyempurnaan gol. Carta polo air biasanya digunakan untuk memaparkan data seperti peratusan dan kemajuan Ia secara visual mencerminkan jurang antara data dan matlamat.

2. Gunakan ECharts untuk mencipta carta polo air

1. Perkenalkan perpustakaan ECharts
   Mula-mula, perkenalkan perpustakaan ECharts ke dalam projek, yang boleh diperkenalkan dengan memuat turun terus kod sumber atau menggunakan CDN. Contohnya:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.0/echarts.min.js"></script>

2. Buat bekas
   Buat bekas dalam HTML untuk memaparkan carta polo air, contohnya:

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

3. Tulis kod JavaScript
   Gunakan ECharts untuk mencipta carta polo air melalui kod JavaScript dan konfigurasikan yang berkaitan parameter. Berikut ialah contoh kod:

   // 初始化ECharts实例
   var myChart = echarts.init(document.getElementById('waterball-chart'));
   
   // 指定图表的配置项和数据
   var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6], // 数据占比，范围为[0,1]
        shape: 'circle',
        outline: {
            show: false
        },
        backgroundStyle: {
            color: '#FFA500'
        },
        label: {
            show: true,
            position: ['50%', '50%'],
            formatter: function(value) {
                return Math.round(value * 100) + '%'; // 格式化显示百分比
            },
            fontSize: 32,
            fontWeight: 'bold'
        },
        itemStyle: {
            color: '#FF4500'
        },
        emphasis: {
            itemStyle: {
                color: '#FF0000'
            }
        }
    }]
   };
   
   // 使用刚指定的配置项和数据显示图表
   myChart.setOption(option);

4. Carta pemaparan
   Gunakan item konfigurasi pada carta polo air dengan memanggil kaedah setOption dan menjadikannya. Contohnya: setOption方法将配置项应用到水球图中，并渲染出来。例如：

   myChart.setOption(option);

三、代码解析
上述示例代码中，我们通过ECharts的liquidFill类型创建了一个水球图。其中，配置项series用于配置水球图的样式、数据等信息。

• data字段表示数据占比，取值范围为[0,1]，示例中数据占比为0.6，即60%。
• shape字段表示水球图的形状，可以设置为circle（圆形）或rect（长方形）。
• outline字段表示是否显示水球图的轮廓线，这里设置为不显示。
• backgroundStyle字段表示水球图的背景样式，示例中颜色为橙色（#FFA500）。
• label字段表示水球图中显示的文本标签，通过设置show、position、formatter等参数控制标签的显示位置和格式。
• itemStyle字段表示水球图的填充样式，示例中颜色为橙红色（#FF4500）。
• emphasisrrreee

3 Analisis kod

Dalam kod contoh di atas, kami mencipta carta polo air melalui jenis liquidFill ECharts. Antaranya, item konfigurasi siri digunakan untuk mengkonfigurasi gaya, data dan maklumat lain carta polo air.

Medan data menunjukkan perkadaran data, dan julat nilai ialah [0,1].

Medan shape mewakili bentuk rajah polo air, yang boleh ditetapkan kepada bulatan (bulatan) atau rect (segi empat tepat).

Medan garis besar menunjukkan sama ada hendak memaparkan garis besar rajah polo air, yang ditetapkan di sini untuk tidak dipaparkan.
• Medan backgroundStyle menunjukkan gaya latar belakang imej polo air Dalam contoh, warnanya oren (#FFA500).
• Medan label mewakili label teks yang dipaparkan dalam carta polo air, dengan menetapkan parameter seperti show, position dan pemformat Kawal kedudukan paparan dan format label.

🎜Medan itemStyle mewakili gaya isian rajah polo air Dalam contoh, warnanya ialah oren-merah (#FF4500). 🎜🎜Medan penekanan mewakili gaya kemuncak carta polo air Dalam contoh, warna serlahan ialah merah (#FF0000). 🎜🎜🎜Dengan mengubah suai nilai item konfigurasi ini, anda boleh mencipta dan menyesuaikan carta polo air mengikut keperluan anda sendiri. 🎜🎜Kesimpulan: 🎜Artikel ini memperkenalkan secara terperinci cara menggunakan ECharts untuk mencipta carta polo air, dan menunjukkan perkadaran data dan penyiapan matlamat. Melalui contoh kod mudah, saya harap pembaca boleh mula menggunakan ECharts dengan cepat untuk melukis gambar rajah polo air dan menyesuaikannya mengikut keperluan sebenar. ECharts ialah perpustakaan visualisasi data yang berkuasa dan mudah digunakan yang boleh membantu pembangun memaparkan dan memahami data dengan lebih baik. Cuba gunakan ECharts untuk mencipta carta polo air untuk menjadikan visualisasi data anda lebih jelas dan menarik! 🎜🎜Pautan rujukan: 🎜🎜🎜Dokumentasi rasmi ECharts: https://echarts.apache.org/zh/index.html 🎜🎜Contoh rasmi ECharts: https://echarts.apache.org/examples/zh/index.html 🎜🎜

Atas ialah kandungan terperinci Carta Polo Air ECharts: Bagaimana untuk memaparkan perkadaran data dan penyiapan matlamat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!