每周总结

这周完成内容——数据可视化操作之数据下钻

数据下钻操作很简单，步骤简单如下：

　　首先创建echarts实例，例如

var my_box1 = echarts.init(airport1);

　　通过实例的setoption()方法设置最上面的echarts图形。

var option = {
             title:{
                text:"机场销售图",
                 x:"日期",
                 y:"数值",
                 textAlign: "left"
             },
             tooltip:{
                 trigger: 'axis',
                 axisPointer: {
                     type: 'shadow'}
             },
             legend:{
                 data:['cnt','round']
             },
             grid:{
                 left: '3%',
                 right: '4%',
                 bottom: '3%',
                 containLabel: true
             },
             xAxis:{
                 type:'category',
                 data: date_list
             },
             yAxis:{
                type: "value"
             },
             series:[
                 {
                     name:"销售金额",
                     type:"bar",
                     emphasis: {
                         focus: 'series'
                     },
                     data: round
                 },
                 {
                   name: "销售数量",
                   type: "bar",
                   stack: "数量",
                     emphasis: {
                         focus: 'series'
                     },
                   data:cnt
                 }
             ]
         }
            my_box.setOption(option);

　　添加mybox1.on()函数，在函数中将mybox1.clear()，将原来的图进行清空。重写option内容然后再次调用setoption()即可。

　

 my_box1.on('click',(res)=>{
        axios.get("/airport/"+res.name).then((res)=>{
            date_list = [];
            round = [];
            cnt = [];
            for(var i = 0 ; i < res.data.length ; i++){
                date_list.push(res.data[i].dayId);
                round.push(res.data[i].round);
                cnt.push(res.data[i].cnt);
                my_box1.clear();
                var option = {
                    title:{
                        text:"机场销售图",
                        x:"日期",
                        y:"数值",
                        textAlign: "left"
                    },
                    tooltip:{
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'}
                    },
                    legend:{
                        data:['cnt','round']
                    },
                    grid:{
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis:{
                        type:'category',
                        data: date_list
                    },
                    yAxis:{
                        type: "value"
                    },
                    series:[
                        {
                            name:"销售金额",
                            type:"line",
                            emphasis: {
                                focus: 'series'
                            },
                            data: round
                        },
                        {
                            name: "销售数量",
                            type: "line",
                            stack: "数量",
                            emphasis: {
                                focus: 'series'
                            },
                            data:cnt
                        }
                    ]
                }
                my_box1.setOption(option);
            }
        })
    })