手拉手，用Vue开辟动态革新Echarts组件

2019年8月24日 187次阅读 来源: 司想君

从几年前盛行的jQuery插件，到如今React和Vue的组件，在营业需求的开辟中笼统通用出通用的模块，一向都是一个对个人手艺进步异常有协助的事变。本文从一个实在营业组件的开辟，来引见封装一个组件应当怎样从哪些方面去思索，以及在运用框架开辟的本日，中心基本知识的重要性。

需求背景

dashboard作为如今企业中背景产物的“门面”，怎样越发及时、高效、炫酷的对统计数据举行展现，是值得前端开辟工程师和UI设想师配合思索的一个题目。本日就从0最先，封装一个动态衬着数据的Echarts折线图组件，举一反三，一起来思索更多有意思的组件。

准备事情

项目构造搭建

由于临盆须要（现实上是懒），所以本教程运用了 ==vue-cli==举行了项目标基本构造搭建。

npm install -g vue-cli
vue init webpack vue-charts
cd vue-charts
npm run dev

装置Echarts

直接运用npm举行装置。

npm install echarts --save

引入Echarts

//在main.js到场下面两行代码
import echarts from 'echarts'
Vue.prototype.$echarts = echarts //将echarts注册成Vue的全局属性

到此，准备事情已完成了。

静态组件开辟

由于被《React编程头脑》这篇文章迫害太深，所以笔者开辟组件也习气从基本到高等逐渐迭代。

静态组件要完成的目标很简朴，就是把Echarts图表，衬着到页面上。

新建Chart.vue文件

<template>
  <div :id="id" :style="style"></div>
</template>
<script>
export default {
  name: "Chart",
  data() {
    return {
      //echarts实例
      chart: ""
    };
  },
  props: {
    //父组件须要通报的参数：id，width，height，option
    id: {
      type: String
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    },
    option: {
      type: Object,
      //Object范例的prop值肯定要用函数return出来，不然会报错。道理和data是一样的，
      //运用闭包保证一个vue实例具有自身的一份props
      default() {
        return {
          title: {
            text: "vue-Echarts"
          },
          legend: {
            data: ["销量"]
          },
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: [
            {
              type: "value"
            }
          ],
          series: [
            {
              name: "销量",
              type: "line",
              data: [5, 20, 36, 10, 10, 70]
            }
          ]
        };
      }
    }
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width
      };
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.chart = this.$echarts.init(document.getElementById(this.id));
      this.chart.setOption(this.option);
    }
  }
};
</script>

上述文件就完成了将一个简朴折线图衬着到页面的组件，怎样是否是很简朴？最简运用要领以下：

App.vue

<template>
  <div id="app">
    <Chart id="test"/>
  </div>
</template>

<script>
import Chart from "./components/Chart";
export default {
  name: "App",
  data() {},
  components: {
    Chart
  }
}
</script>

至此，运转顺序你应当能看到以下结果：
《手拉手，用Vue开辟动态革新Echarts组件》

第一次迭代

如今我们已有了一个基本版本，让我们来看看哪些方面做的还不尽善尽美：

  1. 图表没法依据窗口大小举行自动缩放，虽然设置了宽度为100%，然则只需革新页面图表才会从新举行衬着，这会让用户体验变得很差。
  2. 图表如今没法完成数据自动革新

下面我们来完成这两点：

自动缩放

Echarts自身是不支撑自动缩放的，然则Echarts为我们供应了resize要领。

//在init要领中到场下面这行代码
window.addEventListener("resize", this.chart.resize);

只须要这一句，我们就完成了图表追随窗口大小自适应的需求。

支撑数据自动革新

由于Echarts是数据驱动的，这意味着只需我们从新设置数据，那末图表就会随之从新衬着，这是完成本需求的基本。我们再想象一下，假如想要支撑数据的自动革新，必定须要一个监听器能够及时监听到数据的变化然后示知Echarts从新设置数据。所幸Vue为我们供应了watcher功用，经由过程它我们能够很轻易的完成上述功用：

