【一】前端小白的小案例练习之Echarts

1极坐标下的堆叠柱状图

app.title = '极坐标系下的堆叠柱状图';

option = {
    angleAxis: {
    },
    radiusAxis: {
        type: 'category',
        data: ['达标情况', '', '', ''],
        z: 10
    },
    polar: {
    },
    series: [{
        type: 'bar',
        data: [0, 0, 0, 0],
        coordinateSystem: 'polar',
        name: 'A',
        stack: 'a',
       // color:'red'
    }, {
        type: 'bar',
        data: [0,0, 0, 0.08],
        coordinateSystem: 'polar',
        name: 'B',
        stack: 'a',
        color:'transparent'
    }, {
        type: 'bar',
        data: [0, 0, 0, 0.92],
        coordinateSystem: 'polar',
        name: 'C',
        stack: 'a'
    }],
    legend: {
        show: false,
        data: ['A', 'B', 'C']
    }
};

效果图如下:

图1.1 极坐标下的堆叠柱状图.png

2 环形图

app.title = '环形图';

option = {
    tooltip: {
        show:false,
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    
    series: [
        {
            name:'工单数',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: true,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                }
            },
            data:[
                {value:0.9, name:'有效'},
                {value:0.1, name:'无效'}
               
            ],
            color:['#87CEEB', 'transparent']  ,
       animation: false
        }
    ]
};

animation: false 取消动画效果

效果图:

2.1 环形图效果图.png

3 实战演练

3.1 饼图

功能描述：显示饼图信息，点击能钻取到第二层（这里的第二层实则还是一层只是数据动态修改了）

