fix:监测因子趋势echarts样式修改

quanyawei

2023-09-19 7c5c458225e1e6ab32bba352c5efd33c6a78f023

fix:监测因子趋势echarts样式修改

 package-lock.json

@@ -5295,11 +5295,19 @@
      }
    },
    "echarts": {
      "version": "4.9.0",
      "resolved": "https://registry.npm.taobao.org/echarts/download/echarts-4.9.0.tgz?cache=0&sync_timestamp=1612592564808&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecharts%2Fdownload%2Fecharts-4.9.0.tgz",
      "integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=",
      "version": "5.2.2",
      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.2.2.tgz",
      "integrity": "sha512-yxuBfeIH5c+0FsoRP60w4De6omXhA06c7eUYBsC1ykB6Ys2yK5fSteIYWvkJ4xJVLQgCvAdO8C4mN6MLeJpBaw==",
      "requires": {
        "zrender": "4.3.2"
        "tslib": "2.3.0",
        "zrender": "5.2.1"
      },
      "dependencies": {
        "tslib": {
          "version": "2.3.0",
          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
        }
      }
    },
    "editorconfig": {
@@ -18817,9 +18825,19 @@
      }
    },
    "zrender": {
      "version": "4.3.2",
      "resolved": "https://registry.npm.taobao.org/zrender/download/zrender-4.3.2.tgz",
      "integrity": "sha1-7HQy+UFcgsc1hLa3uMR+GwFiCcY="
      "version": "5.2.1",
      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.2.1.tgz",
      "integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
      "requires": {
        "tslib": "2.3.0"
      },
      "dependencies": {
        "tslib": {
          "version": "2.3.0",
          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
        }
      }
    }
  }
}

 package.json

@@ -21,7 +21,7 @@
    "crypto-js": "^4.0.0",
    "docxtemplater": "^3.32.4",
    "docxtemplater-image-module-free": "^1.1.1",
    "echarts": "^4.8.0",
    "echarts": "^5.2.2",
    "element-ui": "^2.15.5",
    "esri-leaflet": "^3.0.7",
    "file-saver": "^2.0.5",

 src/components/Echarts/LineChart2.vue