//在Chart.vue中到场watch
  watch: {
    //视察option的变化
    option: {
      handler(newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.chart.setOption(newVal);
          } else {
            this.chart.setOption(oldVal);
          }
        } else {
            this.init();
        }
      },
      deep: true //对象内部属性的监听，症结。
    }
  }

上面代码就完成了我们对option对象中属性变化的监听，一旦option中的数据有了变化，那末图表就会从新衬着。

完成动态革新

下一步我想人人都知道了，就是定时从背景拉取数据，然后更新父组件的option就好。这个处所有两个题目须要思索一下：

  1. 假如图表要求每秒增添一个数据，应当怎样举行数据的要求才到达机能与用户体验的均衡？
  2. 动态更新数据的代码，应当放在父组件照样子组件？

对第一个题目，每秒及时猎取服务器的数据，肯定是最准确的，这就有两种计划：

  • 每秒向背景要求一次
  • 坚持长衔接，背景每秒向前端推送一次数据

第一种计划无疑对机能和资本产生了极大的糟蹋；除非及时性要求特别高（股票体系），否则不引荐这类体式格局；

第二种计划须要运用web Socket，但在服务端须要举行分外的开辟事情。

笔者基于项目标现实需求（及时性要求不高，且背景天生数据也有肯定的耽误性），采用了以下计划：

  1. 前端每隔一分钟向背景要求一次数据，且为当前时候的上一分钟的数据；
  2. 前端将上述数据每隔一秒向图表set一次数据

关于第二个题目：笔者更倾向于将Chart组件设想成纯组件，即只吸收父组件通报的数据举行变化，不在内部举行庞杂操纵；这也相符如今前端MVVM框架的最好实践；而且若将数据通报到Chart组件内部再举行处置惩罚，一是碰到不须要动态衬着的需求还须要对组件举行分外处置惩罚，二是要在Chart内部做ajax操纵，如许就致使Chart完整没有了可复用性。

接下来我们修正App.vue

<template>
  <div id="app">
    <Chart id="test" :option="option"/>
  </div>
</template>

<template>
  <div id="app">
    <Chart id="test" :option="option"/>
  </div>
</template>

<script>
import Chart from "./components/Chart";
export default {
  name: "App",
  data() {
    return {
      //笔者运用了mock数据代表从服务器猎取的数据
      chartData: {
        xData: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        sData: [5, 20, 36, 10, 10, 70]
      },
      option: {
        title: {
          text: "vue-Echarts"
        },
        legend: {
          data: ["销量"]
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 70]
          }
        ]
      }
    };
  },
  components: {
    Chart
  },
  mounted() {
    this.refreshData();
  },
  methods: {
    //增加refreshData要领举行自动设置数据
    refreshData() {
      //横轴数据
      let xData = this.chartData.xData,
        //系列值
        sData = this.chartData.sData;
      for (let i = 0; i < xData.length; i++) {
        //此处运用let是症结，也能够运用闭包。道理不再赘述
        setTimeout(() => {
          this.option.xAxis.data.push(xData[i]);
          this.option.series[0].data.push(sData[i]);
        }, 1000 * i); //此处要明白为何是1000*i
      }
    }
  }
};
</script>

至此我们就完成了图表动态数据加载，结果以下图：

《手拉手，用Vue开辟动态革新Echarts组件》

总结

这篇教程经由过程一个动态图表的开辟，通报了以下信息：

  • Echarts怎样与Vue连系运用
  • Vue组件开辟、纯组件与“脏”组件的区分
  • Vue watch的用法
  • let的特征
  • JavaScript EventLoop特征
  • …

人人能够依据这个列表查漏补缺。

后续优化

这个组件另有须要须要优化的点，比方：

  1. 间隔时候应当可设置
  2. 每分钟从背景猎取数据，那末图表展现的数据将会愈来愈多，愈来愈麋集，浏览器累赘愈来愈大，直到崩溃
  3. 没有设置停息图表革新的按钮
  4. …

期待人人自身着手，开辟一个属于自身的“圆满”的Echarts动态组件！

    原文作者：司想君
    原文地址: https://segmentfault.com/a/1190000013903264
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