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

<template>
  <div class="data-curve-module">
    <common-title title="数据查看和提取"></common-title>
    <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: []
    }
  },
  data () {
    return {
      uEcharts: null,
      uOption: null,
      legendData: [
        { name: '辐射强度值', value: 9000 },
        { name: '温度实值', value: 50 },
        { name: '湿度实值', value: 60.3 },
      ],
      fusheData: [150, 230, 224, 218, 135, 147, 260],
      wenduData: [120, 132, 101, 134, 90, 230, 210],
      shiduData: [220, 182, 191, 234, 290, 330, 310],
    }
  },
  watch: {
    data: {
      handler(newValue, oldValue){
        console.log(newValue, oldValue)
      },
      immediate: true,
      deep: true
    }
  },
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      this.initDataCurve()
    })
  },
  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: ['rgb(255, 0, 255)', 'rgb(255, 105, 5)', 'rgb(91, 255, 255)'], // legend对应颜色
        grid: {
          // top: '70',
          left: '46',
          bottom: '40'
        },
        xAxis: {
          type: 'category',
          axisTick: { show: false }, // 横坐标刻度
          boundaryGap: false, // 坐标轴两边留白(刻度跟数据对应)
          axisLine: { // 横坐标线样式
            lineStyle: {
              color: 'rgba(255,255,255,.1)',
            },
          },
          axisLabel: {
            textStyle: { // 坐标轴文字
              color: '#fff'
            }
          },
          data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
        },
        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],
            },
            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],
            },
            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: '辐射强度值',
            data: [150, 230, 224, 218, 135, 147, 260],
            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(255, 0, 255, 0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgb(255, 0, 255)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(255, 0, 255, 0)'
                  }
                ])
              }
            }
          },
          {
            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(255, 105, 0, 0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgb(255, 105, 5)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(255, 0, 0, 0)'
                  }
                ])
              }
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            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: [220, 182, 191, 234, 290, 330, 310],
          }
        ]
      };
      this.uOption && this.uEcharts.setOption(this.uOption)
      window.addEventListener("resize", ()=>{
        this.uEcharts.resize();
      });
    }
  }
}
</script>

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