基于echarts在使用过程中的有关javascript的总结（入门级）

Posted 2020-08-22 To-Infinity-And-Bod

step1：

页面上在一段区域上从左到右添加三个同一类型的"pie"饼图，但是数据不一样时，如何减少不必要的重复代码段呢？

首先，html页面代码如下：

<ul class="order-infoList">
            <li>
                <div id="order-category" style="width: 100%;height: 100%"></div>
            </li>
            <li>
                <div id="problem-category" style="width: 100%;height: 100%"></div>
            </li>
            <li>
                <div id="order-status" style="width: 100%;height: 100%"></div>
            </li>
        </ul>

　　给ul的三个li各分配width相应比例关系（如：第一个30%,第二个40%，第三个30%），顺利实现自适应布局（自适应也就这么回事儿）；

step2:

就是要写js代码，我的思路就是利用对象（有属性，有方法，且给方法配置需要的参数，最后重复调用该方法）

代码如下：

var main_move_chart= {

    /*带参数的方法
     * 1.id：html页面对应的id值
     * 2.seriesName：名称
     * 3.legendData：类别
     * 4.seriesData：类别的值
     * */
    init_echarts : function (id,seriesName,legendData,seriesData) {
        //获取id
        var echartObj = echarts.init(document.getElementById(id));
        //执行setOption方法
        echartObj.setOption(main_move_chart.init_option(seriesName,legendData,seriesData));
        //自适应
        main_move_chart.init_resize(echartObj)
    },

    //窗口缩放时自适应
    init_resize : function (Obj) {
        if(window.addEventListener){
            window.addEventListener("resize",function(){
                Obj.resize();
            })
        }else{
            window.attachEvent("resize",function(){
                Obj.resize();
            })
        }
    },

    //带参的option
    init_option : function (seriesName,legendData,seriesData) {
        option = {
            tooltip : {
                trigger:‘item‘,
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend:{
                orient:‘vertical‘,
                x:‘60%‘,
                y:‘center‘,
                data:legendData
                //data:order_category_legendData
            },
            series : [
                {
                    name:seriesName,
                    type:‘pie‘,
                    center:[‘30%‘,‘50%‘],
                    radius : [‘40%‘, ‘55%‘],
                    itemStyle:{
                        normal:{
                            label:{
                                show:false
                            },
                            labelLine:{
                                show:false
                            }
                        },
                        emphasis:{
                            label:{
                                show:true,
                                position:‘center‘,
                                textStyle:{
                                    fontSize:‘16‘,
                                    fontWeight:‘400‘
                                }
                            }
                        }
                    },
                    data:seriesData
                    //data:order_category_seriesData
                }
            ]
        };
        return option;
    }
};

//调用
main_move_chart.init_echarts(
    "order-category",
    ‘工单分类‘,
    [‘投诉建议‘,‘技术支持‘,‘咨询服务‘,‘系统故障‘],
    [
        {value:600,name:‘投诉建议‘},
        {value:500,name:‘技术支持‘},
        {value:250,name:‘咨询服务‘},
        {value:120,name:‘系统故障‘}
    ]
);

main_move_chart.init_echarts(
    "problem-category",
    ‘问题分类‘,
    [‘云主机‘,‘云储存‘,‘虚拟网络‘,‘虚拟防火墙‘,‘虚拟负载均衡‘,‘虚拟IPS‘,‘虚拟防病毒‘,‘虚拟WAF‘,‘虚拟VPN‘,‘云安全‘,‘应用迁移‘],
    [
        {value:600,name:‘云主机‘},
        {value:500,name:‘云储存‘},
        {value:250,name:‘虚拟网络‘},
        {value:120,name:‘虚拟防火墙‘},
        {value:80,name:‘虚拟负载均衡‘},
        {value:20,name:‘虚拟IPS‘},
        {value:210,name:‘虚拟防病毒‘},
        {value:30,name:‘虚拟WAF‘},
        {value:60,name:‘虚拟VPN‘},
        {value:12,name:‘云安全‘},
        {value:30,name:‘应用迁移‘}
    ]
);

main_move_chart.init_echarts(
    "order-status",
    ‘工单状态‘,
    [‘待处理‘,‘处理中‘,‘待您确认‘,‘已关闭‘],
    [
        {value:600,name:‘待处理‘},
        {value:500,name:‘处理中‘},
        {value:250,name:‘待您确认‘},
        {value:120,name:‘已关闭‘}
    ]
);

　　代码解释：

第一个方法（核心）：

main_move_chart.init_echarts方法，就是最重要的，（1） 获取id >>>>>（2） 执行setOption方法（不同之处，传入的参数是另一个配置了参数的方法，并return回来的option对象） >>>>（3） 窗口缩放时自适应方法；
第二个方法：

main_move_chart.init_resize方法，自适应的
第三个方法：

main_move_chart.init_option方法，（去官网的example实例中，复制它的option过来，然后根据实际需要，增删其中的参数配置即可），补充：data的值作为参数传入

step3：
调用方法：
代码如下：

main_move_chart.init_echarts(
    "order-category",
    ‘工单分类‘,
    [‘投诉建议‘,‘技术支持‘,‘咨询服务‘,‘系统故障‘],
    [
        {value:600,name:‘投诉建议‘},
        {value:500,name:‘技术支持‘},
        {value:250,name:‘咨询服务‘},
        {value:120,name:‘系统故障‘}
    ]
);

main_move_chart.init_echarts(
    "problem-category",
    ‘问题分类‘,
    [‘云主机‘,‘云储存‘,‘虚拟网络‘,‘虚拟防火墙‘,‘虚拟负载均衡‘,‘虚拟IPS‘,‘虚拟防病毒‘,‘虚拟WAF‘,‘虚拟VPN‘,‘云安全‘,‘应用迁移‘],
    [
        {value:600,name:‘云主机‘},
        {value:500,name:‘云储存‘},
        {value:250,name:‘虚拟网络‘},
        {value:120,name:‘虚拟防火墙‘},
        {value:80,name:‘虚拟负载均衡‘},
        {value:20,name:‘虚拟IPS‘},
        {value:210,name:‘虚拟防病毒‘},
        {value:30,name:‘虚拟WAF‘},
        {value:60,name:‘虚拟VPN‘},
        {value:12,name:‘云安全‘},
        {value:30,name:‘应用迁移‘}
    ]
);

main_move_chart.init_echarts(
    "order-status",
    ‘工单状态‘,
    [‘待处理‘,‘处理中‘,‘待您确认‘,‘已关闭‘],
    [
        {value:600,name:‘待处理‘},
        {value:500,name:‘处理中‘},
        {value:250,name:‘待您确认‘},
        {value:120,name:‘已关闭‘}
    ]
);

　　刷新页面，你会发现，大功告成！

 

个人总结：

这样的写法有什么弊端？请大神们指点一二，小弟感激不尽！！！

请留下更合适的写法建议！