在Vue中使用echarts

由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒誉李省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择了放弃，最终还是选择echarts。以下是我使用的一些心得体会~

我的示例是在vue-cli搭建

首先需要全局引入

在main.js中

在Echarts.vue中

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

这样一个简单的图表就完成了，是不是庆如迟觉得很简单？假如在一个大型的项目中，而且数据是非常复杂的？那么该如何 *** 作？

由于全局引入会将所有的echarts图表打包，导致体积过大

在Echarts.vue文件中

使用 require 而不是 import

基于前面的疑问，加上实际运用到项目中遇到的一些问题，我思考使用组件的形式。

从上边可以看出，你每次在使用echarts的时候，都必须要重复的引入，这样很不方便

vue作为一个组件化开发的框架，我们可以使用组件的方式进行集成。每次我们引入组件，进行使用，这样就方便的多。

下面是一个我自己对echarts进行的一个简单的vue组件的集成。

在echarts中

子组件：

props部分是我接收到的参数，父组件获取数据分发橡搭，data是父组件分发给echarts的数据源。

父组件：

如果在大型的项目，而且图表又非常的多，那么vuex少不了。如果把数据集中存储到了vuex中，echarts组件再从vuex中获取数据，我们也能随时保存获取的结果，对这些数据可以添加收藏也可以加入缓存中，下次再请求可以先从缓存调用。接下来会继续分享vuex的使用~~~

封装echars组件：

首先安装echarts  npm  echarts --save

然后新建一个echarts文件夹，新建index.vue文件：

```

<template>

  <div class="echartStyle" ref="echarts"></div>

</template>

<script lang="ts">

let Echarts = require('echarts/lib/echarts')

// 按需引入需要的组件模块

require('echarts/lib/chart/line')

require('echarts/lib/chart/scatter')

require('echarts/lib/component/title')

require('echarts/lib/component/legend')

require('echarts/lib/component/tooltip')

require('echarts/lib/component/toolbox')

require('echarts/lib/component/dataZoom')

import { defineComponent } from 'vue'

export default defineComponent({

  name: 'vue-echarts',

  props: {

    option: {//配置项

      type: Object,

      required: true

    },

    data: {//数据

      type: Array,

      required: true

    },

    series:{

      required:true

    },

    achiveOilDataSuccess: {//判断数据是否获取成功

      type: Boolean,

      required: true

    },

  },

  mounted() {

    let data = this.$props.data

    this.initOption(data)

  },

  updated() {

    let data = this.$props.data

    this.initOption(data)

  },

  methods: {

    //初始化图表配置

    initOption(data: any) {

      let vm = Echarts.init(this.$refs.echarts)

      if (this.$props.achiveOilDataSuccess === false) {

        vm.showLoading({

          text: 'loading',

          color: '#c23531',

          textColor: '#000',

          maskColor: 'rgba(255, 255, 255, 0.2)',

          zlevel: 0

        })//设置加载动画

      } else {

        vm.hideLoading()

      }

      if(this.$props.series){

        this.$props.option.series=this.$props.series

      }

      let legendNumber=this.$props.option.series.length

      if(legendNumber===1){

         this.$props.option.series[0].data = data

      }else{

        for(let i=0i<legendNumberi++){

          this.$props.option.series[i].data=data[i]

        }

      }

      vm.setOption(this.$props.option)

    }

  }

})

</script>

<style lang="scss" scoped>

.echartStyle {

  width: 100%

  height: 5rem

  margin: 0 auto

}

</style>

```

然后在父组件里引用

  <echarts

      :option="option"

      :data="thresholdAccInfoListHBase"

      :achiveOilDataSuccess="achiveOilDataSuccess"

    ><echarts>

---