|
|
@@ -368,7 +368,9 @@ const leftContent = ref({
|
|
|
name: '客运量',
|
|
|
option: {
|
|
|
grid: {
|
|
|
- containLabel: true
|
|
|
+ containLabel: true,
|
|
|
+ top: 100,
|
|
|
+ bottom: 100
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
@@ -377,10 +379,8 @@ const leftContent = ref({
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
- top: 10,
|
|
|
- right: 10,
|
|
|
- itemWidth: 18,
|
|
|
- itemHeight: 18,
|
|
|
+ top: 45,
|
|
|
+ lett: 'center',
|
|
|
itemGap: 30,
|
|
|
textStyle: {
|
|
|
fontSize: 18,
|
|
|
@@ -388,15 +388,14 @@ const leftContent = ref({
|
|
|
}
|
|
|
},
|
|
|
xAxis: {
|
|
|
- // name: "班级",
|
|
|
triggerEvent: true,
|
|
|
data: [
|
|
|
- '一部一车间',
|
|
|
- '一部二车间',
|
|
|
- '二部一车间',
|
|
|
- '二部三车间',
|
|
|
- '新能源',
|
|
|
- '四部一车间'
|
|
|
+ '1月',
|
|
|
+ '2月',
|
|
|
+ '3月',
|
|
|
+ '4月',
|
|
|
+ '5月',
|
|
|
+ '6月'
|
|
|
],
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
@@ -466,7 +465,7 @@ const leftContent = ref({
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
- name: 'test1',
|
|
|
+ name: '客运量',
|
|
|
type: 'bar',
|
|
|
silent: true,
|
|
|
itemStyle: {
|
|
|
@@ -474,19 +473,9 @@ const leftContent = ref({
|
|
|
},
|
|
|
barWidth: 30,
|
|
|
data: [ 200, 108, 200, 40, 210, 100 ]
|
|
|
- // label: {
|
|
|
- // show: true, // 显示标签
|
|
|
- // position: 'top', // 标签显示在柱状图的上方
|
|
|
- // fontSize: 14,
|
|
|
- // color: '#fff',
|
|
|
- // formatter: function (params) {
|
|
|
- // // 在标签文本后添加百分号
|
|
|
- // return params.value + '%';
|
|
|
- // },
|
|
|
- // },
|
|
|
},
|
|
|
{
|
|
|
- name: 'test2',
|
|
|
+ name: '同比增长率',
|
|
|
type: 'line',
|
|
|
yAxisIndex: 1, // 与第二个 y 轴关联
|
|
|
itemStyle: {
|
|
|
@@ -566,101 +555,105 @@ const leftContent = ref({
|
|
|
name: '客流排名',
|
|
|
option: {
|
|
|
tooltip: {
|
|
|
- show: false,
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow'
|
|
|
}
|
|
|
},
|
|
|
- legend: {
|
|
|
- show: false
|
|
|
- },
|
|
|
grid: {
|
|
|
- left: 0,
|
|
|
- right: 30,
|
|
|
+ top: 20,
|
|
|
+ left: 20,
|
|
|
+ bottom: 20,
|
|
|
+ right: 20,
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
- show: true,
|
|
|
type: 'value',
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: [ 'rgba(62, 113, 157, 0.5)' ]
|
|
|
- }
|
|
|
- },
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
- color: 'rgba(62, 113, 157, 0.5)'
|
|
|
+ color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- color: 'rgba(62, 113, 157, 1)'
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 18
|
|
|
}
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'category',
|
|
|
inverse: true,
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
axisTick: {
|
|
|
- show: true,
|
|
|
- alignWithLabel: true
|
|
|
+ alignWithLabel: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
},
|
|
|
- axisPointer: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- margin: 30
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
- data: datas.map((item) => item.name),
|
|
|
+ data: [ '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区' ],
|
|
|
axisLabel: {
|
|
|
- margin: 100,
|
|
|
- fontSize: 14,
|
|
|
- align: 'left',
|
|
|
+ fontSize: 18,
|
|
|
color: '#fff',
|
|
|
+ margin: 10,
|
|
|
rich: {
|
|
|
a1: {
|
|
|
- color: '#fff',
|
|
|
- backgroundColor: colorList[0],
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
+ backgroundColor: '#FFFF0050',
|
|
|
+ width: 30,
|
|
|
+ height: 28,
|
|
|
align: 'center',
|
|
|
- borderRadius: 10
|
|
|
+ borderRadius: 15,
|
|
|
+ fontSize: 18,
|
|
|
+ borderColor: '#FFFF00',
|
|
|
+ borderType: 'solid',
|
|
|
+ borderWidth: 1,
|
|
|
+ padding: [ 2, 0, 0, 0 ]
|
|
|
},
|
|
|
a2: {
|
|
|
- color: '#fff',
|
|
|
- backgroundColor: colorList[1],
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
+ backgroundColor: '#F2F2F250',
|
|
|
+ width: 30,
|
|
|
+ height: 28,
|
|
|
align: 'center',
|
|
|
- borderRadius: 10
|
|
|
+ borderRadius: 15,
|
|
|
+ fontSize: 18,
|
|
|
+ borderColor: '#F2F2F2',
|
|
|
+ borderType: 'solid',
|
|
|
+ borderWidth: 1,
|
|
|
+ padding: [ 2, 0, 0, 0 ]
|
|
|
},
|
|
|
a3: {
|
|
|
- color: '#fff',
|
|
|
- backgroundColor: colorList[2],
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
+ backgroundColor: '#FAAD0E50',
|
|
|
+ width: 30,
|
|
|
+ height: 28,
|
|
|
align: 'center',
|
|
|
- borderRadius: 10
|
|
|
+ borderRadius: 15,
|
|
|
+ fontSize: 18,
|
|
|
+ borderColor: '#FAAD0E',
|
|
|
+ borderType: 'solid',
|
|
|
+ borderWidth: 1,
|
|
|
+ padding: [ 2, 0, 0, 0 ]
|
|
|
},
|
|
|
b: {
|
|
|
- color: '#fff',
|
|
|
- backgroundColor: colorList[3],
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
+ backgroundColor: '#00FFFF50',
|
|
|
+ width: 30,
|
|
|
+ height: 28,
|
|
|
align: 'center',
|
|
|
- borderRadius: 10
|
|
|
+ borderRadius: 15,
|
|
|
+ fontSize: 18,
|
|
|
+ borderColor: '#00FFFF',
|
|
|
+ borderType: 'solid',
|
|
|
+ borderWidth: 1,
|
|
|
+ padding: [ 2, 0, 0, 0 ]
|
|
|
}
|
|
|
},
|
|
|
- formatter: (params: string) => {
|
|
|
- let index = datas.map((item) => item.name).indexOf(params) as number
|
|
|
- index += 1
|
|
|
- if (index - 1 < 3) {
|
|
|
- return `{a${index}|${index}} ${params}`
|
|
|
+ formatter: (params: string, _id:number) => {
|
|
|
+ const id = _id + 1
|
|
|
+ if (_id < 3) {
|
|
|
+ return `{a${id}|${id}} ${params}`
|
|
|
}
|
|
|
- return `{b|${index}} ${params}`
|
|
|
+ return `{b|${id}} ${params}`
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -669,7 +662,7 @@ const leftContent = ref({
|
|
|
z: 2,
|
|
|
name: 'value',
|
|
|
type: 'bar',
|
|
|
- barWidth: 8,
|
|
|
+ barWidth: 25,
|
|
|
zlevel: 1,
|
|
|
data: datas.map((item, i) => ({
|
|
|
value: item.value,
|
|
|
@@ -690,7 +683,7 @@ const leftContent = ref({
|
|
|
show: true,
|
|
|
position: 'inside',
|
|
|
color: '#fff',
|
|
|
- fontSize: 14
|
|
|
+ fontSize: 16
|
|
|
},
|
|
|
itemStyle: {
|
|
|
borderRadius: [ 0, 15, 15, 0 ]
|
|
|
@@ -703,101 +696,105 @@ const leftContent = ref({
|
|
|
name: '线路客流排名',
|
|
|
option: {
|
|
|
tooltip: {
|
|
|
- show: false,
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow'
|
|
|
}
|
|
|
},
|
|
|
- legend: {
|
|
|
- show: false
|
|
|
- },
|
|
|
grid: {
|
|
|
- left: 0,
|
|
|
- right: 30,
|
|
|
+ top: 20,
|
|
|
+ left: 20,
|
|
|
+ bottom: 20,
|
|
|
+ right: 20,
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
- show: true,
|
|
|
type: 'value',
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: [ 'rgba(62, 113, 157, 0.5)' ]
|
|
|
- }
|
|
|
- },
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
- color: 'rgba(62, 113, 157, 0.5)'
|
|
|
+ color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- color: 'rgba(62, 113, 157, 1)'
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 18
|
|
|
}
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'category',
|
|
|
inverse: true,
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
axisTick: {
|
|
|
- show: true,
|
|
|
- alignWithLabel: true
|
|
|
+ alignWithLabel: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
},
|
|
|
- axisPointer: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- margin: 30
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
- data: datas.map((item) => item.name),
|
|
|
+ data: [ '1路(45689)', '2路(45689)', '3路(45689)', '4路(45689)', '5路(45689)', '6路(45689)', '7路(45689)', '8路(45689)' ],
|
|
|
axisLabel: {
|
|
|
- margin: 100,
|
|
|
- fontSize: 14,
|
|
|
- align: 'left',
|
|
|
+ fontSize: 18,
|
|
|
color: '#fff',
|
|
|
+ margin: 20,
|
|
|
rich: {
|
|
|
a1: {
|
|
|
- color: '#fff',
|
|
|
- backgroundColor: colorList[0],
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
+ backgroundColor: '#FFFF0050',
|
|
|
+ width: 30,
|
|
|
+ height: 28,
|
|
|
align: 'center',
|
|
|
- borderRadius: 10
|
|
|
+ borderRadius: 15,
|
|
|
+ fontSize: 18,
|
|
|
+ borderColor: '#FFFF00',
|
|
|
+ borderType: 'solid',
|
|
|
+ borderWidth: 1,
|
|
|
+ padding: [ 2, 0, 0, 0 ]
|
|
|
},
|
|
|
a2: {
|
|
|
- color: '#fff',
|
|
|
- backgroundColor: colorList[1],
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
+ backgroundColor: '#F2F2F250',
|
|
|
+ width: 30,
|
|
|
+ height: 28,
|
|
|
align: 'center',
|
|
|
- borderRadius: 10
|
|
|
+ borderRadius: 15,
|
|
|
+ fontSize: 18,
|
|
|
+ borderColor: '#F2F2F2',
|
|
|
+ borderType: 'solid',
|
|
|
+ borderWidth: 1,
|
|
|
+ padding: [ 2, 0, 0, 0 ]
|
|
|
},
|
|
|
a3: {
|
|
|
- color: '#fff',
|
|
|
- backgroundColor: colorList[2],
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
+ backgroundColor: '#FAAD0E50',
|
|
|
+ width: 30,
|
|
|
+ height: 28,
|
|
|
align: 'center',
|
|
|
- borderRadius: 10
|
|
|
+ borderRadius: 15,
|
|
|
+ fontSize: 18,
|
|
|
+ borderColor: '#FAAD0E',
|
|
|
+ borderType: 'solid',
|
|
|
+ borderWidth: 1,
|
|
|
+ padding: [ 2, 0, 0, 0 ]
|
|
|
},
|
|
|
b: {
|
|
|
- color: '#fff',
|
|
|
- backgroundColor: colorList[3],
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
+ backgroundColor: '#00FFFF50',
|
|
|
+ width: 30,
|
|
|
+ height: 28,
|
|
|
align: 'center',
|
|
|
- borderRadius: 10
|
|
|
+ borderRadius: 15,
|
|
|
+ fontSize: 18,
|
|
|
+ borderColor: '#00FFFF',
|
|
|
+ borderType: 'solid',
|
|
|
+ borderWidth: 1,
|
|
|
+ padding: [ 2, 0, 0, 0 ]
|
|
|
}
|
|
|
},
|
|
|
- formatter: (params: string) => {
|
|
|
- let index = datas.map((item) => item.name).indexOf(params) as number
|
|
|
- index += 1
|
|
|
- if (index - 1 < 3) {
|
|
|
- return `{a${index}|${index}} ${params}`
|
|
|
+ formatter: (params: string, _id:number) => {
|
|
|
+ const id = _id + 1
|
|
|
+ if (_id < 3) {
|
|
|
+ return `{a${id}|${id}} ${params}`
|
|
|
}
|
|
|
- return `{b|${index}} ${params}`
|
|
|
+ return `{b|${id}} ${params}`
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -806,7 +803,7 @@ const leftContent = ref({
|
|
|
z: 2,
|
|
|
name: 'value',
|
|
|
type: 'bar',
|
|
|
- barWidth: 8,
|
|
|
+ barWidth: 25,
|
|
|
zlevel: 1,
|
|
|
data: datas.map((item, i) => ({
|
|
|
value: item.value,
|
|
|
@@ -827,7 +824,7 @@ const leftContent = ref({
|
|
|
show: true,
|
|
|
position: 'inside',
|
|
|
color: '#fff',
|
|
|
- fontSize: 14
|
|
|
+ fontSize: 16
|
|
|
},
|
|
|
itemStyle: {
|
|
|
borderRadius: [ 0, 15, 15, 0 ]
|
