echarts實現一個頁面多個餅狀圖共用方法的封裝

封裝想法來源：當初在進行數據的處理時，想着如果能夠用一種可視化的效果來呈現那用戶體驗絕非一般了，於是借用了功能強大的百度Echarts,由於Echarts本身渲染圖表的時候，除了需要給出需要展示的數據值(data)之外，Echarts自帶的一些配置參數重複寫多次也是一件開發效率極低的事，因此，就想着把Echarts的配置參數封裝到一個方法中，集體調用，需要做某些小改動時再傳遞相應的參數即可。

<!--效果-->

       Echarts類庫下載網址： http://echarts.baidu.com/download.html

<script src="../echarts.js"></script>   //echarts類庫的引入

<!--具體參數的處理-->

var warnNum = '40%';   //參數舉例
var joinAllMan= '60%';  //參數舉例

var warnStates = (function(){
    var warnNumCount = warnNum;
    var joinAllManCount = joinAllMan;
    return {
        warnStatesData : function(){
            var res = [];
            if(parseInt(warnNumCount)<parseInt(joinAllManCount)){
                if(parseInt(warnNumCount)==0){
                    res.push(
                            {
                                name: '正常',
                                value:parseInt(joinAllManCount)
                            }
                    );
                }else{
                    res.push(
                            {
                                name: '預警',
                                value: parseInt(warnNumCount)
                            },
                            {
                                name: '正常',
                                value:parseInt(joinAllManCount)-parseInt(warnNumCount)
                            }
                    );
                }

            }else{
                res.push(
                        {
                            name: '預警',
                            value: parseInt(warnNumCount)
                        }
                );

            }

            return res;
        }

    };
})();

<!--調用公共方法並傳遞參數-->

var answerWarnOption = LookData(warnStates.warnStatesData(warnNum,joinAllMan));

<!-- 初始化 echarts -->

//注：當頁面要渲染多個餅狀圖的時候，有多少個圖就分別初始化多少次，傳遞對應的ID即可

var answerWarnChart = echarts.init(document.getElementById('answerWarn'));

<!--公共 echarts 配置參數 封裝--> （重點，fn爲需要呈現的數據值）

function LookData(fn){
    return{
        title : {
            text: '',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b}: {d}%"
        },
        series : [
            {
                name:'',
                type:'pie',
                selectedMode: 'single',
                radius : '80%',
                center: ['50%', '50%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: fn,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }

}

<!-- 初始化變量渲染公共參數-->

answerWarnChart.setOption(answerWarnOption);

<!--HTML 代碼-->

     //注：需要渲染Echarts所在的div必須設置寬高，因爲echarts中Canvas繪製圖表時需要根據外層盒子的寬高來渲染

<div id="answerState" style="width: 500px;height: 300px;"></div>
<div id="answerWarn" style="width: 500px;height: 300px;"></div>