function getEchartsPie(pieData, userPoint, billYear, billMonth, regionId, gridNum, kindId) {
        var showData = pieData.showData;//饼图显示数据
        for(var t=0;t<showData.length;t++){
            showData[t].name=showData[t].name.replace('电信局','');
        }
        console.log(showData);
        toolBoxData=pieData;
        //饼图
        require.config({paths: {echarts: '<%=path%>/ywgl/js/echarts/build/dist'}});
        require(
            ['echarts', 'echarts/chart/pie'],
            function (ec) {
                var myChart2 = ec.init(document.getElementById('chart2'));
                var bill_regions = pieData.showCategory;//['东区', '南区', '西区', '北区', '中区', '浦东', '莘闵', '宝山', '嘉定', '松江', '青浦', '奉贤', '金山', '崇明'];
                bill_regions=getShowCategories(bill_regions);
                var center_total = pieData.centerPies;//[];//[{value:38695, name:'各区局工单总数'}];
                //ajax--end
                var option =
                    {
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: bill_regions
                        },
                       /* title: {
                            text: '',
                            subtext: '工单达标统计'
                        },*/
                        tooltip: {
                            trigger: 'item',
                            //formatter: //"{a} <br/>{b} : {c} ({d}%)"
                            formatter: function (params) {
                                var pie_pos = 0;
                                var showCats=option.legend.data;
                                for (var i = 0; i < showCats.length; i++) {
                                    if (showCats[i] == params.data.name) {
                                        pie_pos = i;
                                    }
                                }
                                if(params.series.name=='pieTotal'){
                                    //代表是中间内环，只返回总数和名称就好 pieTotal下面有定义
                                    return params.data.name + "<br>工单总数:"+ params.data.value;
                                }

                                var commonTip=params.data.name + "<br>工单总数:"+ params.data.value+"<br>工单执行数:"+toolBoxData.showData[pie_pos].executeNum+"<br>工单执行率: "+getShowDigitPercent(toolBoxData.showData[pie_pos].executeRate )+"<br>";
                                if(kindId==1){
                                    return commonTip+"非线路工单有效执行率:"+getShowDigitPercent(toolBoxData.showData[pie_pos].notXianluEffectiveExeRate );
                                }else if(kindId==3){
                                    return commonTip+"工程配合率:"+getShowDigitPercent(toolBoxData.showData[pie_pos].cooperateEfficiency );
                                }else if(kindId==2){
                                    return params.data.name + "<br>5*8NOC直派现场故障处理总数:"
                                        +toolBoxData.showData[pie_pos].nocNum+
                                        "<br>现场响应数"+toolBoxData.showData[pie_pos].zaclResponseNum+
                                        "<br>现场认领数"+toolBoxData.showData[pie_pos].zaclAcceptNum
                                        +"<br>现场响应率:"+
                                        getShowDigitPercent(toolBoxData.showData[pie_pos].zaclResponseRate )
                                        +"<br>现场认领率:"+getShowDigitPercent(toolBoxData.showData[pie_pos].zaclAcceptRate );
                                }
                            }
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {show: false},
                                dataView: {show: false, readOnly: false},
                                magicType: {
                                    show: false,
                                    type: ['pie', 'funnel']
                                },
                                restore: {show: false},
                                saveAsImage: {show: true}
                            }
                        },

                        calculable: false,
                        series: [
                            {
                                name: 'pieTotal',
                                type: 'pie',
                                selectedMode: 'single',
                                radius: [0, 70],
                                x: '20%',
                                width: '40%',
                                funnelAlign: 'right',
                                max: 1548,

                                itemStyle: {
                                    normal: {
                                        label: {
                                            position: 'inner'
                                        },
                                        labelLine: {
                                            show: false
                                        }
                                    }
                                },
                                data: center_total//var center_total=[{value:38695, name:'总数'}];
                            },
                            {
                                name: '区局',
                                type: 'pie',
                                radius: [100, 140],

                                // for funnel
                                x: '60%',
                                width: '35%',
                                funnelAlign: 'left',
                                max: 1048,
                                data: showData
                            }
                        ]
                    };
                myChart2.setOption(option);
                var ecConfig = require('echarts/config');
                myChart2.on(ecConfig.EVENT.PIE_SELECTED, function (param) {
                    var selected = param.selected;
                    var serie;
                    for (var idx in selected) {
                        serie = option.series[idx];
                        for (var i = 0, l = serie.data.length; i < l; i++) {
                            if (selected[idx][i]) {
                                if (idx == "1" && pieLayer == 1) {
                                    //alert( serie.name + ' : ' + '【数据' + i + '】' + serie.data[i].name + ' ');
                                    regionId = showData[i].showId;
                                    //step1:根据当前区局Id钻取第二层网格数据
                                    var pieData2 = getPieData(2, userPoint, billYear, billMonth, regionId, gridNum, kindId);
                                    pieHrefPieData=pieData2;
                                    pieLayer = 2;//代表是第二层
                                    toolBoxData=pieData2;
                                    var showData2 = pieData2.showData;
                                    var center_total2 = pieData2.centerPies;
                                    var billGrids = pieData2.showCategory;
                                    //step2:覆盖旧数据
                                    var option2 =option;
                                    option2.legend.data=billGrids;
                                    option2.series[1].data=showData2;
                                    option2.series[0].data=center_total2;
                                    //step3:清空旧数据并填充新数据
                                    myChart2.clear();
                                    myChart2.setOption(option2);
                                    $("#returnBtn").show();
                                    //getEchartsPie(pieData2,userPoint, billYear, billMonth, regionId, gridNum, kindId);///这种方式会出现饼图容器还没生成 数据却先出来的错误(Cannot read property 'isLoading' of null)
                                } else if (idx == "1" && pieLayer == 2) {
                                    var myShowData=pieHrefPieData.showData;
                                    if (myShowData == null || myShowData == undefined || myShowData == "" || myShowData.length == 0) {
                                        myShowData=globalPieData.showData;//这里判断是因为如果一开始直接跳到第二层网格的，那么数据直接拿一开始加载到的饼图数据
                                    }
                                   // console.log(myShowData);
                                    var j_pos=-1;
                                    for(var j=0;j<myShowData.length;j++){
                                        if(myShowData[j].name==serie.data[i].name){
                                            j_pos=j;break;
                                        }
                                    }
                                    if(j_pos==-1) {alert('无法跳转到详单数据，请联系技术支持!');return;}
                                    var orgId=myShowData[j].orgId;
                                    if(kindId==2){//网故的详单表比较特殊
                                        window.open("<%=echartsFineReportUrl%>?reportlet=billFailDetailZacl.cpt&accessToken=<%=accessToken%>&kindId=" + kindId+"&billYear="+billYear+"&billMonth="+billMonth+"&orgId="+orgId+"&isZwAccept=yes&isClaim=yes", window, "height=600, width=1400, center=Yes, status=no,resizable=yes");
                                    }else{
                                        var cpt='';//具体跳到哪张报表设置
                                        if(kindId==1){//作业计划
                                            cpt='billFailDetailZyjh.cpt&isExecute=yes&isNotXianlu=yes';
                                        }else{//工程配合
                                            cpt='billFailDetailGcph.cpt&isExecute=yes';
                                        }
                                        window.open("<%=echartsFineReportUrl%>?reportlet="+cpt+"&accessToken=<%=accessToken%>&kindId=" + kindId+"&billYear="+billYear+"&billMonth="+billMonth+"&orgId="+orgId+"&tableName="+getBillInfoTablePostfix(billYear,billMonth), window, "height=600, width=1400, center=Yes, status=no,resizable=yes");
                                    }
                                  }
                            }
                        }
                    }
                });
            });
    }
    

