|
|
@@ -1,9 +1,20 @@
|
|
|
<template>
|
|
|
<div class="data-curve-module">
|
|
|
- <common-title title="实时曲线"></common-title>
|
|
|
- <div class="visualization-common-border">
|
|
|
+ <!-- <common-title title="实时曲线"></common-title>
|
|
|
+ <div class="visualization-common-border" @click="showModal"> -->
|
|
|
<div ref="dataCurve" class="h100"></div>
|
|
|
- </div>
|
|
|
+ <!-- </div>
|
|
|
+ <j-modal
|
|
|
+ title="实时曲线"
|
|
|
+ :visible="visible"
|
|
|
+ @cancel="visible=false"
|
|
|
+ cancelText="关闭"
|
|
|
+ class="u-modal-box">
|
|
|
+ <div ref="dataCurve1" class="h100"></div>
|
|
|
+ <template slot="footer">
|
|
|
+ <a-button @click="visible=false">关闭</a-button>
|
|
|
+ </template>
|
|
|
+ </j-modal> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -25,6 +36,8 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
+ // width: 1440,
|
|
|
+ visible: false,
|
|
|
uEcharts: null,
|
|
|
uOption: null,
|
|
|
legendData: [
|
|
|
@@ -57,10 +70,12 @@ export default {
|
|
|
mounted () {
|
|
|
this.$nextTick(() => {
|
|
|
this.initDataCurve()
|
|
|
+ this.refreshData(this.data)
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
initDataCurve(){
|
|
|
+ console.log(1111)
|
|
|
var _this = this
|
|
|
var maxa = Math.max.apply(null, this.fusheData)
|
|
|
var maxb = Math.max.apply(null, [...this.wenduData, ...this.shiduData])
|
|
|
@@ -287,6 +302,203 @@ export default {
|
|
|
},
|
|
|
]
|
|
|
});
|
|
|
+ },
|
|
|
+ showModal(){
|
|
|
+ this.visible = true
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ var _this = this
|
|
|
+ var maxa = Math.max.apply(null, this.fusheData)
|
|
|
+ var maxb = Math.max.apply(null, [...this.wenduData, ...this.shiduData])
|
|
|
+ var uEcharts = echarts.init(this.$refs.dataCurve1);
|
|
|
+ var uOption = {
|
|
|
+ color: ['rgb(255, 0, 255)', 'rgb(255, 105, 5)', 'rgb(91, 255, 255)'], // legend对应颜色
|
|
|
+ grid: {
|
|
|
+ top: '80',
|
|
|
+ left: '46',
|
|
|
+ bottom: '40'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisTick: { show: false }, // 横坐标刻度
|
|
|
+ boundaryGap: false, // 坐标轴两边留白(刻度跟数据对应)
|
|
|
+ axisLine: { // 横坐标线样式
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(255,255,255,.1)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: { // 坐标轴文字
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: _this.timeData
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: { // 纵坐标样式
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: { // 网格线
|
|
|
+ show: true, // 是否显示
|
|
|
+ lineStyle: { // 网格线样式
|
|
|
+ color: 'rgba(255,255,255,.1)', // 网格线颜色
|
|
|
+ width: 1, //网格线的加粗程度
|
|
|
+ // type: 'dashed' // 网格线类型 dashed:虚线
|
|
|
+ }
|
|
|
+ },
|
|
|
+ name: '光照强度W/㎡', // 刻度
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ padding: [0, 0, 0, 20],
|
|
|
+ },
|
|
|
+ alignTicks: true,
|
|
|
+ // min: 0,
|
|
|
+ // max: setMax(maxa),
|
|
|
+ // interval: setMax(maxa) / 5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: { // 纵坐标样式
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: { // 网格线
|
|
|
+ show: true, // 是否显示
|
|
|
+ lineStyle: { // 网格线样式
|
|
|
+ color: 'rgba(255,255,255,.1)', // 网格线颜色
|
|
|
+ width: 1, //网格线的加粗程度
|
|
|
+ // type: 'dashed' // 网格线类型 dashed:虚线
|
|
|
+ }
|
|
|
+ },
|
|
|
+ name: '温湿度值/℃/%', // 刻度
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ // padding: [0, 0, 0, 20],
|
|
|
+ },
|
|
|
+ alignTicks: true,
|
|
|
+ // min: 0,
|
|
|
+ // max: setMax(maxb),
|
|
|
+ // interval: setMax(maxb) / 5,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ legend: {
|
|
|
+ icon: "roundRect", // 样式改为方形rect，改为圆角方形roundRect
|
|
|
+ itemWidth: 14, // 宽度
|
|
|
+ itemHeight: 6, // 高度
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 11
|
|
|
+ },
|
|
|
+ top: '15',
|
|
|
+ // 使用回调函数:加上数值方法
|
|
|
+ // formatter: function (name) {
|
|
|
+ // console.log(name)
|
|
|
+ // var currentObj = _this.legendData.find(item => item.name === name)
|
|
|
+ // return name + '：' + currentObj.value;
|
|
|
+ // },
|
|
|
+ data: _this.legendData.map(item => item.name),
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '辐射强度值',
|
|
|
+ type: 'line',
|
|
|
+ // symbol: 'circle',
|
|
|
+ // symbolSize: 2,
|
|
|
+ showSymbol: false, // 只有在 tooltip hover 的时候显示symbol
|
|
|
+ // itemStyle: { // symbol样式
|
|
|
+ // normal: {
|
|
|
+ // color: 'rgb(255, 255, 255)',
|
|
|
+ // borderColor: 'rgba(255, 255, 255, 0.2)', // symbol边框颜色
|
|
|
+ // borderWidth: 12 // symbol边框宽度
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ lineStyle: { // 线条样式
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(255, 0, 255, .5)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgb(255, 0, 255)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(255, 0, 255, 0.5)'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: _this.fusheData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '温度实值',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1, // 关联第几个y轴
|
|
|
+ showSymbol: false,
|
|
|
+ lineStyle: { // 线条样式
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(255, 105, 0, 0.5)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgb(255, 105, 5)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(255, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: _this.wenduData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '湿度实值',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1, // 关联第几个y轴
|
|
|
+ showSymbol: false,
|
|
|
+ lineStyle: { // 线条样式
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgb(0, 255, 255, 0)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgb(91, 255, 255)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgb(0, 255, 255, 0)'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: _this.shiduData,
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ uOption && uEcharts.setOption(uOption)
|
|
|
+ window.addEventListener("resize", ()=>{
|
|
|
+ uEcharts.resize();
|
|
|
+ });
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -301,3 +513,4 @@ export default {
|
|
|
height: 100%;
|
|
|
}
|
|
|
</style>
|
|
|
+
|
yuhan