guan_client/src/views/modules_guAn/visualization/modules/FullCurveModel.vue

<template>
  <div class="data-curve-module">
    <!-- <common-title title="全程曲线"></common-title>     -->
    <!-- <div style="height: 22.5px;"></div> -->
    <!-- <div class="visualization-common-border"> -->
      <div ref="dataCurve" class="h100"></div>
    <!-- </div> -->
  </div>
</template>

<script>
import * as echarts from "echarts"
import commonTitle from '../components/commonTitle.vue'
import { setMax } from "../components/common.js";

export default {
  components: { commonTitle },
  name: '',
  props: {
    data: {
      type: Array,
      default: function(){
        return [] // 使用工厂函数返回默认值
      }
    }
  },
  data () {
    return {
      uEcharts: null,
      uOption: null,
      legendData: [
        { name: '辐射强度值', value: 9000 },
        { name: '温度实值', value: 50 },
        { name: '湿度实值', value: 60.3 },
      ],
      fusheData: [],
      wenduData: [],
      shiduData: [],
      timeData: [],
      // fusheData: [150, 230, 224, 218, 135, 147, 260],
      // wenduData: [120, 132, 101, 134, 90, 230, 210],
      // shiduData: [220, 182, 191, 234, 290, 330, 310],
      // timeData: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
    }
  },
  watch: {
    data: {
      handler(newValue, oldValue){
        console.log('全程曲线', newValue, oldValue)
        this.refreshData(newValue)
      },
      // immediate: true,
      deep: true
    }
  },
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      this.initDataCurve()
      this.refreshData(this.data)
    })
  },
  methods: {
    initDataCurve(){
      var _this = this
      var maxa = Math.max.apply(null, this.fusheData)
      var maxb = Math.max.apply(null, [...this.wenduData, ...this.shiduData])
      this.uEcharts = echarts.init(this.$refs.dataCurve);
      this.uOption = {
        color: ['#07D626', '#E30106', '#E39106'], // legend对应颜色
        grid: {
          top: '80',
          left: '46',
          bottom: '45'
        },
        tooltip: {
          trigger: 'axis',
        },
        // dataZoom: [
        //   {
        //     type: 'inside',
        //     start: 0,
        //     end: 100,
        //   },
        //   {
        //     start: 0,
        //     end: 100,
        //     height: 10,
        //     bottom: 16,
        //   }
        // ],
        dataZoom: [
          {
            show: true,
            moveHandleSize: 0, // 隐藏上面那那层
            height: 12,
            xAxisIndex: [
              0
            ],
            bottom: 12,
            start: 0,
            end: 100,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle:{
              color:"#d3dee5",

            },
            textStyle:{ color:"#fff" },
            borderColor:"#90979c"
          }, {
            type: "inside",
            show: true,
            height: 15,
            start: 0,
            end: 100
          }
        ],
        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: 'rgb(7, 214, 38, 0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgb(7, 214, 38)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(7, 214, 38, 0)'
                  }
                ])
              }
            },
            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(227, 1, 6, .5)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgb(227, 1, 6)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(227, 1, 6, 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: 'rgba(227, 145, 6, .5)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgb(227, 145, 6)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(227, 145, 6, .5)'
                  }
                ])
              }
            },
            data: _this.shiduData,
          }
        ]
      };
      this.uOption && this.uEcharts.setOption(this.uOption)
      window.addEventListener("resize", ()=>{
        this.uEcharts.resize();
      });
    },
    refreshData(data){
      if(data.length === 0){
        return
      }
      var wendu = data.find(item => item.Name === '温度实值-全程')
      var shidu = data.find(item => item.Name === '湿度实值-全程')
      var fushe = data.find(item => item.Name === '辐射强度值-全程')
      var time = data.find(item => item.Name === '全程曲线-时间分布')
      this.wenduData = wendu ? wendu.Values : []
      this.shiduData = shidu ? shidu.Values : []
      this.fusheData = fushe ? fushe.Values : []
      this.timeData = time ? time.Values : []
      // console.log(this.shiduData)
      var _this = this
      this.uEcharts.setOption({
        xAxis: {
          data: this.timeData
        },
        series: [
          {
            name: '辐射强度值',
            data: _this.fusheData
          },
          {
            name: '温度实值',
            data: _this.wenduData
          },
          {
            name: '湿度实值',
            data: _this.shiduData
          },
        ]
      });
    },
  }
}
</script>

<style scoped>
  @import '~@/assets/less/uStyle.less';
</style>
<style lang="less">
  .data-curve-module{
    width: 100%;
    height: 100%;
  }
</style>