echarts 增加 el-date-picker

在 ECharts 中，要使用 el-date-picker（即 Element UI 的日期选择器）作为图表的筛选条件，可以按照以下步骤进行操作：

1. 首先，确保你已经引入了 Element UI 库。可以通过以下方式引入：

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 在页面中创建一个 el-date-picker 组件，并设置好日期选择的相关属性，例如：

<el-date-picker
  v-model="selectedDate"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  @change="handleDateChange"
></el-date-picker>

其中，v-model 绑定了一个名为 selectedDate 的变量，@change 监听了日期选择的变化，并调用了 handleDateChange 方法。

3. 在 handleDateChange 方法中，可以根据选择的日期来更新图表的数据，例如：

methods: {
  handleDateChange(value) {
    // 根据选择的日期范围来更新图表数据
    // 示例代码：
    const startDate = value[0];
    const endDate = value[1];
    // 根据选择的日期范围来请求数据或更新图表
    // ...
  }
}

在该方法中，可以根据选择的日期范围来请求后端数据，然后更新图表。具体的数据请求和图表更新的逻辑根据实际需求来实现。

4. 最后，将 el-date-picker 和图表放在同一个页面中，并根据需要进行布局和样式的调整。

以上是在 ECharts 中增加 el-date-picker 的基本步骤。你可以根据自己的需求进行进一步的定制和扩展。