这周完成内容——数据可视化操作之数据下钻
数据下钻操作很简单，步骤简单如下：
首先创建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);
}
})
})
标签：总结,cnt,每周,series,data,res,type,round From： https://www.cnblogs.com/20203923rensaihang/p/16797475.html