|
|
@@ -77,76 +77,69 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
msgFormSon: null,
|
|
|
+ data: [],
|
|
|
+ Data_Name: [],
|
|
|
+ series_all: [],
|
|
|
};
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.initChart();
|
|
|
- // console.log(this.defaul_tTime);
|
|
|
- });
|
|
|
- },
|
|
|
+ mounted() {},
|
|
|
beforeUnmount() {
|
|
|
window.removeEventListener("resize", this.chart);
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ "$store.state.HistoricalCurve"() {
|
|
|
+ // this.chart.resize();
|
|
|
+ this.initChart();
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
//历史趋势折线图
|
|
|
initChart() {
|
|
|
var chart = echarts.init(this.$refs.main);
|
|
|
var option;
|
|
|
- let data = [
|
|
|
- "2020-01-01 14:00:00",
|
|
|
- "2020-01-01 15:00:00",
|
|
|
- "2020-01-01 16:00:00",
|
|
|
- "2020-01-01 17:00:00",
|
|
|
- "2020-01-01 18:00:00",
|
|
|
- "2020-01-01 19:00:00",
|
|
|
- "2020-01-01 20:00:00",
|
|
|
- "2020-01-01 21:00:00",
|
|
|
- "2020-01-01 22:00:00",
|
|
|
- "2020-01-01 23:00:00",
|
|
|
- "2020-01-02 01:05:00",
|
|
|
- "2020-01-02 01:10:00",
|
|
|
- "2020-01-02 01:15:00",
|
|
|
- "2020-01-02 01:20:00",
|
|
|
- "2020-01-02 01:25:00",
|
|
|
- "2020-01-02 01:30:00",
|
|
|
- "2020-01-02 01:35:00",
|
|
|
- "2020-01-02 01:40:00",
|
|
|
- "2020-01-02 01:45:00",
|
|
|
- "2020-01-02 01:50:00",
|
|
|
- "2020-01-02 01:55:00",
|
|
|
- "2020-01-02 02:00:00",
|
|
|
- ];
|
|
|
- let arr = [
|
|
|
- 0, 0, 0, 0.03, 0, 0, 0, 0, 0, 0, 0, 0.005, 0, 0, 0, 0.03, 0, 0, 0, 0, 0,
|
|
|
- 0, 0, 0.005, 0, 0, 0, 0.03, 0, 0, 0, 0, 0, 0, 0, 0.005,
|
|
|
- ].map((val, ind) => {
|
|
|
- return [data[ind], val];
|
|
|
- });
|
|
|
- // console.log(arr);
|
|
|
- option = {
|
|
|
- // title: {
|
|
|
- // // text: "折线图堆叠",
|
|
|
- // textStyle: {
|
|
|
- // color: "red",
|
|
|
- // fontSize: "12",
|
|
|
- // fontFamily: "fangsong",
|
|
|
- // fontWeight: "400",
|
|
|
- // fontStyle: "normal",
|
|
|
- // },
|
|
|
+ var time;
|
|
|
+ this.series_all = [];
|
|
|
+ this.data = [];
|
|
|
+ this.Data_Name = [];
|
|
|
|
|
|
- // // subtext: "副标题",
|
|
|
- // subtextStyle: {
|
|
|
- // color: "red",
|
|
|
- // },
|
|
|
+ var HistoricalCurve = this.$store.state.HistoricalCurve;
|
|
|
+ if (HistoricalCurve.length <= 0) {
|
|
|
+ time = this.$store.state.Time_Data; //将存储在store中的开始时间和结束时间存入变量time
|
|
|
+ time.map((val, ind) => {
|
|
|
+ this.data.push([val, 0]);
|
|
|
+ this.Data_Name = ["暂无数据"];
|
|
|
+ this.series_all = [
|
|
|
+ {
|
|
|
+ // smooth: true, //设置折线为圆滑曲线,false则有转折点
|
|
|
+ name: "暂无数据",
|
|
|
+ type: "line",
|
|
|
+ data: this.data,
|
|
|
+ itemStyle: this.itemStyle[ind],
|
|
|
+ symbolSize: 5,
|
|
|
+ symbol: "circle",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ return;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ HistoricalCurve.map((val, ind) => {
|
|
|
+ this.Data_Name.push(val.name);
|
|
|
+ this.series_all.push({
|
|
|
+ // smooth: true, //设置折线为圆滑曲线,false则有转折点
|
|
|
+ name: val.name,
|
|
|
+ type: "line",
|
|
|
+ data: val.arr,
|
|
|
+ itemStyle: this.itemStyle[ind],
|
|
|
+ symbolSize: 5,
|
|
|
+ symbol: "circle",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log(this.series_all);
|
|
|
|
|
|
- // align: "center",
|
|
|
- // x: "right",
|
|
|
- // y: "top",
|
|
|
- // textAlign: "center",
|
|
|
- // padding: [5, 10, 5, 10],
|
|
|
- // itemGap: "4",
|
|
|
- // },
|
|
|
+ option = {
|
|
|
tooltip: {
|
|
|
backgroundColor: "rgba(0, 244, 253, 0.1)",
|
|
|
borderColor: "rgba(0, 244, 253, 0.3)",
|
|
|
@@ -157,18 +150,19 @@ export default {
|
|
|
// item 主要在散点图，饼图等无类目轴的图表中使用。 // axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用 //none 什么都不触发
|
|
|
axisPointer: {
|
|
|
// 坐标轴指示器配置项。
|
|
|
- type: "cross",
|
|
|
+ // type: "cross",
|
|
|
// line 直线指示器 / 'shadow' 阴影指示器 /'none' 无指示器 /'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
|
|
|
},
|
|
|
formatter: function (params) {
|
|
|
// console.log(params);
|
|
|
- var res = params[0].name;
|
|
|
+ var res = params[0].axisValueLabel;
|
|
|
+
|
|
|
for (let i in params) {
|
|
|
res += `
|
|
|
<div style="display:flex">
|
|
|
<div style="width:10px;height:10px;background:${params[i].borderColor};border-radius: 10px;margin:10px 0;"></div>
|
|
|
- <div style="padding:4px 0px 0px 10px;">${params[i].seriesName}</div>
|
|
|
- <div style="padding:4px 0px 0px 40px;">${params[i].data}</div>
|
|
|
+ <div style="padding:4px 0px 0px 10px;">${params[i].seriesName} :</div>
|
|
|
+ <div style="padding:4px 0px 0px 10px;">${params[i].data[1]}</div>
|
|
|
</div>`; //可以在这个方法中做改变
|
|
|
}
|
|
|
|
|
|
@@ -181,7 +175,7 @@ export default {
|
|
|
right: "auto",
|
|
|
left: "center",
|
|
|
padding: [5, 10, 18, 10],
|
|
|
- data: ["A相电流", "B相电流", "C相电流"],
|
|
|
+ data: this.Data_Name,
|
|
|
itemGap: 70, // 图例间隔
|
|
|
itemWidth: 40, // 图例宽度
|
|
|
itemHeight: 15, //高度
|
|
|
@@ -192,7 +186,6 @@ export default {
|
|
|
"font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;",
|
|
|
padding: [5, 10, 18, 10],
|
|
|
},
|
|
|
-
|
|
|
formatter: function (name) {
|
|
|
return name;
|
|
|
},
|
|
|
@@ -208,7 +201,7 @@ export default {
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "time",
|
|
|
- // boundaryGap: false,
|
|
|
+ boundaryGap: false,
|
|
|
nameTextStyle: {
|
|
|
// 名称样式
|
|
|
fontSize: 12,
|
|
|
@@ -217,20 +210,20 @@ export default {
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: this.color_XY,
|
|
|
+ color: "rgba(0, 244, 253, 0.1)",
|
|
|
},
|
|
|
// symbol: ["none", "arrow"], //轴线两边的箭头
|
|
|
symbolSize: [8, 12],
|
|
|
},
|
|
|
- interval: 2,
|
|
|
axisLabel: {
|
|
|
+ showMaxLabel: true,
|
|
|
textStyle: {
|
|
|
color: "#fff", //坐标值得具体的颜色
|
|
|
},
|
|
|
// formatter: '{yyyy}-{MM}-{dd}'
|
|
|
formatter: {
|
|
|
year: "{yyyy}",
|
|
|
- month: "{MMM}",
|
|
|
+ month: "{yyyy} {MM}-{dd}",
|
|
|
day: "{MM}-{dd} {hh}:{mm}",
|
|
|
hour: "{MM}-{dd} {HH}:{mm}",
|
|
|
minute: "{HH}:{mm}",
|
|
|
@@ -242,7 +235,6 @@ export default {
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
- max: 0.15,
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
// 使用深浅的间隔色
|
|
|
@@ -255,48 +247,10 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- // smooth: true, //设置折线为圆滑曲线,false则有转折点
|
|
|
- name: "A相电流",
|
|
|
- type: "line",
|
|
|
- data: arr,
|
|
|
- itemStyle: this.itemStyle[0],
|
|
|
- symbolSize: 10,
|
|
|
- symbol: "circle",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "B相电流",
|
|
|
- type: "line",
|
|
|
- data: [
|
|
|
- 0.015, 0.01, 0.015, 0.012, 0.01, 0.012, 0.01, 0.01, 0.06, 0.04,
|
|
|
- 0.007, 0, 0.015, 0.01, 0.015, 0.012, 0.01, 0.012, 0.01, 0.01,
|
|
|
- 0.06, 0.04, 0.007, 0,
|
|
|
- ].map((val, ind) => {
|
|
|
- return [data[ind], val];
|
|
|
- }), //0.01,
|
|
|
- itemStyle: this.itemStyle[1],
|
|
|
- symbolSize: 10,
|
|
|
- symbol: "circle",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "C相电流",
|
|
|
- type: "line",
|
|
|
- data: [
|
|
|
- 0.02, 0, 0.03, 0.04, 0.03, 0.04, 0.02, 0.03, 0.009, 0.03, 0.006,
|
|
|
- 0.008, 0.02, 0, 0.03, 0.04, 0.03, 0.04, 0.02, 0.03, 0.009, 0.03,
|
|
|
- 0.006, 0.008,
|
|
|
- ].map((val, ind) => {
|
|
|
- return [data[ind], val];
|
|
|
- }), //0.005,
|
|
|
- itemStyle: this.itemStyle[2],
|
|
|
- symbolSize: 10,
|
|
|
- symbol: "circle",
|
|
|
- },
|
|
|
- ],
|
|
|
+ series: this.series_all,
|
|
|
};
|
|
|
|
|
|
- chart.setOption(option);
|
|
|
+ chart.setOption(option,true);
|
|
|
window.addEventListener("resize", () => {
|
|
|
chart.resize();
|
|
|
});
|
fanghuisheng