Rumah > Artikel > pembangunan bahagian belakang > ECharts dan golang: Petua dan pengalaman dalam membuat carta statistik praktikal
ECharts dan golang: Petua dan pengalaman dalam membuat carta statistik praktikal
- PHPzasal
- 2023-12-17 09:04:361160semak imbas
ECharts dan golang: Kemahiran dan pengalaman dalam membuat carta statistik praktikal, contoh kod khusus diperlukan
Dengan populariti pemprosesan data, visualisasi data telah menjadi kemahiran penting dalam banyak bidang aplikasi. Dan alat untuk membuat carta juga telah muncul. ECharts ialah alat visualisasi data sumber terbuka, dan golang ialah bahasa berkecekapan tinggi dan berkonkurensi tinggi Gabungan kedua-duanya boleh menghasilkan carta yang cekap dan praktikal.
Artikel ini akan memperkenalkan kemahiran dan pengalaman menggunakan ECharts dan golang untuk membuat carta statistik praktikal, dan memberikan contoh kod khusus.
- Pertama, kita perlu menghantar data dari bahagian belakang ke bahagian hadapan. Dalam golang, anda boleh menggunakan pakej http untuk melaksanakan perkhidmatan web mudah. Sebagai contoh, berikut adalah pelayan web mudah:
package main
import (
"encoding/json"
"net/http"
)
type Data struct {
Label string `json:"label"`
Value int `json:"value"`
}
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
data := []Data{
{"January", 10},
{"February", 20},
{"March", 30},
{"April", 25},
{"May", 15},
{"June", 5},
}
jsonData, err := json.Marshal(data)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
w.Header().Set("Content-Type", "application/json")
w.Write(jsonData)
})
http.ListenAndServe(":8080", nil)
}- Seterusnya, kami akan menggunakan ECharts di bahagian hadapan untuk memaparkan data. Pertama, ECharts perlu diperkenalkan dalam html:
<!DOCTYPE html> <html> <head> <title>Chart Example</title> <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px;height:400px;"></div> <script src="chart.js"></script> </body> </html>
Kami memperkenalkan ECharts dalam tag kepala dan meletakkan div dalam badan untuk mengehoskan carta. Pada masa yang sama, kami juga memperkenalkan fail js bernama "chart.js" untuk memuatkan data dan melukis carta.
- Berikut ialah kod kami untuk melukis carta menggunakan ECharts:
fetch('/').then(function(response) {
return response.json();
}).then(function(data) {
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: 'My Chart',
left: 'center',
},
tooltip: {},
xAxis: {
data: data.map(function(item) {
return item.label;
})
},
yAxis: {},
series: [{
type: 'bar',
data: data.map(function(item) {
return item.value;
})
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
});Kod menggunakan fungsi ambil untuk meminta data dan kaedah json() untuk menghuraikan data tindak balas ke dalam objek json. Kami kemudian mencipta contoh ECharts dan menyediakan tajuk, petua alat, paksi X/Y dan siri bar untuk carta.
- Akhir sekali, jalankan pelayan menggunakan golang dalam aplikasi dan buka fail html dalam pelayar. Pada ketika ini kita boleh melihat carta yang dilukis menggunakan ECharts dan golang, yang memaparkan beberapa data yang kami takrifkan pada bahagian belakang.
Di atas adalah contoh asas menggunakan ECharts dan golang untuk mencipta carta statistik praktikal. Jika anda perlu membuat carta yang lebih kompleks, anda boleh mendapatkan pilihan konfigurasi yang sesuai dalam dokumentasi rasmi ECharts dan menggunakan golang untuk mengurus data. Dengan percubaan dan amalan yang berterusan, anda akan dapat mencipta carta yang sangat praktikal dan cantik.
Atas ialah kandungan terperinci ECharts dan golang: Petua dan pengalaman dalam membuat carta statistik praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!