周总结五

周总结五

核心代码

function showTable(o){
    $('.head').html("");
    $('.main').html("");
    var json=JSON.parse(o);
    arr=json.mapd;
    tr="<tr id='B'><td>属性名称</td><td>个数</td></tr>";
    $('.head').append(tr);
    for(var key in arr){
        $('.main').append("<tr><td>"+key+"</td><td>"+arr[key]+"</td></tr>");
    }
    $('tbody.main tr').mouseover(function(){
        index=$(this).prevAll().length
        temp=0;
        var str="";
        for(var k in arr){
            if(temp==index){
                str=k;
                break;
            }
            temp++;
        }
        charts.dispatchAction({
                  type: 'highlight',
                  name: str,
             })
    })
    $('tbody.main tr').mouseout(function(){
        index=$(this).prevAll().length
        temp=0;
        var str="";
        for(var k in arr){
            if(temp==index){
                str=k;
                break;
            }
            temp++;
        }
        charts.dispatchAction({
                  type: 'downplay',
                  name: str,
             })
    })
}
function showCharts(o,kind){
    j=JSON.parse(o)
    mapd=j.mapd
    console.log(mapd);
    if(kind=='typeid'){
        drawCharts("视频/文章",mulJsonToArray(mapd,true),mulJsonToArray(mapd,false))
    }else if(kind=='idcity'){
        drawCharts("地市",mulJsonToArray(mapd,true),mulJsonToArray(mapd,false))
    }else if(kind=='traffic'){
        drawCharts("流量",mulJsonToArray(mapd,true),mulJsonToArray(mapd,false))
    }
}

function mulJsonToArray(obj,isKey){
    arr=[]
    for(key in obj){
        if(isKey){
            arr.push(key)
        }else {
            arr.push(obj[key])
        }
    }
    return arr

}


function drawCharts(title,xdata,ydata){
    option={
            title: {
                text: title
            },
            tooltip:{},
            legend: {
                data:['个数']
            },
            xAxis:{
                data:xdata
            },
            yAxis:{},
            series: [{
                name: '个数',
                type: 'line',
                data: ydata
            }]
        }

    typeIndex=$('input[name=shape]:checked').val()
    if(typeIndex=='0'){
        option.xAxis.show=true
        option.yAxis.show=true
        option.series[0].type="line"
    }
    else if(typeIndex=='1'){
        option.xAxis.show=true
        option.yAxis.show=true
        option.series[0].type="bar"
    }
    else if(typeIndex=='2'){
        data=[]
        for(i=0;i<xdata.length;i++){
            data.push(
                {
                    name:xdata[i]
                    ,value:ydata[i]
                }
            )
        }
        option.series[0].type="pie"
        option.series[0].data=data
        option.xAxis.show=false
        option.yAxis.show=false

    }
    charts.setOption(option);
    charts.on('mouseover',function(data){
        $('tbody.main tr').eq(data.dataIndex).css('background',"#00CCFF")
    })
    charts.on('mouseout',function(data){
        $('tbody.main tr').eq(data.dataIndex).css('background',"#FFFFFF")
    })
}

</script>

本周实现了图表联动

代码量500行

平均学习1小时