src/views/screen/components/screen-examine/components/examine-hola.vue
@@ -2,7 +2,9 @@
  <!-- 进度条类型组件 -->
  <div class="progressChart">
    <div class="chart" id="progressChart" ref="chartRef"></div>
    <label class="bottom le-0-font">{{ bottomTitle }}</label>
    <el-link class="bottom le-0-font" :underline="false" @click="handleDetail(routerPath)">
    <label>{{ bottomTitle }}</label>
    </el-link>
  </div>
</template>
<script>
@@ -27,7 +29,7 @@
            // 设置背景圆环样式
            lineStyle: {
              width: 10, // 圆环宽度
              color: [[1, '#002865']] // 圆环背景色
              color: [[1, '#ecf6ff']] // 圆环背景色
            }
          },
          // 仪表盘指针
@@ -83,7 +85,7 @@
          detail: {
            // width: 50,
            // height: 14,
            fontSize: 14,
            fontSize: 20,
            color: 'auto'
          },
          data: [
@@ -94,7 +96,7 @@
              detail: {
                // 中心title设置
                offsetCenter: ['0%', '0%'],
                color: '#01F8FF',
                color: '#dedddd',
                formatter: '{value}%'
                // borderColor: '#01F8FF',
                // borderRadius: 20,
@@ -120,12 +122,22 @@
      type: [Number, String],
      default: 0
    },
    routerPath: {
      type: String,
      default: ''
    },
    bottomTitle: {
      type: String,
      default: ''
    }
  },
  methods: {},
  methods: {
    handleDetail(routerUrl) {
      this.$router.push({
        path: routerUrl,
      })
    }
  },
  created() { },
  mounted() {
    let myChart = echarts.init(this.$refs['chartRef']) // 使用Id无法实现
@@ -139,7 +151,9 @@
.progressChart {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .chart {
    width: 100%;
    height: 75%;
@@ -148,10 +162,11 @@
  .bottom {
    display: inline-block;
    width: 100%;
    color: #01f8ff;
    color: #dedddd;
    text-align: center;
    font-size: 16px;
    font-size: 14px;
    margin-top: 10px;
  }
}
</style>
</style>