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

Posted To-Infinity-And-Bod

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于echarts在使用过程中的有关javascript的总结(入门级)相关的知识,希望对你有一定的参考价值。

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:‘已关闭‘}
    ]
);

  刷新页面,你会发现,大功告成!

 

个人总结:

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

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

 







以上是关于基于echarts在使用过程中的有关javascript的总结(入门级)的主要内容,如果未能解决你的问题,请参考以下文章

基于Django实现Linux运维管理平台的整个实现过程和各种API接口调用以及Echarts绘图项目介绍记录点滴生活

关于echarts图表工具使用过程中的问题

ng2中的百度echarts3.0使用——(echarts-ng2)

在vue 中使用百度echarts

echarts中的小小小小坑(一)

echarts 有关饼形图和map的使用技巧1(饼图)