效果图：

图3.1.1 饼图效果图
图3.1.2 点击某一个区显示该区下的分布数据

3.2 柱形图

功能描述：柱形图加载各分类数据，同时可点击柱子跳到其他页面。

function getEchartsGcclBar(billYear, billMonth, regionId, gridNum, kindId, showType) {
        //故障处理柱形图
        require.config({
            paths: {
                echarts: '<%=path%>/ywgl/js/echarts/build/dist'
            }
        });
        require(['echarts', 'echarts/chart/line', 'echarts/chart/bar'],
            function (ec) {
                var zyjh_legend = ['5*8NOC直派现场故障处理总数', '现场响应数', '现场认领数', '现场响应率', '现场认领率'];
                var myChart = ec.init(document.getElementById('chart'));
                var gzcl_zs_data = [];//[2500, 3000, 2817, 3000, 2100, 1500, 2400];
                var bill_regions = [];//['东区', '南区', '西区', '北区', '中区', '浦东', '莘闵', '宝山', '嘉定', '松江', '青浦', '奉贤', '金山', '崇明'];
                var gzcl_response = [];//[41,96,168,146,86,314,220,71,100,151,78,118,62,19];
                var gzcl_accept = [];//[42,100,173,145,89,316,221,70,100,154,79,118,62,18];
                var gzcl_accept_rate = [];//[0.9545,0.9901,0.9886,0.9864,1.0,1.0,0.9910,0.9859,0.9901,0.9809,1.0,0.9593,0.8378,0.9474];
                var gzcl_response_rate = [];//[0.9318,0.9505,0.96,0.9932,0.9332,0.9937,0.9865,1.0,0.9901,0.9618,0.9873,0.9593,0.8378,1.0];
                //提示
                var noc_num = [];//[44,101,175,147,89,316,223,71,101,157,79,123,74,19];
                var donghuan_num = [];//[12,4,21,12,15,29,28,7,7,14,14,17,13,14];
                var xianlu_num = [];//[0,0,0,0,0,0,0,0,0,0,0,0,0,0];
                var region_number = [];//[32,21,44,53,6,96,53,49,56,77,58,81,41,3];
                var wuxian_num = [];//[0,76,110,82,68,191,142,15,38,66,7,25,20,2];
                var showId=[];
                $.ajax({
                    async: false,
                    dataType: "json",
                    type: "post",
                    url: '<%=path%>/unionbill/getEchartsBar.do',
                    data: {
                        "showType": showType,
                        "userId": "<%=userId%>",
                        "userPoint": userPoint,
                        "billYear": billYear,
                        "billMonth": "" + billMonth,
                        "regionId": regionId,
                        "gridNum": gridNum,
                        "kindId": kindId
                    },
                    success: (function (data) {
                        //showid..........
                        gzcl_zs_data = data.nocNum;
                        bill_regions = data.showCategory;
                        bill_regions=getShowCategories(bill_regions);
                        gzcl_response = data.zaclResponseNum;
                        gzcl_accept = data.zaclAcceptNum;
                        gzcl_accept_rate = data.zaclAcceptRate;
                        gzcl_response_rate = data.zaclResponseRate;
                        //提示
                        noc_num = data.nocNum;
                        donghuan_num = data.moveRingZaclNum;
                        xianlu_num = data.xianluZaclNum;
                        region_number = data.juneiZaclNum;//局内
                        wuxian_num = data.wuxianZaclNum;
                        showId=data.showId;
                    })
                });//ajax--end
                var option = {
                    title: {
                        text: '',
                        subtext: '工单完成情况统计[工单场景：故障处理]'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            var b_pos = 0;
                            for (var i = 0; i < bill_regions.length; i++) {
                                if (bill_regions[i] == params[0].name) {
                                    b_pos = i;
                                }
                            }
                            return params[0].name + ':<br>5*8NOC直派现场故障处理总数: ' + noc_num[b_pos] + ' <br>现场响应数: ' + gzcl_response[b_pos] + ' <br> 现场认领数: ' + gzcl_accept[b_pos] +
                                '<hr>现场响应率: ' + getShowDigitPercent(gzcl_response_rate[b_pos] )+ ' <br>现场认领率: ' + getShowDigitPercent(gzcl_accept_rate[b_pos] ) +
                                '<hr>动环故障数: ' + donghuan_num[b_pos] + '<br>局内故障数: ' + region_number[b_pos] + '<br>无线故障数: ' + wuxian_num[b_pos] + '<br>线路故障数: ' + xianlu_num[b_pos];
                        }
                    },
                    legend: {
                        data: zyjh_legend
                    }
                    ,
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: false},
                            dataView: {show: false, readOnly: false},
                            magicType: {show: false, type: ['line', 'bar']},
                            restore: {show: false},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    grid: {y: 60, y2: 30, x2: 50},
                    xAxis: [
                        {
                            type: 'category',
                            data: bill_regions
                        },
                        {
                            type: 'category',
                            axisLine: {show: false},
                            axisTick: {show: false},
                            axisLabel: {show: false},
                            splitArea: {show: false},
                            splitLine: {show: false},
                            data: bill_regions
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {formatter: '{value} '}
                        },
                        {
                            type: 'value',
                            name: '现场响应率',
                            axisLabel: {
                                formatter: '{value}        '
                            }
                        },
                        {
                            type: 'value',
                            name: '现场认领率',
                            axisLabel: {
                                formatter: '{value}        '
                            }
                        }
                    ],
                    series: [
                        {
                            name: '5*8NOC直派现场故障处理总数',
                            type: 'bar',
                            xAxisIndex: 1,
                            itemStyle: {
                                normal: {
                                    color: '#aed268',//rgba(237,129,29,0.5)',
                                    label: {
                                        show: true
                                    }
                                }
                            },
                            data: gzcl_zs_data
                        },
                        {
                            name: '现场响应数',
                            type: 'bar',
                            xAxisIndex: 0,
                            itemStyle: {
                                normal: {
                                    color: '#c475ad',//rgba(181,195,52,1)',
                                    label: {
                                        show: true
                                    }
                                }
                            },
                            data: gzcl_response
                        },
                        {
                            name: '现场认领数',
                            type: 'bar',
                            xAxisIndex: 0,
                            itemStyle: {
                                normal: {
                                    color: '#48aae0',//'rgba(193,35,43,1)',
                                    label: {
                                        show: true
                                    }
                                }
                            },
                            data: gzcl_accept
                        }

                        , {
                            name: '现场认领率',
                            type: 'line',
                            yAxisIndex: 1,
                            data: gzcl_accept_rate
                        }, {
                            name: '现场响应率',
                            type: 'line',
                            yAxisIndex: 1,
                            data: gzcl_response_rate
                        }
                    ]
                };
                myChart.setOption(option);
                var ecConfig = require('echarts/config');
                myChart.on(ecConfig.EVENT.CLICK, function (param) {
                    var bar_zacl_pos = 0;
                    for (var i = 0; i < bill_regions.length; i++) {
                        if (bill_regions[i] == param.name) {
                            bar_zacl_pos = i;
                      }
                    }
                    var regionHref=showId[bar_zacl_pos];
                    var monthHref=billMonth;//默认按区局的跳转参数
                    if(billMonth.length>1){//多月即x轴是按月
                        //按月份的跳转参数
                        // 此时跳转带过去的regionid应该是页面下拉框的值
                        //月份就是柱子的Id
                        regionHref=regionId;
                        monthHref=showId[bar_zacl_pos];
                    }

                    if(param.seriesIndex!=0){//5*8Noc总数柱子不需要跳转
                        var diff='';
                        if(param.seriesIndex==1){//现场响应数
                            diff='&isZwAccept=yes';
                        }else{
                            //现场认领数
                            diff='&isClaim=yes';
                        }
                        window.open("<%=echartsFineReportUrl%>?reportlet=billFailDetailZacl.cpt&kindId=" + kindId+diff+"&accessToken=<%=accessToken%>&billYear="+billYear+"&billMonth="+monthHref+"&regionId="+regionHref, window, "height=600, width=1400, center=Yes, status=no,resizable=yes");
                    }
                    //window.open("http://localhost:8075/WebReport/ReportServer?reportlet=billFailDetail.cpt&kindId=" + kindId+"&billYear="+billYear+"&billMonth="+monthHref+"&regionId="+regionHref, window, "height=600, width=1400, center=Yes, status=no,resizable=yes");
                });
            });// 路径配置  //画echarts柱形图
    }//故障处理柱形图end

