接口轮训时 设备负荷对比柱状图 动画问题修改

haoxuan

2023-12-05 cd388c78650efe85fe4dd41cc439208d58ab6c29

 src/views/cockpitPage/components/MachineStartupRate.vue

@@ -5,7 +5,7 @@
        <img src="/cockpitPage/machine-top.png" alt="" />
        <div class="top-title">
          <span>机器开机率</span>
          <span class="top-rate">{{ "60%" }}</span>
          <span class="top-rate">{{ startupRate + "%" }}</span>
        </div>
      </div>
      <div class="chart" ref="chart"></div>
@@ -18,17 +18,22 @@
import * as echarts from "echarts";
export default {
  components: {},
  props: {},
  props: {
    startupRate: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  mounted() {
    let chartData = [
      { value: 20, name: "闲置" },
      { value: 20, name: "维修" },
      { value: 60, name: "工作" },
    ];
    this.pieChart("chart", chartData);
    // let chartData = [
    //   { value: 20, name: "闲置" },
    //   { value: 20, name: "维修" },
    //   { value: 60, name: "工作" },
    // ];
    // this.pieChart("chart", chartData);
  },
  watch: {},
  methods: {
@@ -71,6 +76,7 @@
              label: {
                color: "#01f7fd",
                fontSize: 14,
                padding: [0, -60],
                formatter: function (params) {
                  return `{a|${params.name}} {b|${params.value + "%"}}`;
                },
@@ -94,8 +100,13 @@
              },
              labelLine: {
                show: true,
                length: 50,
                length: 40,
                color: "blue",
                length2: 70,
              },
              labelLayout: {
                verticalAlign: "bottom",
                dy: -5,
              },
              data: data,
            },