增加运行图客流量配置
This commit is contained in:
zyy
parent
3d3138b6a9
commit
83e74cc53b
@ -2,10 +2,10 @@ import { createMartPoint, createSeriesModel, createMarkLineModels, hexColor, con
|
||||
import store from '@/store/index_APP_TARGET';
|
||||
export default {
|
||||
/** 边缘高度*/
|
||||
EdgeHeight: 600,
|
||||
EdgeHeight: 600 / 3,
|
||||
|
||||
/** 间隔高度*/
|
||||
CoordMultiple: 1,
|
||||
CoordMultiple: 1 / 3,
|
||||
|
||||
/** 偏移时间*/
|
||||
TranslationTime: 60 * 60 * 2,
|
||||
@ -131,7 +131,6 @@ export default {
|
||||
if (index == 0 && train.stationTimeList[index].stationCode != train.stationTimeList[index + 1].stationCode ||
|
||||
index == train.stationTimeList.length - 2 && train.stationTimeList[index].secondTime != train.stationTimeList[index + 1].secondTime ||
|
||||
index > 0 && index < train.stationTimeList.length - 1) {
|
||||
// ${train.directionCode}
|
||||
const aa = `${train.tripNumber}`;
|
||||
opt.data.push([elem.secondTime, this.getCoordYByElem(stations, kmRangeCoordMap, elem, elem.right, false), elem.stationCode, aa]);
|
||||
}
|
||||
@ -142,7 +141,6 @@ export default {
|
||||
lastPoint = train.stationTimeList[idx - 1];
|
||||
nextPoint = service.tripNumberDataList[j + 1].stationTimeList[1];
|
||||
num = this.computedReentryNumber(train.tripNumber);
|
||||
// ${train.directionCode}
|
||||
const aa = `${train.tripNumber}`;
|
||||
opt.data.push([lastPoint.secondTime, this.getCoordYByElem(stations, kmRangeCoordMap, lastPoint, train.right, true, num), lastPoint.stationCode, aa]);
|
||||
opt.data.push([nextPoint.secondTime, this.getCoordYByElem(stations, kmRangeCoordMap, nextPoint, train.right, true, num), nextPoint.stationCode, aa]);
|
||||
@ -259,7 +257,7 @@ export default {
|
||||
initializeYaxis(stations) {
|
||||
return createMarkLineModels(stations, (elem) => {
|
||||
return this.EdgeHeight + elem.kmRange * this.CoordMultiple;
|
||||
});
|
||||
}, {yAxisIndex:0});
|
||||
},
|
||||
|
||||
/** 将后台数据转换为试图序列模型*/
|
||||
|
||||
@ -60,7 +60,7 @@ export function createSeriesModel(opt, lineStyle) {
|
||||
}
|
||||
|
||||
/** 创建标记横线*/
|
||||
export function createMarkLineModels(stations, computedYaxis) {
|
||||
export function createMarkLineModels(stations, computedYaxis, opt = {}) {
|
||||
const markLineModel = {};
|
||||
if (stations && stations.length) {
|
||||
markLineModel.type = 'line';
|
||||
@ -71,6 +71,7 @@ export function createMarkLineModels(stations, computedYaxis) {
|
||||
markLineModel.markLine.lineStyle = { color: '#B0C4DE', width: 0.5 };
|
||||
markLineModel.markLine.symbol = 'none';
|
||||
markLineModel.elements = [];
|
||||
Object.assign(markLineModel, opt);
|
||||
stations.forEach((elem, index) => {
|
||||
markLineModel.markLine.data.push(
|
||||
{
|
||||
|
||||
@ -245,6 +245,22 @@ export default {
|
||||
this.runPlanData, this.runSeries, { color: '#FF00DE', width: 2 }
|
||||
);
|
||||
const series = [...this.staticSeries, ...this.runSeries, ... this.selectSeries];
|
||||
// let index = 0;
|
||||
// this.stations.forEach((station, ii) => {
|
||||
// if (station.visible) {
|
||||
// index++;
|
||||
// series.push({
|
||||
// type: 'bar',
|
||||
// barGap: '-100%',
|
||||
// yAxisIndex: index,
|
||||
// barWidth: '3000%',
|
||||
// itemStyle: {
|
||||
// color: 'red'
|
||||
// },
|
||||
// data: [[29030, 50], [29060, 60], [29090, 20], [29120, 60], [29150, 80], [29180, 160], [29210, 50], [29240, 80], [29270, 30]]
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
this.myChart && this.myChart.setOption({series: series});
|
||||
},
|
||||
async loadChartPage() {
|
||||
@ -268,20 +284,6 @@ export default {
|
||||
async loadInitData() {
|
||||
this.myChart && this.myChart.showLoading();
|
||||
const option = {
|
||||
title: {
|
||||
text: '',
|
||||
left: 'center'
|
||||
},
|
||||
grid: {
|
||||
top: '30px',
|
||||
left: '120px',
|
||||
right: '40px',
|
||||
bottom: '65px',
|
||||
containLabel: true,
|
||||
backgroundColor: 'floralwhite'
|
||||
},
|
||||
toolbox: {
|
||||
},
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
trigger: 'item',
|
||||
@ -290,10 +292,14 @@ export default {
|
||||
formatter: this.axisTooltip,
|
||||
borderWidth: 1
|
||||
},
|
||||
grid: {
|
||||
right: '40px',
|
||||
left: '120px',
|
||||
height: '85%'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
@ -318,54 +324,55 @@ export default {
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#d14a61'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 'auto',
|
||||
formatter: this.yAxisLableFormat
|
||||
},
|
||||
axisPointer: {
|
||||
xAxisIndex: 'all',
|
||||
label: {
|
||||
formatter: this.yAxisPointFormat,
|
||||
backgroundColor: 'rgb(0,100,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
min: 0,
|
||||
max: 0
|
||||
},
|
||||
series: [],
|
||||
dataZoom: [
|
||||
yAxis: [
|
||||
{
|
||||
type: 'inside'
|
||||
},
|
||||
{
|
||||
fiterMode: 'filter',
|
||||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||||
handleSize: '80%',
|
||||
handleStyle: {
|
||||
color: '#fff',
|
||||
shadowBlur: 3,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
type: 'value',
|
||||
yAxisIndex: 0,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
bottom: '20px'
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#d14a61'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 'auto',
|
||||
formatter: this.yAxisLableFormat
|
||||
},
|
||||
axisPointer: {
|
||||
xAxisIndex: 'all',
|
||||
label: {
|
||||
formatter: this.yAxisPointFormat,
|
||||
backgroundColor: 'rgb(0,100,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [{
|
||||
type: 'inside'
|
||||
},
|
||||
{
|
||||
fiterMode: 'filter',
|
||||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||||
handleSize: '80%',
|
||||
handleStyle: {
|
||||
color: '#fff',
|
||||
shadowBlur: 3,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
bottom: '20px'
|
||||
}],
|
||||
series: [
|
||||
|
||||
]
|
||||
};
|
||||
await this.xAxisInit(option);
|
||||
@ -394,6 +401,23 @@ export default {
|
||||
option.dataZoom[0].startValue = option.dataZoom[1].startValue = startValue - offsetTime;
|
||||
option.dataZoom[0].endValue = option.dataZoom[1].endValue = startValue + offsetTime;
|
||||
option.series = [...this.staticSeries, ...this.runSeries, ...this.selectSeries];
|
||||
// let index = 0;
|
||||
// this.stations.forEach((station, ii) => {
|
||||
// if (station.visible) {
|
||||
// index++;
|
||||
// option.series.push({
|
||||
// type: 'bar',
|
||||
// barGap: '-100%',
|
||||
// yAxisIndex: index,
|
||||
// barWidth: '3000%',
|
||||
// itemStyle: {
|
||||
// color: 'red'
|
||||
// },
|
||||
// data: [[29030, 50], [29060, 60], [29090, 20], [29120, 60], [29150, 80], [29180, 160], [29210, 50], [29240, 80], [29270, 30]]
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
|
||||
this.myChart = echarts.init(document.getElementById(this.runPlanId));
|
||||
if (this.myChart) {
|
||||
this.myChart.setOption(option);
|
||||
@ -440,8 +464,20 @@ export default {
|
||||
},
|
||||
yAxisInit(option) {
|
||||
if (Object.keys(this.PlanConvert).length) {
|
||||
option.yAxis.min = this.PlanConvert.computedYaxisMinValue(this.stations);
|
||||
option.yAxis.max = this.PlanConvert.computedYaxisMaxValue(this.stations);
|
||||
option.yAxis[0].min = this.PlanConvert.computedYaxisMinValue(this.stations);
|
||||
option.yAxis[0].max = this.PlanConvert.computedYaxisMaxValue(this.stations);
|
||||
let index = 1;
|
||||
this.stations.forEach((station, ii) => {
|
||||
if (station.visible) {
|
||||
option.yAxis.push({
|
||||
type: 'value',
|
||||
min: option.yAxis[0].min - Math.floor(station.kmRange * this.PlanConvert.CoordMultiple + this.PlanConvert.EdgeHeight),
|
||||
max: Math.floor(option.yAxis[0].max - station.kmRange * this.PlanConvert.CoordMultiple) - this.PlanConvert.EdgeHeight,
|
||||
show: false,
|
||||
yAxisIndex : index++
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
axisTooltip(param) {
|
||||
|
||||
@ -507,8 +507,8 @@ export default {
|
||||
this.$emit('updateMapModel', models);
|
||||
this.oldPoint = JSON.parse(JSON.stringify(model.points));
|
||||
this.oldLeftSectionCode = model.leftSectionCode;
|
||||
this.oldRightSectionCode = model.rightSectionCode;
|
||||
this.field = '';
|
||||
this.oldRightSectionCode = model.rightSectionCode;
|
||||
this.field = '';
|
||||
} else {
|
||||
this.$message('还有属性未填写，修改未生效！');
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user