求解柱状图图表的筛选问题

Question

怎么对时间进行下拉筛选啊？比如一周，一个月，三个月，和任意时间段的筛选，求解

<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
  import * as echarts from "echarts";

  export default {
    data() {
      return {
        xData: ["2023-10-1", "2023-10-2", "2023-10-3", "2023-10-4", "2023-10-5", "2023-10-6", "2023-10-7"], //横坐标
        yData: [23, 24, 18, 25, 27, 28, 25], //数量数据
        taskDate: [10, 11, 9, 17, 14, 13, 14],
        myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
      };
    },
    mounted() {
      this.initEcharts();
    },
    methods: {
      initEcharts() {
        // 多列柱状图
        const mulColumnZZTData = {
          xAxis: {
            data: this.xData
          },
          // 图例
          legend: {
            data: ["数量", "金额"],
            top: "0%"
          },
          yAxis: {},
          series: [
            {
              type: "bar", 
              data: this.yData,
              name: "数量", 
              label: {
                show: true,
                position: "top"
              }
            },
            {
              type: "bar",
              data: this.taskDate,
              name: "金额", 
              label: {
                show: true,
                position: "top"
              }
            }
          ]
        };
        const myChart = echarts.init(document.getElementById("mychart"));
        myChart.setOption(mulColumnZZTData);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
    }
  };
</script>

运行效果：

Answer 1

【以下回答由 GPT 生成】

首先，我们可以为用户提供一个下拉列表，让用户选择日期范围：

<template>
  <div>
    <select v-model="selectedRange" @change="updateChartData">
      <option value="week">一周</option>
      <option value="month">一个月</option>
      <option value="threeMonths">三个月</option>
      <option value="custom">自定义</option>
    </select>

    <div class="echart" id="mychart" :style="myChartStyle"></div>
  </div>
</template>

然后，在data里添加一个属性selectedRange，用于保存用户选择的日期范围：

data() {
  return {
    // ...
    selectedRange: "week"
  };
}

接下来，我们可以根据用户选择的日期范围来更新柱状图的数据。首先，我们需要在methods中编写一个方法来处理用户选择改变的事件：

methods: {
  updateChartData() {
    // 根据用户选择的日期范围更新数据
    // ...
  }
}

在该方法中，我们可以通过条件判断来决定如何更新数据。首先，我们可以为每个选项设置一个value值，然后在updateChartData方法中根据selectedRange的值来判断用户选择了哪个选项。

接下来，我们可以根据用户选择的日期范围来筛选xData和yData中的数据。以下是一个示例实现，供参考：

updateChartData() {
  const selectedRange = this.selectedRange;

  if (selectedRange === "week") { // 选择了一周
    this.xData = ["2023-10-1", "2023-10-2", "2023-10-3", "2023-10-4", "2023-10-5", "2023-10-6", "2023-10-7"];
    this.yData = [23, 24, 18, 25, 27, 28, 25];
  } else if (selectedRange === "month") { // 选择了一个月
    this.xData = ["2023-10-1", "2023-10-2", "2023-10-3", "2023-10-4", "2023-10-5", "2023-10-6", "2023-10-7"];
    this.yData = [30, 35, 28, 35, 40, 38, 36];
  } else if (selectedRange === "threeMonths") { // 选择了三个月
    this.xData = ["2023-10-1", "2023-10-2", "2023-10-3", "2023-10-4", "2023-10-5", "2023-10-6", "2023-10-7"];
    this.yData = [45, 48, 43, 52, 55, 58, 52];
  } else if (selectedRange === "custom") { // 选择了自定义
    // 在这里可以根据用户选择的自定义时间段来筛选数据
    // ...
  }

  // 更新图表
  this.updateChart();
}

在每个条件分支中，根据用户选择的日期范围，更新xData和yData的值。当用户选择了自定义时间段时，可以根据用户选择的开始日期和结束日期来筛选数据。

最后，我们需要添加一个方法updateChart来更新图表。该方法中，我们可以通过调用echarts提供的接口来重新渲染图表：

updateChart() {
  const chartDom = document.getElementById("mychart");
  const myChart = echarts.init(chartDom);

  // 更新图表数据
  myChart.setOption({
    xAxis: {
      data: this.xData
    },
    series: [
      {
        data: this.yData
      }
    ]
  });
}

在mounted生命周期钩子函数中，调用updateChart方法来初始化图表：

mounted() {
  this.updateChart();
}

这样，当用户选择了不同的日期范围时，图表的数据就会相应地更新，并重新渲染图表。

希望这些代码可以帮助你实现筛选柱状图中的时间数据功能。如果有任何问题，请随时提问。

【相关推荐】

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7411941
• 这篇博客也不错, 你可以看下获取每个月有几周，开始到结束的时间
• 您还可以看一下 杨久成老师的敏捷项目管理进阶之敏捷转型课程中的 为什么要做敏捷转型？小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 【面试题】 常问 路由权限控制怎么做？中的 权限控制分为三大块： 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^