vue实现折线图可按时间查询

关于“vue实现折线图可按时间查询”的过程，我可以提供以下完整攻略：

步骤一：准备数据

首先，我们需要准备一组数据来作为折线图的展示依据。可以使用Mock.js模拟数据，例如：

{
  "result": [
    {
      "date": "2022-01-01",
      "value": 10
    },
    {
      "date": "2022-01-02",
      "value": 20
    },
    {
      "date": "2022-01-03",
      "value": 18
    },
    {
      "date": "2022-01-04",
      "value": 15
    },
    {
      "date": "2022-01-05",
      "value": 23
    }
  ]
}

步骤二：安装依赖

接下来，我们需要安装Vue和ECharts依赖。在命令行终端中执行以下命令：

npm install vue --save

npm install echarts --save

步骤三：创建Vue组件

在Vue组件中引入ECharts，并使用上面准备的数据绘制折线图：

<template>
  <div id="line-chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      chartData: []
    }
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById('line-chart'));
      myChart.setOption({
        title: {
          text: '折线图示例'
        },
        tooltip: {},
        xAxis: {
          data: this.chartData.map(item => item.date)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '销量',
          type: 'line',
          data: this.chartData.map(item => item.value)
        }]
      })
    }
  },
  mounted() {
    // 可以在这里通过ajax异步获取数据，然后赋值给chartData
    this.chartData = [...];
    this.initChart();
  }
}
</script>

<style>
/* 这里可以加些样式 */
</style>

在上面的代码中，我们使用ECharts的init()方法初始化折线图，并在setOption()中设置图表的标题、悬浮提示、x轴、y轴和数据等信息。在Vue组件中，我们可以通过异步获取数据来填充chartData数组，并在mounted()钩子函数中调用initChart()方法来初始化折线图。

步骤四：实现按时间查询

对于按时间查询的需求，我们可以在模板中添加一个日期范围选择器，并在Vue组件中添加一个queryData()方法。在该方法中，我们可以根据选择的日期范围，重新获取符合条件的数据，并更新折线图。

<template>
  <div>
    <div>
      <!-- 在这里添加日期范围选择器 -->
      <el-date-picker 
        v-model="dateRange"
        type="daterange" 
        @change="queryData">
      </el-date-picker>
    </div>
    <div id="line-chart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      chartData: [],
      dateRange: []
    }
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById('line-chart'));
      myChart.setOption({
        title: {
          text: '折线图示例'
        },
        tooltip: {},
        xAxis: {
          data: this.chartData.map(item => item.date)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '销量',
          type: 'line',
          data: this.chartData.map(item => item.value)
        }]
      })
    },
    queryData() {
      // 根据日期范围查询数据
      let start = this.dateRange[0];
      let end = this.dateRange[1];
      let newData = this.chartData.filter(item => {
        return item.date >= start && item.date <= end;
      });
      // 重新绘制折线图
      let myChart = echarts.init(document.getElementById('line-chart'));
      myChart.setOption({
        xAxis: {
          data: newData.map(item => item.date)
        },
        series: [{
          data: newData.map(item => item.value)
        }]
      });
    }
  },
  mounted() {
    // 可以在这里通过ajax异步获取数据，然后赋值给chartData
    this.chartData = [...];
    this.initChart();
  }
}
</script>

<style>
/* 这里可以加些样式 */
</style>

在上面的代码中，我们通过在el-date-picker的change事件触发时调用queryData()方法来获取新的数据，并根据新数据更新折线图。在queryData()方法中，我们通过filter()方法过滤出符合日期范围的新数据，并使用setOption()方法更新折线图。

至此，整个vue实现折线图并可按时间查询的流程就讲完了。

示例一：Vue+ECharts实现折线图

参考下面的代码，可以在Vue单文件组件中实现基本的折线图展示。

<template>
  <div id="line-chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      chartData: []
    }
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById('line-chart'));
      myChart.setOption({
        title: {
          text: '折线图示例'
        },
        tooltip: {},
        xAxis: {
          data: this.chartData.map(item => item.date)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '销量',
          type: 'line',
          data: this.chartData.map(item => item.value)
        }]
      })
    }
  },
  mounted() {
    this.chartData = [
      {
        "date": "2022-01-01",
        "value": 10
      },
      {
        "date": "2022-01-02",
        "value": 20
      },
      {
        "date": "2022-01-03",
        "value": 18
      },
      {
        "date": "2022-01-04",
        "value": 15
      },
      {
        "date": "2022-01-05",
        "value": 23
      }
    ];
    this.initChart();
  }
}
</script>

<style>
/* 这里可以加些样式 */
</style>

示例二：Vue+ECharts实现折线图可按时间查询

参考下面的代码，可以在Vue单文件组件中实现折线图展示并可按时间查询。

<template>
  <div>
    <div>
      <el-date-picker 
        v-model="dateRange"
        type="daterange" 
        @change="queryData">
      </el-date-picker>
    </div>
    <div id="line-chart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      chartData: [],
      dateRange: []
    }
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById('line-chart'));
      myChart.setOption({
        title: {
          text: '折线图示例'
        },
        tooltip: {},
        xAxis: {
          data: this.chartData.map(item => item.date)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '销量',
          type: 'line',
          data: this.chartData.map(item => item.value)
        }]
      })
    },
    queryData() {
      let start = this.dateRange[0];
      let end = this.dateRange[1];
      let newData = this.chartData.filter(item => {
        return item.date >= start && item.date <= end;
      });
      let myChart = echarts.init(document.getElementById('line-chart'));
      myChart.setOption({
        xAxis: {
          data: newData.map(item => item.date)
        },
        series: [{
          data: newData.map(item => item.value)
        }]
      });
    }
  },
  mounted() {
    this.chartData = [
      {
        "date": "2022-01-01",
        "value": 10
      },
      {
        "date": "2022-01-02",
        "value": 20
      },
      {
        "date": "2022-01-03",
        "value": 18
      },
      {
        "date": "2022-01-04",
        "value": 15
      },
      {
        "date": "2022-01-05",
        "value": 23
      }
    ];
    this.initChart();
  }
}
</script>

<style>
/* 这里可以加些样式 */
</style>

以上就是关于“vue实现折线图可按时间查询”的完整攻略和两个示例的讲解。希望能够对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue实现折线图可按时间查询 - Python技术站