1. 程式人生 > >利用echarts做圖表統計

利用echarts做圖表統計

以專案中的扇形統計圖為例:

第一步:

  引入外部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;
        }
    );

效果: