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

<template>
  <view class="content">
    <l-echart ref="domMyChart" class="echarts"></l-echart>
    <!-- <view
      @click="initEcharts"
      :prop="option"
      ref="domMyChart"
      id="linEcharts"
      class="echarts"
    >
    </view> -->
  </view>
</template>

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

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

let myChart;
const domMyChart = ref(null);
var datas = [
  {
    name: "漏检任务",
    value: 0,
  },
  {
    name: "已巡检任务",
    value: 0,
  },
];

datas[0].value = props.currentDateList[0].undetectedCount;
datas[1].value = props.currentDateList[0].patrolledCount;

let option = {
  color: ["#F07D28", "#00CDAC"],
  title: [
    {
      text: "今日巡检情况",
      left: "center",
      top: 15,
      textStyle: {
        color: "black",
        fontWeight: "normal",
        fontSize: 14,
      },
    },
    {
      text: [
        `{value|${props.currentDateList[0].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(() => {
    initEcharts();
  });
});

onResize(() => {
  myChart.resize();
});
</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>