|
@@ -14,7 +14,7 @@
|
|
|
watch: {
|
|
|
drawData: {
|
|
|
handler(newValue, oldValue) {
|
|
|
- this.draw(newValue,newValue.Fan1, newValue.Fan2,newValue.Fan3,newValue.Fan4,newValue.Fan5, newValue.xData)
|
|
|
+ this.draw(newValue,newValue.title, newValue.data, newValue.xData)
|
|
|
},
|
|
|
deep: true
|
|
|
},
|
|
@@ -53,7 +53,7 @@
|
|
|
this.chart = null
|
|
|
},
|
|
|
methods: {
|
|
|
- draw(newValue,Fan1, Fan2,Fan3,Fan4,Fan5,xData) {
|
|
|
+ draw(newValue,title,data,xData) {
|
|
|
this.chart = echarts.init(document.getElementById('rpcharts'))
|
|
|
var option = {
|
|
|
backgroundColor: 'transparent',
|
|
@@ -142,153 +142,38 @@
|
|
|
}
|
|
|
}
|
|
|
}],
|
|
|
- series: [{
|
|
|
- name: '机组1',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.sj,
|
|
|
- borderColor: 'rgba(219,50,51,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: Fan1
|
|
|
- }]
|
|
|
+ series: []
|
|
|
}
|
|
|
|
|
|
- option.legend.data = ['机组1','机组2','机组3','机组4','机组5']
|
|
|
- option.series.push({
|
|
|
- name: '机组2',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.kygl,
|
|
|
- borderColor: 'rgba(219,50,51,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: Fan2
|
|
|
- },{
|
|
|
- name: '机组3',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.llgl,
|
|
|
- borderColor: 'rgba(219,50,51,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: Fan3
|
|
|
- },{
|
|
|
- name: '机组4',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.line6,
|
|
|
- borderColor: 'rgba(219,50,51,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: Fan4
|
|
|
- },{
|
|
|
- name: '机组5',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.ybjf,
|
|
|
- borderColor: 'rgba(219,50,51,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: Fan5
|
|
|
- },)
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // if(newValue.hasChartLine == 'true'){
|
|
|
- // var carr = ["#8A2BE2","#FF8C00","#0000E3","#85144b","#A8FF24"]
|
|
|
- //
|
|
|
- // var arr = newValue.powerChartLine
|
|
|
- // for (let i = 0; i < arr.length; i++) {
|
|
|
- // option.legend.data.push(arr[i].title)
|
|
|
- // option.series.push({
|
|
|
- // name: arr[i].title,
|
|
|
- // type: 'line',
|
|
|
- // smooth: true,
|
|
|
- // symbol: 'circle',
|
|
|
- // symbolSize: 5,
|
|
|
- // showSymbol: false,
|
|
|
- // lineStyle: {
|
|
|
- // normal: {
|
|
|
- // width: 2
|
|
|
- // }
|
|
|
- // },
|
|
|
- //
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- //
|
|
|
- // color: carr[i],
|
|
|
- // borderColor: 'rgba(219,50,51,0.2)',
|
|
|
- // borderWidth: 12
|
|
|
- // }
|
|
|
- // },
|
|
|
- // data: newValue[arr[i].field]
|
|
|
- // })
|
|
|
- // }
|
|
|
- //
|
|
|
- // }
|
|
|
+ var titles = new Array();
|
|
|
+ titles = title;
|
|
|
+ var datas = new Array();
|
|
|
+ datas = data;
|
|
|
+ var carr = ["#8A2BE2","#FF8C00","#0000E3","#85144b","#A8FF24","#983680","#5cb3cc","#57c3c2","#2bae85","#bacf65"]
|
|
|
+ for (let i = 0; i < titles.length; i++) {
|
|
|
+ option.legend.data.push(titles[i])
|
|
|
+ option.series.push({
|
|
|
+ name: titles[i],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 5,
|
|
|
+ showSymbol: false,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: carr[i],
|
|
|
+ borderColor: 'rgba(219,50,51,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: datas[i]
|
|
|
+ })
|
|
|
+ }
|
|
|
this.chart.setOption(option,true)
|
|
|
},
|
|
|
}
|