usky-web-mobile/src/pages/business/zhaf/xunJian/components/chart.vue

<template>
  <view class="content">
    <l-echart ref="domMyChart" class="echarts"></l-echart>
  </view>
</template>

<script setup>
import * as echarts from "echarts";
import { onLoad, onShow, onHide, onLaunch, onResize } from "@dcloudio/uni-app";
import { defineComponent, ref, onMounted, nextTick, watch } from "vue";

const props = defineProps({
  currentDateList: {
    type: Object,
    default: null,
  },
});

const domMyChart = ref(null);
let myChart;
let option;

var datas = [];
var planSonCount = 0;

function initData() {
  datas = [
    {
      name: "漏检任务",
      value: 0,
    },
    {
      name: "已巡检任务",
      value: 0,
    },
  ];

  if (props.currentDateList.length > 0) {
    datas[0].value = props.currentDateList[0].undetectedCount;
    datas[1].value = props.currentDateList[0].patrolledCount;
    planSonCount = props.currentDateList[0].planSonCount;
  }

  option = {
    color: ["#F07D28", "#00CDAC"],
    title: [
      {
        text: "今日巡检情况",
        left: "center",
        top: 15,
        textStyle: {
          color: "black",
          fontWeight: "normal",
          fontSize: 14,
        },
      },
      {
        text: [`{value|${planSonCount}}`, "{name|巡检总数}"].join("\n "),
        top: "40%",
        left: "center",
        textStyle: {
          color: "black",
          fontWeight: "normal",
          fontSize: 14,
          lineHeight: 22,
          rich: {
            name: {
              fontFamily: "PingFangSC-Regular",
              fontSize: 13,
              color: "rgba(0,0,0,0.45)",
              lineHeight: 22,
              marginBottom: "5px",
            },
            value: {
              fontFamily: "HelveticaNeue",
              fontSize: 24,
              color: "rgba(0,0,0,0.85)",
              lineHeight: 30,
            },
          },
        },
      },
    ],

    series: {
      type: "pie",
      radius: [40, 80],
      height: "100%",
      left: "center",
      width: "100%",
      itemStyle: {
        borderColor: "#fff",
        borderWidth: 1,
      },
      label: {
        alignTo: "edge",
        formatter: function (el) {
          return `${el.name}\n${el.value}`;
        },
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 20,
        rich: {
          time: {
            fontSize: 10,
            color: "#999",
          },
        },
      },
      labelLine: {
        length: 25,
        length2: 0,
        maxSurfaceAngle: 80,
      },
      labelLayout: function (params) {
        // var isLeft = params.labelRect.x < myChart.getWidth() / 2;
        var isLeft = params.labelRect.x < myChart.nodeWidth / 2;
        var points = params.labelLinePoints;
        points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points,
        };
      },

      data: datas,
    },
  };
}

function initEcharts() {
  // let dom = uni.createSelectorQuery().select("#linEcharts");
  // myChart = echarts.init(document.getElementById("linEcharts"));
  // 观测更新的数据在 view 层可以直接访问到
  // myChart.setOption(option);

  myChart = domMyChart.value;
  myChart.init(echarts, (myChart) => {
    myChart.setOption(option);
  });
}

onLoad(() => {
  nextTick(() => {
    initData();
    initEcharts();
  });
});

onResize(() => {
  myChart.resize();
});

watch(
  () => props.currentDateList,
  (val) => {
    initData();
    initEcharts();
  }
);
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.echarts {
  width: 100%;
  height: 600rpx;
  /* margin-top: 70rpx; */
  /* background:pink */
}
</style>