如何再el-date-picker时间控件中获取时间跨度后用echarts从mysql中获取该时间段，mysql数据库一个表中包含多个指标，并且用echarts绘画该表时间段中不同指标的时序图，放在一个div中，利用flask作为后端

1. 在el-date-picker的change事件中获取开始时间和结束时间：

<el-date-picker v-model="dateRange" type="daterange" @change="changeDate"></el-date-picker>

...

methods: {
  changeDate(value) {
    this.startTime = value[0];
    this.endTime = value[1];
  }
}

2. 在Flask中编写路由，从MySQL中获取数据：

from flask import Flask, jsonify
import pymysql

app = Flask(__name__)

@app.route('/getData')
def getData():
    conn = pymysql.connect(host='localhost', user='root', password='password', database='mydb')
    cursor = conn.cursor()
    sql = "SELECT * FROM mytable WHERE time >= %s and time <= %s"
    cursor.execute(sql, (startTime, endTime))
    data = cursor.fetchall()
    conn.close()
    return jsonify(data)

3. 在前端使用axios发送请求，获取数据并绘制图表：

import axios from 'axios'
import echarts from 'echarts'

...

methods: {
  fetchData() {
    axios.get('/getData', {
      params: {
        startTime: this.startTime,
        endTime: this.endTime
      }
    })
    .then(response => {
      const data = response.data;
      const chartData = {};
      data.forEach(item => {
        const indexName = item.index_name;
        if (!chartData[indexName]) {
          chartData[indexName] = [];
        }
        chartData[indexName].push([item.time, item.value]);
      });
      const chart = echarts.init(document.getElementById('chart'));
      chart.setOption({
        legend: {
          data: Object.keys(chartData)
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value'
        },
        series: Object.keys(chartData).map(key => {
          return {
            name: key,
            type: 'line',
            data: chartData[key]
          };
        })
      });
    })
    .catch(error => {
      console.log(error);
    });
  }
}