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));

//注：当页面要渲染多个饼状图的时候，有多少个图就分别初始化多少次，传递对应的ID即可

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

（重点，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);

//注：需要渲染Echarts所在的div必须设置宽高，因为echarts中Canvas绘制图表时需要根据外层盒子的宽高来渲染

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

秒客网

echarts实现一个页面多个饼状图共用方法的封装

相关文章