option = {
grid: {
top: 84,
right: 20,
bottom: 45,
left: 22,
containLabel: true
},
legend: [
{
data: [
{
name: "客流量",
icon: "rect",
textStyle: {
color: '#000'
},
itemStyle: {
color: '#44D7B6',
}
},
],
itemWidth: 40,
itemHeight: 14,
top: "1%",
right: "25%",
textStyle: {
color: "#fff",
// fontWeight: "normal",
fontSize: 20,
},
},
{
data: [
{
name: "餐饮",
icon: "rect",
textStyle: {
color: '#000'
},
itemStyle: {
color: '#F9C83F',
}
},
],
itemWidth: 40,
itemHeight: 4,
top: "1%",
right: "15%",
textStyle: {
color: "#fff",
// fontWeight: "normal",
fontSize: 20,
},
},
{
data: [
{
name: "住宿",
icon: "rect",
textStyle: {
color: '#000'
},
itemStyle: {
color: '#38A4F4'
}
},
],
itemWidth: 40,
itemHeight: 4,
top: "1%",
right: "5%",
textStyle: {
color: "#fff",
// fontWeight: "normal",
fontSize: 20,
},
},
{
top: "5.5%",
left: "65%",
textStyle: {
color: "#fff",
fontSize: 20,
fontFamily: "微软雅黑",
},
itemWidth: 20,
itemHeight: 20,
data: [
{
name: "3",
icon: "rect",
},
],
},
],
// legend: {
// data: [
// {
// name: '客流量',
// textStyle: {
// color: '#000'
// },
// itemStyle: {
// color: '#44D7B6',
// borderWidth:10,
// borderColor:'#44D7B6'
// }
// },
// {
// name: '餐饮',
// textStyle: {
// color: '#000'
// },
// itemStyle: {
// color: '#F9C83F'
// }
// },
// {
// name: '住宿',
// textStyle: {
// color: '#000'
// },
// itemStyle: {
// color: '#38A4F4'
// }
// }
// ],
// icon: 'rect',
// itemWidth: 40,
// itemHeight: 1,
// itemGap: 40,
// top: 20,
// right:40
// },
dataZoom: [
{
show: true,
realtime: true,
height:6,
start: 0,
end: 80,
},
],
xAxis: {
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
axisLabel: {
color: '#000',
interval: index => [0, 9, 19, 29].includes(index)
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(42, 236, 255, 0.44)',
width: 1.5
}
}
},
yAxis: [
{
type: 'value',
splitNumber: 4,
axisLabel: {
color: '#000'
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(42, 236, 255, 0.44)',
width: 1.5
}
},
splitLine: {
lineStyle: {
color: 'rgba(0,0,0,0.36)',
type: 'dashed'
}
},
name: '（万）',
nameGap: 18,
nameTextStyle: {
fontSize: 10,
color: '#000',
padding: [0, 0, 0, -30]
}
},
{
type: 'value',
splitNumber: 2,
splitLine: {
show: false
},
axisLabel: {
color: '#000'
},
name: '（万）',
nameGap: 18,
nameTextStyle: {
fontSize: 10,
color: '#000'
}
}
],
series: [
{
name: '客流量',
yAxisIndex: 0,
type: 'bar',
data: [100, 90, 120, 135, 70, 127, 150, 180, 230, 250, 127, 150, 180, 80, 120, 135, 70, 70, 230, 250, 160, 146, 173, 249, 180, 80, 70, 230, 127, 150, 180],
itemStyle: {
normal: {
color: '#44D7B6'
}
}
},
{
name: '餐饮',
yAxisIndex: 1,
type: 'line',
data: [1, 1.2, 2.2, 1.6, 1.6, 2.8, 1, 2, 2.2, 1.6, 1.3, 1.5, 1, 2, 2.2, 1.6, 1, 2, 2.2, 1.6, 2.8, 1.8, 1.2, 1.4, 2.2, 1.6, 2.8, 1.4, 1.9, 1.4, 1.5],
symbol: 'none',
lineStyle: {
color: '#F9C83F'
},
},
{
name: '住宿',
yAxisIndex: 1,
type: 'line',
data: [1, 2.2, 3.2, 3.6, 4.6, 2.8, 2.8, 4, 5.2, 3.6, 2.3, 2.5, 2, 3, 4.2, 2.6, 3, 4, 4.2, 3.6, 3.8, 3.8, 2.2, 2.4, 4.2, 2.6, 2.8, 4.4, 3.9, 2.4, 2.5],
symbol: 'none',
lineStyle: {
color: '#38A4F4'
},
}
]
}