趋势分析加入echarts

“dzb”

2022-11-04 ed9920601323db4b24a9602e1e3e3a8737a09e39

趋势分析加入echarts

 package-lock.json

@@ -3856,6 +3856,27 @@
      "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
      "dev": true
    },
    "echarts": {
      "version": "5.4.0",
      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.0.tgz",
      "integrity": "sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==",
      "requires": {
        "tslib": "2.3.0",
        "zrender": "5.4.0"
      },
      "dependencies": {
        "tslib": {
          "version": "2.3.0",
          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
        }
      }
    },
    "echarts-stat": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/echarts-stat/-/echarts-stat-1.2.0.tgz",
      "integrity": "sha512-zLd7Kgs+tuTSeaK0VQEMNmnMivEkhvHIk1gpBtLzpRerfcIQ+Bd5XudOMmtwpaTc1WDZbA7d1V//iiBccR46Qg=="
    },
    "ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -9710,6 +9731,21 @@
      "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz",
      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
      "dev": true
    },
    "zrender": {
      "version": "5.4.0",
      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.0.tgz",
      "integrity": "sha512-rOS09Z2HSVGFs2dn/TuYk5BlCaZcVe8UDLLjj1ySYF828LATKKdxuakSZMvrDz54yiKPDYVfjdKqcX8Jky3BIA==",
      "requires": {
        "tslib": "2.3.0"
      },
      "dependencies": {
        "tslib": {
          "version": "2.3.0",
          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
        }
      }
    }
  }
}

 package.json

@@ -12,6 +12,8 @@
    "@amap/amap-jsapi-loader": "^1.0.1",
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "echarts": "^5.4.0",
    "echarts-stat": "^1.2.0",
    "normalize.css": "^8.0.1",
    "sass": "^1.54.8",
    "sass-loader": "^13.0.2",

 src/views/intelligentPatrol/trendAnalysis/index.vue

@@ -18,13 +18,21 @@
      <div class="trend-data-show">
        <!-- 点位切换 -->
        <div class="trend-data-header">
          <el-button type="text">高发点位</el-button>
          <el-button type="text">首次违规点位</el-button>
          <el-button type="text" @click="highFlag = true">高发点位</el-button>
          <el-button type="text" @click="highFlag = false">首次违规点位</el-button>
        </div>
        <!-- 对应数据 -->
        <div class="trend-data-main">
          <div class="high-point">
          <!--  -->
          <div class="high-point" v-if="highFlag">
            <div class="point-item" v-for="item in highList" :key="item.id">
              <span>{{ item.pointName }}</span>
              <span>{{ item.count }}</span>
            </div>
          </div>
          <!-- 首次违规 -->
          <div class="first-point" v-else>
            <div class="point-item" v-for="item in fisrtList" :key="item.id">
              <span>{{ item.pointName }}</span>
              <span>{{ item.count }}</span>
            </div>
@@ -32,7 +40,11 @@
        </div>
      </div>
    </div>
    <div class="trend-main"></div>
    <div class="trend-main">
      <div class="trend-main-echarts" id="myRef">

      </div>
    </div>
    <div class="trend-footer" v-if="timeRangeFlag">
      <!-- 选择时间范围 -->
      <div class="time-area">
@@ -45,6 +57,8 @@
</template>

<script>
import * as echarts from 'echarts'
import { transform } from 'echarts-stat';
export default {
  data() {
    return {
@@ -79,8 +93,61 @@
          pointName: '后庆路200号-球',
          count: '100次',
        },
      ]
      ],
      fisrtList: [
        {
          id: 1,
          pointName: '后庆路205号-球',
          count: '1次',
        },
        {
          id: 2,
          pointName: '后庆路204号-球',
          count: '1次',
        },
        {
          id: 3,
          pointName: '后庆路203号-球',
          count: '1次',
        },
        {
          id: 4,
          pointName: '后庆路202号-球',
          count: '1次',
        },
        {
          id: 5,
          pointName: '后庆路201号-球',
          count: '1次',
        },
      ],
      highFlag: true,
    }
  },
  methods: {
    renderEchart() {
      // echarts.registerTransform(transform.regression);
      const myChart = echarts.init(document.getElementById('myRef'));
      // 绘制图表
      myChart.setOption({
        xAxis: {
          name: '日/周',
        },
        yAxis: {
          name: '报警量(次)',
        },
        series: [
          {
            data: [10, 22, 28, 23, 19],
            type: 'line',
            smooth: true
          }
        ]
      });
    }
  },
  mounted() {
    this.renderEchart()
  }
}
</script>
@@ -91,15 +158,18 @@
  padding: 10vh 10vw;
  color: #4b9bb7;
  display: flex;

  .trend-side {
    width: 20vw;
    text-align: left;
    height: 100%;
    border: 1px solid #09152f;

    .trend-input-area {
      display: flex;
      flex-direction: column;
      padding: 0 2vw;

      &>span {
        line-height: 40px;
      }
@@ -114,18 +184,24 @@
    .trend-data-show {
      width: 100%;
      line-height: 40px;
      .trend-data-header{

      .trend-data-header {
        display: flex;
        .el-button{

        .el-button {
          flex: 1;
          border: 2px solid #09152f;
        }
        .el-button+.el-button{

        .el-button+.el-button {
          margin: 0;
        }
      }

      .trend-data-main {
        .high-point {

        .high-point,
        .first-point {
          .point-item {
            display: flex;
            padding: 0 2vw;
@@ -135,10 +211,17 @@
      }
    }
  }
  .trend-main{

  .trend-main {
    flex: 1;
    border: 1px solid #09152f;

    .trend-main-echarts {
      width: 500px;
      height: 400px;
    }
  }

  .trend-footer {
    ::v-deep .el-range-input {
      background-color: #09152f;