增加运行图客流量配置

This commit is contained in:
zyy 2020-11-18 13:15:28 +08:00
parent 3d3138b6a9
commit 83e74cc53b
4 changed files with 105 additions and 70 deletions

View File

@ -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});
},
/** 将后台数据转换为试图序列模型*/

View File

@ -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(
{

View File

@ -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,8 +324,10 @@ export default {
}
}
],
yAxis: {
yAxis: [
{
type: 'value',
yAxisIndex: 0,
splitLine: {
show: false
},
@ -344,13 +352,10 @@ export default {
backgroundColor: 'rgb(0,100,0,0.5)',
color: 'white'
}
},
min: 0,
max: 0
},
series: [],
dataZoom: [
{
}
}
],
dataZoom: [{
type: 'inside'
},
{
@ -365,7 +370,9 @@ export default {
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) {