第七篇：VUE 使用 Echarts 画时钟钟表

最新推荐文章于 2024-07-18 16:19:24 发布

小熊猫Yzt_199626

最新推荐文章于 2024-07-18 16:19:24 发布

阅读量1.9k

点赞数 4

分类专栏： echarts 文章标签： echarts js vue.js

本文链接：https://blog.csdn.net/Yzt_199626/article/details/116403769

版权

第七篇：VUE 使用 Echarts 画时钟

要求：1.时针要按两位小数计算，如 7.5 小时，时针需要停在刻度 7和 8 之间

2.分针一分钟跳一小格即可

3.秒针一秒跳一小格

效果图如下：

实现的思路如下：

在同一个 series 里面使用三个 type="gauge",分别代表的是时、分、秒。通过调整刻度、指针长度、计时器来实现。

1. npm 安装 echarts

npm install echarts --save

2. 指定一个dom来放画出的钟表图形，一定要指定 DOM 的高度，不然渲染不出来

<div class="echart-test">
   <div style="height:400px" ref="echart">
     echart
   </div>
   <div class="test-card" ref="timeblock"></div>
</div>

3. 完整的demo代码如下：

<template>
  <div>
    <div class="echart-test">
      <div style="height:400px" ref="echart">
        echart
      </div>
      <div class="test-card" ref="timeblock"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  components: {
  },
  data() {
    return {
      option1: {
        backgroundColor: '#1b1b1b',
        series: [
          {
            name: '小时',
            type: