vue中Echarts封装

Posted 2023-04-08

参考技术A 封装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=0;i<legendNumber;i++)

          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>

在vue 中使用百度echarts

参考技术A

前言：在vue2.0中使用 百度echarts 有三种解决方案。

这样每次都要获取图表dom元素 然后通过setOption渲染数据，最后在mounted中初始化。很麻烦。

vue-echarts 是ECharts 的 Vue.js 组件，基于 ECharts v4.1.0 + 开发，依赖 Vue.js v2.2.6 +，意思就是可以直接把echarts实例当中vue中的组件来使用，不用每次都获取dom、挂在dom，轻松使用echarts的所用功能。。。

v-charts 是基于vue2二次封装的图表组件库，功能没有echarts多 但也够用了，官网很详细，这里用一个官网例子说明问题。

以上，可跟据需求选用，如果需求简单可直接用 v-charts