机器开机率和订单完成比率样式优化

yangfeng

2023-12-02 4981a40e2dd1ac177cdcdf29525f83f1d162f11d

 src/views/cockpitPage/components/MachineStartupRate.vue

@@ -8,13 +8,6 @@
          <span class="top-rate">{{ "60%" }}</span>
        </div>
      </div>
      <div class="machine-chart-bg">
        <img
          src="/cockpitPage/machine-chart-bg.png"
          alt=""
          style="width: 250px; height: 260px"
        />
      </div>
      <div class="chart" ref="chart"></div>
    </div>
  </div>
@@ -43,12 +36,31 @@
    pieChart(chartName, data) {
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);
      let img = "/cockpitPage/machine-chart-bg.png";
      let option;
      if (data) {
        option = {
          color: ["#065a6f", "#067687", "#00ffff"],
          tooltip: {
            trigger: "item",
          },
          graphic: {
            elements: [
              {
                type: "image",
                z: 5,
                right: 25,
                style: {
                  image: img,
                  width: 240,
                  height: 245,
                  opacity: 0.55,
                },
                left: "center",
                top: "center",
                position: [5, 5],
              },
            ],
          },
          series: [
            {
@@ -60,7 +72,17 @@
                color: "#01f7fd",
                fontSize: 14,
                formatter: function (params) {
                  return params.name + params.value + "%";
                  return `{a|${params.name}} {b|${params.value + "%"}}`;
                },
                rich: {
                  a: {
                    color: "#00ffff",
                    fontSize: 14,
                  },
                  b: {
                    color: "#fccd1d",
                    fontSize: 14,
                  },
                },
              },
              emphasis: {
@@ -121,16 +143,6 @@
          color: #fec718;
        }
      }
    }
    .machine-chart-bg {
      width: 100%;
      height: 100%;
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      opacity: 0.55;
    }
    .chart {
      margin-top: 8px;