Rumah > Artikel > pembangunan bahagian belakang > ECharts dan golang dalam tindakan: Tutorial membuat carta statistik yang cantik
. ECharts ialah perpustakaan carta sumber terbuka yang berkuasa dan fleksibel, manakala golang ialah bahasa pengaturcaraan yang berkuasa dan pantas. Menggabungkan kedua-duanya boleh mencapai kesan carta statistik yang indah dalam aplikasi web. Artikel ini akan memperkenalkan anda kepada cara menggunakan ECharts dan golang untuk mencipta carta statistik yang cantik, dan memberikan contoh kod khusus.
1. Persediaan
Sebelum bermula, kita perlu memasang perisian yang sepadan dan memuatkan perpustakaan yang diperlukan.Pasang golang
Pertama, anda perlu memuat turun dan memasang golang. Anda boleh melayari laman web rasmi Golang (https://golang.org/) untuk memuat turun versi terkini golang dan memasangnya mengikut panduan rasmi.
Pasang ECharts
ECharts boleh dipasang melalui npm. Jalankan arahan berikut dalam terminal untuk memasang ECharts.
npm install echarts --save
go mod init your_project_name
go get github.com/gin-gonic/gin
package main import ( "github.com/gin-gonic/gin" "net/http" ) func main() { router := gin.Default() router.LoadHTMLGlob("templates/*") router.GET("/", func(c *gin.Context) { c.HTML(http.StatusOK, "index.html", gin.H{}) }) router.Run(":8080") }
Buat fail bernama index.html dalam folder templat dan tambah kod berikut.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts and golang</title> <script src="/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 在这里编写ECharts的代码 </script> </body> </html>
3. Tulis kod ECharts
Dalam fail index.html, anda boleh menulis kod ECharts untuk mencipta pelbagai carta statistik.
Mula-mula, tambahkan elemen div di dalam teg badan dan tetapkan lebar dan tinggi.
Kemudian, tambahkan kod ECharts di dalam teg skrip.
Seandainya kita ingin melukis histogram, kita boleh menggunakan kod berikut.
<script> var chart = echarts.init(document.getElementById('chart')); var option = { title: { text: '柱状图' }, xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10] }] }; chart.setOption(option); </script>Kod ini mencipta carta bar dengan paksi-x menunjukkan klasifikasi data dan paksi-y menunjukkan volum jualan. Dengan menetapkan atribut data siri, anda boleh menetapkan data khusus histogram. Bergantung pada keperluan anda, anda boleh menulis pelbagai jenis kod carta dan menambahkannya pada fail index.html. 4. Jalankan aplikasi web
Di terminal, gunakan arahan berikut untuk menjalankan aplikasi golang anda.
go run main.go
Seterusnya, buka pelayar anda dan lawati http://localhost:8080.
Anda akan melihat halaman web menunjukkan histogram.
Dengan menulis kod ECharts yang sepadan, anda boleh mencipta pelbagai jenis carta statistik dan memaparkannya dalam aplikasi web.
Dengan menggabungkan ECharts dan golang, kita boleh mencipta carta statistik yang cantik dengan mudah. Artikel ini memperkenalkan anda kepada cara membuat pelayan web dan menggunakan ECharts untuk menulis kod carta statistik dalam aplikasi web. Saya harap artikel ini dapat membantu anda memperdalam pemahaman anda tentang ECharts dan golang, dan menambah kesan visualisasi data yang lebih jelas dan menarik pada aplikasi web anda.
Atas ialah kandungan terperinci ECharts dan golang dalam tindakan: Tutorial membuat carta statistik yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!