@@ -1,4 +1,3 @@
<<<<<<< HEAD
<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>
@@ -80,7 +79,6 @@
      this.setOptions(this.chartData)
    },
    setOptions(val) {
      // console.log(val,'123');
      function fontSize(res) {
        let clientWidth =
          window.innerWidth ||
@@ -90,8 +88,7 @@
        let fontSize = 100 * (clientWidth / 1920)
        return res * fontSize
      }

      // console.log('组件设置的数据')
      let that = this
      this.chart.setOption(
        {
          title: {
@@ -106,18 +103,6 @@
            axisTick: {
              show: true,
            },
            // axisTick: { // 决定是否显示坐标刻度
            //   alignWithLabel: true,
            //   show: true
            // },
            // axisLine: {
            //   lineStyle: {
            //     color: '#000000'
            //   }
            // },
            // axisLabel: {
            //   interval: this.interval
            // }
          },
          grid: {
            left: '5%',
@@ -136,13 +121,69 @@
            },
          },
          tooltip: {
            backgroundColor: 'rgba(50,50,50,0.5)',
            borderWidth: '0',
            trigger: 'axis',
            position: function (pt) {
              return [pt[1], '-13%']
            formatter: function (a) {
              let list = []
              let listItem = ''
              for (var i = 0; i < a.length; i++) {
                list.push(
                  '<span style="display: inline-block;padding: 0px 0;" >' +
                  '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                  a[i].color +
                  ';border-radius: 50%;}"></i><span style="width:15px; display:inline-block;">' +
                  '</span>' +
                  a[i].seriesName +
                  '&nbsp&nbsp&nbsp&nbsp' +
                  a[i].value +
                  '</span>'
                )
              }
              listItem = list.join('<br/>')
              return ' <div div style = "width:15px; display:inline-block;" > ' + a[0].name +
                '</div>' + '<div style="padding:0px;">' + listItem + '</div>'
            },
            position: function (point, params, dom, rect, size) {
              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
              let x = point[0];//
              let y = point[1];
              let viewWidth = size.viewSize[0];
              let viewHeight = size.viewSize[1];
              let boxWidth = size.contentSize[0];
              let boxHeight = size.contentSize[1];
              let posX = 0;//x坐标位置
              let posY = 0;//y坐标位置

              if (x < boxWidth) {//左边放不开
                posX = 5;
              } else {//左边放的下
                posX = x - boxWidth;
              }

              if (y < boxHeight) {//上边放不开
                posY = 5;
              } else {//上边放得下
                posY = y - boxHeight;
              }
              if (params && params.length > 20) {
                posX = point[1],
                  posY = '-10%';
              }
              return [posX, posY];

            },
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            textStyle: {
              color: 'rgb(255, 255, 255);',
              fontSize: fontSize(0.117), // 字体大小
            },
              lineHeight: 0
            }
          },

          yAxis: {

 src/utils/request.js

@@ -2,17 +2,8 @@
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
const baseUrl = 'http://47.99.64.149:8081/'
// const baseUrl = 'http://120.26.43.34:8081/api/'
// const baseUrl = 'http://192.168.0.42:8081/' // lzj
// const baseUrl = 'http://192.168.0.33:8081/' // yy
// const baseUrl = 'http://192.168.0.25:8081' // jj
// const baseUrl = 'http://192.168.0.28:8081/'// cjl
// const baseUrl = 'http://192.168.0.11:8081/' // new swb
// const baseUrl = 'http://47.96.171.62:8081/'//测试环境
// const baseUrl = 'http://121.43.179.139:8080'
// const baseUrl = 'http://192.168.0.33:8085/'
// const baseUrl = 'http://192.168.0.33:8081/'
// const baseUrl = 'http://47.99.64.149:8081/' //生产
const baseUrl = 'http://120.26.43.34:8081/api/' //测试

// create an axios instance
const service = axios.create({

 src/views/charts/index.vue

@@ -2,27 +2,11 @@
  <div style="width: 100%; height: 100%">
    <div class="topSelect">
      <!-- <el-cascader v-model="newMac" :options="options" clearable change-on-select :props="{ checkStrictly: true }" placeholder="选择设备" /> -->
      <el-cascader
        v-model="newMac"
        :options="options"
        :props="props"
        collapse-tags
        clearable
        placeholder="选择设备"
        style="width: 354px"
      />
      <el-cascader v-model="newMac" :options="options" :props="props" collapse-tags clearable placeholder="选择设备"
        style="width: 354px" />
      <!-- <div> -->
      <el-select
        v-model="value"
        placeholder="选择因子"
        style="margin-left: 20px"
      >
        <el-option
          v-for="(item, index) in newSensor"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      <el-select v-model="value" placeholder="选择因子" style="margin-left: 20px">
        <el-option v-for="(item, index) in newSensor" :key="index" :label="item.label" :value="item.value" />
      </el-select>
      <!-- </div> -->
      <!-- <el-radio-group v-model="radio1" style="margin-left:20px">
@@ -31,25 +15,12 @@
        <el-radio-button label="月报" />
        <el-radio-button label="自定义" />
      </el-radio-group> -->
      <el-select
        v-model="select1"
        placeholder="请选择"
        style="margin-left: 20px; width: 200px"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
      <el-select v-model="select1" placeholder="请选择" style="margin-left: 20px; width: 200px">
        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <component
        :is="dataType"
        style="padding-left: 0; margin-left: 20px; width: 160px"
        @sendPickerChild="showPickerChild"
        class="select11"
      />
      <component :is="dataType" style="padding-left: 0; margin-left: 20px; width: 160px"
        @sendPickerChild="showPickerChild" class="select11" />
      <!--查询按钮-->
      <el-button @click="selectData" class="btn1">查询</el-button>
    </div>
@@ -140,7 +111,7 @@
      medium: '',
      isSelect: false,
      options1: [
         {
        {
          label: '五分钟报',
          value: '五分钟报',
        },
@@ -248,13 +219,13 @@
  // mounted() {
  //
  // },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  // 方法集合
  methods: {
    // 查询数据
@@ -287,7 +258,10 @@
                if (lockLength < data[i].deviceData.length) {
                  newLineChartData.series.push({
                    data: [],
                    // large: true,
                    triggerLineEvent: true,
                    emphasis: {
                      focus: 'series'
                    },
                    name: '',
                    type: 'line',
                    label: {
@@ -300,7 +274,8 @@
                newLineChartData.series.push({
                  data: [],
                  name: '',
                  // large: true,
                  triggerLineEvent: true,
                  emphasis: { focus: 'series' },
                  type: 'line',
                })
              }
@@ -393,21 +368,25 @@
  display: flex;
  margin-bottom: 20px;
  padding: 20px 15px 0 15px;

  span:first-child {
    flex: 1;
  }

  div:last-child {
    width: 300px;
    line-height: 40px;
    padding-left: 6px;
  }
}

.topTitle {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 15px;
}

.btn1 {
  margin-left: 1%;
  height: 40px;
@@ -416,6 +395,7 @@
.select11 {
  width: 20% !important;
}

/deep/.el-date-editor .el-range-separator {
  width: 11%;
}