功能效果图

图3.2.1 柱形图效果图

3.3 环图

function drawPie(){
         var mychart1 = echarts.init(document.getElementById('mychart1'));
         var mychart2=echarts.init(document.getElementById('mychart2'));
        var mychart3=echarts.init(document.getElementById('mychart3'));
        var mychart4=echarts.init(document.getElementById('mychart4'));
        var mychart5=echarts.init(document.getElementById('mychart5'));
         var option = {
             series: [{type: 'pie',radius: ['50%', '70%'],
                     label: {
                         normal: {
                             show: false,
                             position: 'center'
                         }
                     },
                     data: [
                         {value: 0.9, name: ''},
                         {value: 0.1, name: ''}
                     ],
                     color: ['#87CEEB', '#DCDCDC'],
                     animation: false
                 }
             ]
         };
         //获取数据
        $.ajax({
            async: false,
            dataType: "json",
            type: "post",
            url: '<%=echartsAppUrl%>',
            data: {
                "accessToken": "<%=accessToken%>",
                "type": "getWelcomePieData"
            },
            success: (function (data) {
               console.log(data);
               //作业计划的数据
                option=setValueIntoOption(option,data,1,1);
                mychart1.setOption(option);
                option=setValueIntoOption(option,data,1,2);
                mychart2.setOption(option);
                //故障处理--响应率
                option=setValueIntoOption(option,data,2,1);
                mychart3.setOption(option);
                //故障处理--认领率
                option=setValueIntoOption(option,data,2,2);
                mychart4.setOption(option);
                //工程配合--工程配合率
                option=setValueIntoOption(option,data,3,1);
                mychart5.setOption(option);
            })
        });//ajax--end
        //

    }

