bug修改

zhanghua

2023-05-30 08c2c3aea346fc8b838cd04918b7864592ac079b

 src/views/intelligentPatrol/trendAnalysis/index.vue

@@ -62,7 +62,10 @@
        :visible.sync="echartsDialogVisible"
        :before-close="handleClose"
      >
        <div style="height: 500px; width: 500px" id="echarts"></div>
        <div style="display: flex">
          <div style="height: 500px; width: 500px" id="echarts"></div>
          <div style="height: 500px; width: 500px" id="typeEcharts"></div>
        </div>
      </el-dialog>
    </div>
  </div>
@@ -95,6 +98,8 @@
    return {
      echartsDateList: [],
      echartsDataList: null,
      echartsTypeList: [],
      echartsTypeDataList: null,
      echartsDialogVisible: false,
      search: {
        type: null,
@@ -141,6 +146,95 @@
          },
        ],
      });

      let typeEcharts = echarts.init(document.getElementById("typeEcharts"));

      let option = {
        series: this.echartsTypeDataList.map(function (data, idx) {
          return {
            type: "pie",
            radius: [20, 60],
            left: "center",
            width: 400,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              alignTo: "edge",
              formatter: "{name|{b}}\n{count|{c} 件}",
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999",
                },
              },
            },
            labelLine: {
              length: 5,
              length2: 0,
              maxSurfaceAngle: 80,
            },
            data: data,
          };
        }),
      };
      let data = [];
      this.echartsTypeDataList.forEach((item) => {
        data.push({
          name: item.name,
          value: item.count,
        });
      });

      typeEcharts.setOption({
        series: [
          {
            type: "pie",
            radius: [20, 60],
            left: "center",
            width: 400,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              alignTo: "edge",
              formatter: "{name|{b}}\n{value|{c} 件}",
              minMargin: 5,
              edgeDistance: 5,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999",
                },
              },
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80,
            },
            data: data,
            // labelLayout: function (params) {
            //   const isLeft = params.labelRect.x < typeEcharts.getWidth() / 2;
            //   const points = params.labelLinePoints;
            //   // Update the end point.
            //   points[2][0] = isLeft
            //     ? params.labelRect.x
            //     : params.labelRect.x + params.labelRect.width;
            //   return {
            //     labelLinePoints: points,
            //   };
            // },
            // data: this.echartsTypeDataList,
          },
        ],
      });
    },
    async searchList() {
      const [startTime, endTime] = this.search.timeRange ?? [null, null];
@@ -167,19 +261,30 @@
      };
      this.zoom = 18;
      this.mark = { title: data.address };

      const [startTime, endTime] = this.search.timeRange ?? [null, null];
      basecase
        .getPointTrendAnalysisData({
          longitude: data.longitude,
          latitude: data.latitude,
          pointId: data.id,
          startTime: startTime,
          endTime: endTime,
        })
        .then((res) => {
          // const countList = res.map(item => +item.count);
          this.echartsDataList = [];
          this.echartsDateList = [];
          res.forEach((item) => {
          res.timeList.forEach((item) => {
            this.echartsDataList.push(item.count);
            this.echartsDateList.push(item.dateTime);
          });

          this.echartsTypeDataList = res.typeList;
          // this.echartsTypeDataList = [];
          // this.echartsTypeList = [];
          // res.typeList.forEach((item) => {
          //   this.echartsTypeDataList.push(item.count);
          //   this.echartsTypeList.push(item.name);
          // });
          // this.renderEchart(countList);
        })
        .catch((err) => this.$message.error(err));