前端echarts钟表

于 2024-05-04 14:38:55 发布
阅读量143 收藏
点赞数 1
文章标签： 前端 echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61503139/article/details/138441602
版权
本文描述了一个基于Vue、Axios和ECharts构建的应用，实现实时消费统计、添加账单功能以及动态图表展示，通过API获取和更新数据并处理用户输入验证。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
      .red {
        color: red!important;
      }
      .search {
        width: 300px;
        margin: 20px 0;
      }
      .my-form {
        display: flex;
        margin: 20px 0;
      }
      .my-form input {
        flex: 1;
        margin-right: 20px;
      }
      .table > :not(:first-child) {
        border-top: none;
      }
      .contain {
        display: flex;
        padding: 10px;
      }
      .list-box {
        flex: 1;
        padding: 0 30px;
      }
      .list-box  a {
        text-decoration: none;
      }
      .echarts-box {
        width: 1000px;
        height: 800px;
        padding: 30px;
        margin: 0 auto;
        border: 1px solid #ccc;
      }
      tfoot {
        font-weight: bold;
      }
      @media screen and (max-width: 1000px) {
        .contain {
          flex-wrap: wrap;
        }
        .list-box {
          width: 100%;
        }
        .echarts-box {
          margin-top: 30px;
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

          <!-- 添加资产 -->
          <form class="my-form">
            <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
            <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
            <button @click="add" type="button" class="btn btn-primary">添加账单</button>
          </form>

        </div>
        
        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    
    <script  type="text/javascript">
 
setInterval(function () {
 this.myChart = echarts.init(document.querySelector('#main'))
    
        var date = new Date();
  var second = date.getSeconds();
  var minute = date.getMinutes() + second / 60;
  var hour = (date.getHours() % 12) + minute / 60;
  this.animationDurationUpdate = 300;
  this.myChart.setOption({
    series: [
      {
        name: 'hour',
        animation: hour !== 0,
        data: [{ value: hour }]
      },
      {
        name: 'minute',
        animation: minute !== 0,
        data: [{ value: minute }]
      },
      {
        animation: second !== 0,
        name: 'second',
        data: [{ value: second }]
      }
    ]
  });
}, 1000);

      /**
       * 接口文档地址：
       * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
       * 
       * 功能需求：
       * 1. 基本渲染
       *    (1) 立刻发送请求获取数据 created
       *    (2) 拿到数据，存到data的响应式数据中
       *    (3) 结合数据，进行渲染 v-for
       *    (4) 消费统计 => 计算属性
       * 2. 添加功能
       *    (1) 收集表单数据 v-model
       *    (2) 给添加按钮注册点击事件，发送添加请求
       *    (3) 需要重新渲染
       * 3. 删除功能
       *    (1) 注册点击事件，传参传 id
       *    (2) 根据 id 发送删除请求
       *    (3) 需要重新渲染
       * 4. 饼图渲染
       *    (1) 初始化一个饼图 echarts.init(dom)  mounted钩子实现
       *    (2) 根据数据实时更新饼图 echarts.setOption({ ... })
       */
      const app = new Vue({
        el: '#app',
        data: {
          list: [],
          name: '',
          price: ''
        },
        computed: {
          totalPrice () {
            return this.list.reduce((sum, item) => sum + item.price, 0)
          }
        },
        created () {
          // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
          //   params: {
          //     creator: '小黑'
          //   }
          // })
          // this.list = res.data.data

          this.getList()
        },
        mounted () {
          this.myChart = echarts.init(document.querySelector('#main'))
  
          this.myChart.setOption(  {
  series: [
    {
      name: 'hour',
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      min: 0,
      max: 12,
      splitNumber: 12,
      clockwise: true,
      axisLine: {
        lineStyle: {
          width: 15,
          color: [[1, 'rgba(0,0,0,0.7)']],
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowBlur: 15
        }
      },
      splitLine: {
        lineStyle: {
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 3,
          shadowOffsetX: 1,
          shadowOffsetY: 2
        }
      },
      axisLabel: {
        fontSize: 50,
        distance: 25,
        formatter: function (value) {
          if (value === 0) {
            return '';
          }
          return value + '';
        }
      },
      anchor: {
        show: true,
        icon: 'image://https://echarts.apache.org/zh/index.html',
        showAbove: false,
        offsetCenter: [0, '-35%'],
        size: 120,
        keepAspect: true,
        itemStyle: {
          color: '#707177'
        }
      },
      pointer: {
        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
        width: 12,
        length: '55%',
        offsetCenter: [0, '8%'],
        itemStyle: {
          color: '#C0911F',
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 8,
          shadowOffsetX: 2,
          shadowOffsetY: 4
        }
      },
      detail: {
        show: false
      },
      title: {
        offsetCenter: [0, '30%']
      },
      data: [
        {
          value: 0
        }
      ]
    },
    {
      name: 'minute',
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      min: 0,
      max: 60,
      clockwise: true,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      pointer: {
        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
        width: 8,
        length: '70%',
        offsetCenter: [0, '8%'],
        itemStyle: {
          color: '#C0911F',
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 8,
          shadowOffsetX: 2,
          shadowOffsetY: 4
        }
      },
      anchor: {
        show: true,
        size: 20,
        showAbove: false,
        itemStyle: {
          borderWidth: 15,
          borderColor: '#C0911F',
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 8,
          shadowOffsetX: 2,
          shadowOffsetY: 4
        }
      },
      detail: {
        show: false
      },
      title: {
        offsetCenter: ['0%', '-40%']
      },
      data: [
        {
          value: 0
        }
      ]
    },
    {
      name: 'second',
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      min: 0,
      max: 60,
      animationEasingUpdate: 'bounceOut',
      clockwise: true,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      pointer: {
        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
        width: 4,
        length: '85%',
        offsetCenter: [0, '8%'],
        itemStyle: {
          color: '#C0911F',
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 8,
          shadowOffsetX: 2,
          shadowOffsetY: 4
        }
      },
      anchor: {
        show: true,
        size: 15,
        showAbove: true,
        itemStyle: {
          color: '#C0911F',
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 8,
          shadowOffsetX: 2,
          shadowOffsetY: 4
        }
      },
      detail: {
        show: false
      },
      title: {
        offsetCenter: ['0%', '-40%']
      },
      data: [
        {
          value: 0
        }
      ]
    }
  ]
})
        },

        methods: {
          async getList () {
            const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
              params: {
                creator: '小黑'
              }
            })
            this.list = res.data.data

            // 更新图表
            this.myChart.setOption({
              // 数据项
              series: [
                {
                  // data: [
                  //   { value: 1048, name: '球鞋' },
                  //   { value: 735, name: '防晒霜' }
                  // ]
                  data: this.list.map(item => ({ value: item.price, name: item.name}))
                }
              ]
            })
          },
          async add () {
            if (!this.name) {
              alert('请输入消费名称')
              return
            }
            if (typeof this.price !== 'number') {
              alert('请输入正确的消费价格')
              return
            }

            // 发送添加请求
            const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
              creator: '小黑',
              name: this.name,
              price: this.price
            })
            // 重新渲染一次
            this.getList()

            this.name = ''
            this.price = ''
          },

          async del (id) {
            // 根据 id 发送删除请求
            const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
            // 重新渲染
            this.getList()
          }
        }
      })
 
          
      
    
    </script>
    <script type="text/javascript">
   
    </script>
  </body>