function setValueIntoOption(option,data,kind,idx) {
    if(kind==1){
        if(data.detail.zyjhEchartsBar!=null){
            if(idx==1){
                option.series[0].data[0].value=data.detail.zyjhEchartsBar.executeRate;
                option.series[0].data[1].value=1-data.detail.zyjhEchartsBar.executeRate;
                option.series[0].color=['#87CEEB', '#DCDCDC'];
                $("#zyjhOne").html(getShowDigitPercent(option.series[0].data[0].value));
            }else{
                option.series[0].data[0].value=data.detail.zyjhEchartsBar.notXianluExecuteRate;
                option.series[0].data[1].value=1-data.detail.zyjhEchartsBar.notXianluExecuteRate;
                option.series[0].color=['#00CD66', '#DCDCDC'];
                $("#zyjhTwo").html(getShowDigitPercent(option.series[0].data[0].value));
            }
        }else{
            option.series[0].data[0].value=0;
            option.series[0].data[1].value=1;
            option.series[0].color=['#f35c30', '#DCDCDC'];
            $("#zyjhOne").html(getShowDigitPercent(option.series[0].data[0].value));
            $("#zyjhTwo").html(getShowDigitPercent(option.series[0].data[0].value));
        }
    }else if(kind==2){
        if(data.detail.zaclEchartsBar!=null) {
            //故障处理
            if (idx == 1) {
                option.series[0].data[0].value = data.detail.zaclEchartsBar.zaclResponseRate;
                option.series[0].data[1].value = 1 - data.detail.zaclEchartsBar.zaclResponseRate;
                option.series[0].color = ['#f35c30', '#DCDCDC'];
                $("#zaclOne").html(getShowDigitPercent(option.series[0].data[0].value));
            } else {
                option.series[0].data[0].value = data.detail.zaclEchartsBar.zaclAcceptRate;
                option.series[0].data[1].value = 1 - data.detail.zaclEchartsBar.zaclAcceptRate;
                option.series[0].color = ['#f3c930', '#DCDCDC'];
                $("#zaclTwo").html(getShowDigitPercent(option.series[0].data[0].value));
            }
        }else{
            option.series[0].data[0].value=0;
            option.series[0].data[1].value=1;
            option.series[0].color=['#f35c30', '#DCDCDC'];
            $("#zaclOne").html(getShowDigitPercent(option.series[0].data[0].value));
            $("#zaclTwo").html(getShowDigitPercent(option.series[0].data[0].value));
        }
    }else if(kind==3){
        if(data.detail.gcphEchartsBar!=null) {
            //工程配合
            if (idx == 1) {
                option.series[0].color = ['#7B68EE', '#DCDCDC'];
                option.series[0].data[0].value = data.detail.gcphEchartsBar.cooperateEfficiency;
                option.series[0].data[1].value = 1 - data.detail.gcphEchartsBar.cooperateEfficiency;
                $("#gcphOne").html(getShowDigitPercent(option.series[0].data[0].value));
            }
        }else{
            option.series[0].data[0].value=0;
            option.series[0].data[1].value=1;
            option.series[0].color=['#f35c30', '#DCDCDC'];
            $("#gcphOne").html(getShowDigitPercent(option.series[0].data[0].value));
        }
    }
    return option;
}

显示百分比如果带小数位保留两位小数，否则直接取整

function getShowDigitPercent(showDigit) {
    if(showDigit*100!=(showDigit*100).toFixed(2)){
        //说明有小数此时保留二位小数
        return (showDigit*100).toFixed(2)+"%"
    }else{
        return showDigit*100+"%";
    }
}

显示效果图如下 ：

图3.3.1 环图