hycw-ui/src/views/home/components/box1 copy/index.vue

<template>
  <div class="w-full h-full">
    <div class="c-title">可靠性完成情况</div>
    <div
      ref="barChart2"
      id="barChart2"
      :style="{ height: height, width: width }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    chartOptions: {
      type: Object,
      default: () => {},
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "200px",
    },
  },
  mounted() {
    this.initEcharts();
  },
  watch: {
    chartOptions: {
      handler(newVal, oldVal) {
        this.initEcharts();
      },
      // 这里的deep是深度监听，因为我们传递过来的是一个对象
      deep: true,
    },
  },
  methods: {
    initEcharts() {
      let myChart = echarts.getInstanceByDom(
        document.getElementById("barChart2")
      );
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("barChart2"));
      }

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        grid: {
          left: "2%", //图表距离容器左侧多少距离
          right: "2%", //图表距离容器右侧侧多少距离
          bottom: "0%", //图表距离容器上面多少距离
          top: "2%", //图表距离容器下面多少距离
          containLabel: true,
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            center: ["50%", "60%"],
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.c-title {
  border-left: 4px solid rgb(64, 158, 255);
  padding-left: 10px;
}
</style>