安裝官方教程，今天我們試一下Echarts繪制餅圖

第一步：準備基礎數據

用隨機數模擬下5個車站的進出站總人數，具體如下表：

車站進出站總人數

第二步：繪制基礎餅圖

按教程示例，用Echarts繪制基礎餅圖，其代碼主要為：

展示效果為：

基礎數據餅圖

基礎配置中，在查看每一塊占比的時候，需要用鼠標選中后才可查看數量及具體百分比，不夠直接，那么需要調整配置，讓比例直接顯示

第三步：調整配置項，讓比例數據直接展示

我們需要對Series的配置進行調整，調整后的具體代碼為

series: [ { name: '訪問來源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 1116, name: '車站1'}, {value: 2100, name: '車站2'}, {value: 861, name: '車站3'}, {value: 729, name: '車站4'}, {value: 596, name: '車站5'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } },label : {normal : {formatter: ' {c}: (ozvdkddzhkzd%)',textStyle : {fontWeight : 'normal',fontSize : 15}}}, } ]

主要新增了label項，那么展示的效果怎么樣呢，請看：

調整后的餅圖

很明顯，調整后的餅圖，可以直觀看出進出站人數、比例等信息，簡單配置即可實現其效果，Echarts用起來相當順手。

總結

以上是生活随笔為你收集整理的chart.js 饼图显示百分比_Echarts饼图展示车站客流占比图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。