利用echarts做圖表統計
阿新 • • 發佈:2019-01-07
以專案中的扇形統計圖為例:
第一步:
引入外部echarts.js檔案
第二步:
HTML程式碼塊
<div class="count-body-con count-tj">
<div class="float-e-margins">
<div class="ibox-title">
<h3 style="letter-spacing: 3px;text-align: center">某某情況統計</h3>
</div>
<div class="ibox-content" style="padding:0 0;text-align: center">
<div class="flot-chart-content" id="pie2">
</div>
</div>
</div>
</div>
第三步:
js程式碼塊
require.config({ paths: { echarts: '<%=path%>/resources/js' } });
require( [ 'echarts', 'echarts/chart/pie' // 按需載入所需圖表,如需動態型別切換功能,別忘了同時載入相應圖表 // 'echarts/chart/line', // 按需載入所需圖表,如需動態型別切換功能,別忘了同時載入相應圖表 // 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(document.getElementById('pie1')); var option = { // title: { // text: '框架自帶的統計標題', // textStyle: { // fontSize: 24, // fontWeight: 'normal', // color: '#2E9ED5' // }, // x: 'center' // }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c}人 ({d}%)" }, legend: { orient: 'vertical', x: 'left', y: 'top', left: 'left', data: ['情況1', '情況2', '情況3'] }, calculable: false, series: [ { name: '人數', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value:${後臺統計情況1的資料}, name: '情況1'}, {value:${後臺統計情況2的資料}, name: '情況2'}, {value:${後臺統計情況3的資料}, name: '情況3'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart.setOption(option); window.onresize = myChart.resize; } );
效果: