vue下使用echarts折线图及其横坐标拖拽功能

最新推荐文章于 2024-08-29 15:10:00 发布

weixin_30585437

最新推荐文章于 2024-08-29 15:10:00 发布

阅读量1.4k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/ss977/p/9969758.html

版权

本文介绍了如何在Vue项目中使用ECharts创建折线图，并实现横坐标拖拽功能，以实现时间段筛选的效果。通过展示的界面截图和代码示例，详细讲解了具体实现过程。

摘要由CSDN通过智能技术生成

vue页面中使用折线图，并且有时间段筛选。因此就需要用到横坐标的拖拽功能。

界面效果如下：

现在来看这个效果的实现代码：

 drawLine() {
      let that = this,
        lineDate = [],
        dispatchCount = [],
        finishCount = [],
        newCount = [];

      let param = {
        // 参数
      };
      axios
        .post(url, param)
        .then(function(response) {
          let rs = response.data.data;
          if (rs != undefined && rs != [] && rs != null) {
            for (let i = 0; i < rs.dispatch.length; i++) {
              lineDate.push(rs.dispatch[i].day);
              dispatchCount.push(rs.dispatch[i].count);
            }
            for (let i =