艳艳子呀 2022-04-22 08:43 采纳率: 33.3%
浏览 100
已结题

前端选择日期然后更新echars图

最近在做一个前端的网页项目，就是有一个选择日期功能，用户点击日期，然后就可以显示当天的一个数据分析，那个数据分析使用echarts图标做的。
怎么样才能实现呢？谢谢！非常感谢

  • 写回答

4条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-04-22 09:28
    关注

    前端页面，有两个内容：

    1. 一个是日期选择器，日期更改，携带新日期向后端请求新日期的数据；
    2. 另一个是echarts图表，在日期更新后获取到新数据之后，重新渲染，echarts重新渲染示例如下；
    <!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echars重新渲染</title>
  </head>

  <body>
    <div id="echartId" style="width: 500px;height: 400px;"></div>
    <script>
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 10,
          left: 60,
          right: 60,
          bottom: 30,
          textStyle: {
            color: '#fff',
          },
        },
        legend: {
          show: false,
        },
        xAxis: {
          type: 'time',
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          scale: true,
          name: '总量',
        },
        series: [
          {
            name: 'test',
            type: 'bar',
            stack: '总量',
            data: [
              '-',
              '-',
              40,
              80,
              120,
              80,
              40,
              '-',
              '-',
              40,
              80,
              120,
              80,
              40,
              '-',
            ],
          }
        ],
      } // _option，更改日期后需要更新_option内数据，然后重新渲染

      let myChart = echarts.getInstanceByDom(
        document.getElementById('echartId'),
      )
      if (myChart == null) {
        let chartDom = document.getElementById('echartId')
        myChart = echarts.init(chartDom)
      }

      myChart.setOption(_option, true)
    </script>
  </body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

  • 前端整合ECharts
    2022-12-11 14:09
    林寻星辰的博客 ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图...
  • 前端可视化数据大屏Echarts 和EventSource和Tsx
    2025-03-12 10:03
    Vite&的博客 7、掌握Echarts用法开始编写代码 1.1EventSource如何使用 EventSource 是浏览器提供的一个用于接收服务器发送的实时更新（Server-Sent Events，简称 SSE）的接口。通过 EventSource，你可以轻松地在客户端实现与...
  • Echarts 中实现输入日期查询
    2024-07-18 03:22
    无可就是九头鸟的博客 为了使用ECharts实现输入日期查询，可以创建一个带有输入框的web页面，用户可以在输入框中输入日期，然后根据输入的日期更新ECharts图表。以下是一个简单的实现示例：HTML部分：登录后复制 <!DOCTYPE html> &...
  • 前端ECharts：数据可视化的实用工具
    2025-04-06 10:09
    前端视界的博客 ECharts是百度开源的一个强大的前端数据可视化库，它提供了丰富多样的图表类型，如折线图、柱状图、饼图、散点图等，能够满足不同场景下的数据可视化需求。本文的目的是深入介绍ECharts的使用方法、原理和实际应用，...
  • 数据可视化插件echarts【前端】
    2024-04-13 18:49
    日星月云的博客 数据可视化插件echarts【前端】
  • 前端ECharts：打造简洁美观的数据图表
    2025-04-25 09:19
    大厂前端小白菜的博客 ECharts（Enterprise Charts）是百度开源的一个基于JavaScript的数据可视化图表库，它提供了丰富的图表类型和强大的交互功能。...首先介绍ECharts的核心概念和架构然后深入讲解各种图表类型的实现方法。
  • 后端加前端Echarts画图示例全流程（折线图，饼图，柱状图）
    2024-06-28 18:13
    xiaobai___1的博客 本文将带领读者通过一个完整的Echarts画图示例项目，演示如何结合后端技术（使用Spring Boot框架）和前端技术（使用Vue.js或React框架）来实现数据可视化。我们将实现折线图、饼图和柱状图三种常见的数据展示方式，...
  • 使用element-ui开发的前端报表页面
    2022-02-08 20:55
    为了优化用户体验，你还可以利用Element-UI的其他特性，比如Modal对话框来展示详细信息，Collapse折叠面板来组织大量数据，DatePicker日期选择器进行时间筛选等。同时，注意响应式设计，确保报表页面在不同设备上都...
  • 【前端echarts】echarts双饼图与easyui列表联动
    2024-09-09 20:18
    CtrlCVの攻城狮的博客 echarts双饼图与easyui列表联动 包括饼图与列表页联动，基本上无bug <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title...
  • 前端k线图展示 html示例
    2023-06-27 17:22
    在前端开发中，K线图（也称为日本蜡烛图）是用于展示金融数据，如股票、期货或数字货币价格走势的常见图表。这种图表由四个关键价格点组成：开盘价、收盘价、最高价和最低价，通过这些数据，我们可以清晰地看到市场...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 5月10日
  • 已采纳回答 5月2日
  • 创建了问题 4月22日