主要借助 百度開發的開源的echarts.js插件,挺好用的。(自行查看官網)
https://www.echartsjs.com/examples/zh/index.html#chart-type-bar
在官網實例上部分沒有在對應的圖形上面顯示數據,所以記錄下:
主要是添加label來實現在圖形上顯示對於的數據 餅圖顯示數據: option1 = { title: { text: '學歷統計', subtext: '', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: [] }, series: [ { name: '', type: 'pie', radius: '55%', center: ['50%', '60%'], label: {//在圓內顯示具體數據數字 normal: { formatter: '{b}:{d}%', position: 'inside' } }, data: [], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; 柱形圖: option = { title: { text: '人數統計' }, color: ['#749f83'], tooltip: {}, legend: { data: ['人數'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '人數', type: 'bar', label: { normal: { position: 'top', show: true } }, data: [] }] };