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

前端选择日期然后更新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条)

报告相同问题？

问题事件

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

悬赏问题

  • ¥15 急matlab编程仿真二阶震荡系统
  • ¥20 TEC-9的数据通路实验
  • ¥15 ue5 .3之前好好的现在只要是激活关卡就会崩溃
  • ¥50 MATLAB实现圆柱体容器内球形颗粒堆积
  • ¥15 python如何将动态的多个子列表，拼接后进行集合的交集
  • ¥20 vitis-ai量化基于pytorch框架下的yolov5模型
  • ¥15 如何实现H5在QQ平台上的二次分享卡片效果？
  • ¥15 python爬取bilibili校园招聘网站
  • ¥30 求解达问题（有红包）
  • ¥15 请解包一个pak文件