显示字数修改

yangfeng

2023-12-06 d372f82db7bf15ed38f8faf2e6b90080f9343c04

 src/views/cockpitPage/components/MachineStartupRate.vue

@@ -5,15 +5,8 @@
        <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="machine-chart-bg">
        <img
          src="/cockpitPage/machine-chart-bg.png"
          alt=""
          style="width: 250px; height: 260px"
        />
      </div>
      <div class="chart" ref="chart"></div>
    </div>
@@ -23,32 +16,54 @@
<script>
//引入echart
import * as echarts from "echarts";
let myChart;
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);
  },
  mounted() {},
  watch: {},
  methods: {
    //在职
    pieChart(chartName, data) {
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);

      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      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: [
            {
@@ -59,8 +74,19 @@
              label: {
                color: "#01f7fd",
                fontSize: 14,
                padding: [0, -60],
                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: {
@@ -72,8 +98,13 @@
              },
              labelLine: {
                show: true,
                length: 50,
                length: 40,
                color: "blue",
                length2: 70,
              },
              labelLayout: {
                verticalAlign: "bottom",
                dy: -5,
              },
              data: data,
            },
@@ -121,16 +152,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;