</html>

Harbor Lau
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 记账清单
qq_64628470的博客
10-24 398
通过发送请求来从后台获取更改数据，需要用到钩子函数。在渲染函数中setOption动态更新饼图（map）使用ECharts来渲染饼图。
【css + echarts】实现两种时钟展示
糯米w的博客
01-14 1697
在vue3条件下，用css和echarts不同的方法实现不同的时钟样式，实现个性化的设计
Echarts钟表图
fhljzcs的博客
08-03 822
main(){ var myChart=echarts.init(document.getElementById('main2')) var option = { title:{ show:true, x:"center", y:"62%", }, tooltip: { show: true, ...
echarts 实现时钟效果
jinse29的博客
10-14 1115
先放一张效果图 initRainbowLine() { var datetime = new Date(); var h = datetime.getHours(); var m = datetime.getMinutes(); var s = datetime.getSeconds(); var minutes = m + s / 60; var hours_24 = h + m / 60; var hours_1
js 或者 vue表格导出Excel总结（发票/账单）
cscscssjsp的博客
05-10 1413
1.自定义样式 2.自定义页边距 3.设置单元格输出 废话不多说，直接上代码 本例 是基于vue开发，代码格式保持vue风格,写在.vue组件里，如果使用js请自行转换 两种方式： <template> <div> <div> <button type="button" @click="ExportExcel">导出Exce...
canvas实现钟表效果
08-31
在钟表的例子中，我们主要利用了Canvas的绘图方法和时间处理来实现动态的时针、分针和秒针。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，用于展示我们的钟表。在这个例子中，`<canvas>`元素的id为"canvas1...
iOS实现简易钟表
08-25
在iOS开发中，创建一个简易钟表涉及到UI设计与动画技术。这个钟表的实现主要通过使用UIImageView作为表盘，并利用Core Animation框架中的CALayer来动态显示时、分、秒针。下面我们将深入探讨实现这一功能的关键知识...
钟表卡通图标下载
07-24
钟表卡通图标作为一种特殊的视觉元素，通常用于表示时间管理、提醒、计时器或日程安排等功能，尤其在移动应用、桌面软件和网页设计中非常常见。下面我们将详细探讨钟表卡通图标的设计特点以及在不同场景中的应用。 ...
使用canvas绘制钟表
11-06
本教程将详细介绍如何使用canvas绘制一个动态的钟表，这涉及到JavaScript和Canvas API的基础知识。 首先，我们需要在HTML页面中创建一个canvas元素，并设置其id以便在JavaScript中引用： ```html ...
QML实现钟表效果
09-16
在本文中，我们将深入探讨如何使用QML（Qt Quick）来实现一个钟表效果。QML是Qt框架的一部分，它允许我们用声明式语言创建丰富的用户界面，特别适合构建动态和响应式的图形界面。在Qt5之后的版本，Qt Quick得到了...
echarts时间轴；计划时间实际时间
Ychy_vov的博客
06-12 1624
最近遇到一个图表需要展示的和常用echarts的大佬知道这是一个xy轴刻度对应两条柱子的图；但是由于多个任务(刻度)开始的时间不一致可能不在0开始（多任务柱子开始位置）
Vue实现消费清单明细饼图展示
m0_53951384的博客
11-02 518
功能 可以进行消费项增删 消费额大于500会标红 消费金额合计 饼图展示消费项 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title>
ECharts gauge制作钟表
haijun1993的博客
08-29 3510
  option = { backgroundColor: '#1b1b1b', tooltip : { formatter: "{a} &lt;br/&gt;{c} {b}" }, series : [ { name:'小时', type:'gauge', ...
echarts中的散点图极坐标系展现上半圆时钟图
欢迎大家交流前端开发技术、经验及各种知识沉淀
08-31 1308
使用极坐标系的散点图来开发。控制极坐标的配置项有三个：polar（极坐标系）、radiusAxis(极坐标系的径向轴)、angleAxis（极坐标系的角度轴），配合series中type=scatter来最终实现设计图上的上半圆形图案。极坐标系中的散点图，会根据圆形上的刻度值及径向轴上的刻度值来展示不同位置的点（本例中为大头针）............
VUE通用后台管理系统（三）页面增删查改
qq_45600228的博客
07-22 1989
VUE通用后台管理系统（三）页面增删查改
【开源免费】Vue+SpringBoot打造超市账单管理系统，初学者入门实战项目
Designer 小郑的技术博客
01-07 3430
本文是《基于Vue和SpringBoot的超市账单管理系统》的配套原创说明文档，可以给应届毕业生提供格式撰写参考，也可以给开发类似系统的朋友们提供功能业务设计思路。
vue项目的增删改查，表单验证
qq_62797382的博客
07-28 921
最终的 BookList.vue。
vue实现增删改查
最新发布
jdhdvdjdn的博客
03-27 557
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table,td{
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值