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>

   Salin selepas log masuk

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

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

   Salin selepas log masuk

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

   Salin selepas log masuk

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

   myChart.setOption(option);

   Salin selepas log masuk

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

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

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.

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!