初次提交
This commit is contained in:
351
pages/tabbar/components/runChart/index.vue
Normal file
351
pages/tabbar/components/runChart/index.vue
Normal file
@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<zero-loading v-if="chartLoading" position="absolute"></zero-loading>
|
||||
<charts v-else :id="'pcChart'" :options="curve_option"></charts>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import charts from "@/components/charts/index";
|
||||
import {
|
||||
chartYIndex,
|
||||
beforeDayTime
|
||||
} from '@/common/common.js'
|
||||
export default {
|
||||
components: {
|
||||
charts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curve_option: {},
|
||||
stationId: null,
|
||||
name_data: [],
|
||||
color: ["#2D8CF0", "#19BE6B","#FF9900","#E46CBB"],
|
||||
colorList: [
|
||||
[{
|
||||
offset: 0.0,
|
||||
color: "rgba(45, 140, 240, 0.1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(25, 190, 107, 0.2)",
|
||||
},
|
||||
],
|
||||
[{
|
||||
offset: 0.0,
|
||||
color: "rgba(255, 153, 0, 0.1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(228, 108,187, 0.2)",
|
||||
},
|
||||
],
|
||||
],
|
||||
serviceList: [],
|
||||
time: [],
|
||||
chartLoading: false,
|
||||
nameArr: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
|
||||
},
|
||||
onShow() {
|
||||
console.log(123);
|
||||
this.time = beforeDayTime()
|
||||
this.GetRealtimeCurve()
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id) {
|
||||
this.stationId = val.id
|
||||
this.time = beforeDayTime()
|
||||
this.GetRealtimeCurve()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getData(){
|
||||
this.time = beforeDayTime()
|
||||
this.GetRealtimeCurve()
|
||||
},
|
||||
async selectChartApi(val) {
|
||||
if (val && val.length) {
|
||||
this.chartLoading = false
|
||||
this.initCurveChart(val);
|
||||
} else {
|
||||
this.chartLoading = true
|
||||
//运行曲线
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetRealtimeCurve({
|
||||
beginTime: this.time[0],
|
||||
endTime: this.time[1],
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
this.chartLoading = false
|
||||
this.initCurveChart(res.data);
|
||||
resolve(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误:运行曲线");
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
async GetRealtimeCurve() {
|
||||
this.chartLoading = true
|
||||
//运行曲线
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicRealTimeCurve({
|
||||
beginTime: this.time[0],
|
||||
endTime: this.time[1],
|
||||
pageLocation: 'runChart',
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
this.selectChartApi(res.data);
|
||||
resolve(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误:运行曲线");
|
||||
});
|
||||
});
|
||||
},
|
||||
initCurveChart(val) {
|
||||
let x_data = []
|
||||
let valueArr = []
|
||||
this.nameArr = []
|
||||
if (val && val.length > 0) {
|
||||
val.forEach((item, index) => {
|
||||
valueArr.push(item.list)
|
||||
this.nameArr.push(item.name)
|
||||
})
|
||||
val[0].list.forEach((el) => {
|
||||
x_data.push(el.date)
|
||||
})
|
||||
const valueArr2 = []
|
||||
valueArr.forEach((item, index) => {
|
||||
const arr = []
|
||||
item.forEach((item2, index2) => {
|
||||
arr.push(item2.digital)
|
||||
valueArr2[index] = arr
|
||||
})
|
||||
})
|
||||
this.serviceList = []
|
||||
valueArr2.forEach((item, index) => {
|
||||
this.serviceList.push({
|
||||
data: item,
|
||||
type: 'line',
|
||||
name: this.nameArr[index],
|
||||
showSymbol: false,
|
||||
yAxisIndex: chartYIndex(val[index]),
|
||||
color: this.color[index],
|
||||
lineStyle: {
|
||||
color: this.color[index]
|
||||
},
|
||||
areaStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
this.colorList[index]
|
||||
),
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
} else {
|
||||
this.serviceList = [];
|
||||
this.nameArr = [];
|
||||
x_data = []
|
||||
}
|
||||
this.curve_option = {
|
||||
color: ["#2D8CF0", "#19BE6B","#FF9900","#E46CBB"],
|
||||
grid: {
|
||||
left: "17%",
|
||||
right: "13%",
|
||||
top: "15%",
|
||||
bottom: "25%",
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
textStyle: {
|
||||
textShadowBlur: 10, // 重点
|
||||
textShadowColor: 'transparent', // 重点
|
||||
},
|
||||
axisPointer: {},
|
||||
confine: true,
|
||||
position: function(point, params, dom, rect, size) {
|
||||
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
|
||||
// 提示框位置
|
||||
var x = 0; // x坐标位置
|
||||
var y = 0; // y坐标位置
|
||||
|
||||
// 当前鼠标位置
|
||||
var pointX = point[0];
|
||||
var pointY = point[1];
|
||||
|
||||
// 外层div大小
|
||||
// var viewWidth = size.viewSize[0];
|
||||
// var viewHeight = size.viewSize[1];
|
||||
|
||||
// 提示框大小
|
||||
var boxWidth = size.contentSize[0];
|
||||
var boxHeight = size.contentSize[1];
|
||||
|
||||
// boxWidth > pointX 说明鼠标左边放不下提示框
|
||||
if (boxWidth > pointX) {
|
||||
x = 5; // 自己定个x坐标值，以防出屏
|
||||
y -= 15; // 防止点被覆盖住，可根据情况自行调节
|
||||
} else {
|
||||
// 左边放的下
|
||||
x = pointX - boxWidth - 15;
|
||||
}
|
||||
|
||||
// boxHeight > pointY 说明鼠标上边放不下提示框
|
||||
if (boxHeight + 20 > pointY) {
|
||||
y = pointY + 15;
|
||||
} else if (boxHeight > pointY) {
|
||||
y = 5;
|
||||
} else {
|
||||
// 上边放得下
|
||||
y += pointY - boxHeight;
|
||||
}
|
||||
return [x, y];
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'horizontal',
|
||||
icon: "rect",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
textStyle: {
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: x_data,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#A3A3A3",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#A3A3A3",
|
||||
formatter: function(params) {
|
||||
let newParamsName = "";
|
||||
const paramsNameNumber = params.length; // 文字总长度
|
||||
const provideNumber = 11; //一行显示几个字
|
||||
const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
||||
if (paramsNameNumber > provideNumber) {
|
||||
for (let p = 0; p < rowNumber; p++) {
|
||||
const start = p * provideNumber;
|
||||
const end = start + provideNumber;
|
||||
const tempStr =
|
||||
p === rowNumber - 1 ?
|
||||
params.substring(start, paramsNameNumber) :
|
||||
params.substring(start, end) + "\n";
|
||||
newParamsName += tempStr;
|
||||
}
|
||||
} else {
|
||||
newParamsName = params;
|
||||
}
|
||||
return newParamsName;
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [{
|
||||
name: this.$t('homePage.home.power'),
|
||||
nameTextStyle: {
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 20],
|
||||
},
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#A3A3A3",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#A3A3A3",
|
||||
},
|
||||
|
||||
min: function(value) {
|
||||
return Math.floor(
|
||||
(Math.abs(value.min) < value.max ?
|
||||
-value.max * 1.05 :
|
||||
value.min * 1.05
|
||||
).toFixed(2)
|
||||
);
|
||||
},
|
||||
max: function(value) {
|
||||
return Math.ceil(
|
||||
(Math.abs(value.min) < value.max ?
|
||||
value.max * 1.05 :
|
||||
-value.min * 1.05
|
||||
).toFixed(2)
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "SOC(%)",
|
||||
nameTextStyle: {
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 30],
|
||||
},
|
||||
type: "value",
|
||||
max: 100,
|
||||
min: -100,
|
||||
ming: 0,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#A3A3A3",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#A3A3A3",
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: this.serviceList,
|
||||
};
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 500rpx;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user