基于vue封装一个echarts通用组件

随着项目越来越多的交互和展示，图表类的看板也在项目中应用的越来越多， echarts作为一款优秀并开源的产品，在项目中也大规模的应用，尤其是边缘计算和大数据可视化的项目中，随处都能见它的身影，以前做了很多的可视化项目，感觉自己忘了很多，最近业余时间总结了一些，并记录在blog里，希望能帮到有用到的开发者

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

<script>
import * as echarts from 'echarts';
import largeScreen from '@/assets/json/theme.json'
export default {
    
    
  props: {
    
    
    option: {
    
    
      type: Object,
      default: () => {
    
     return null }
    }
  },
  data() {
    
    
    return {
    
    
      myChart: ''
    }
  },
  watch: {
    
    
    option: {
    
    
      handler() {
    
    
        this.setOption()
      },
      deep: true
    }
  },
  mounted() {
    
    
    echarts.registerTheme('largeScreen', largeScreen)   //echarts主题配置
    this.myChart = echarts.init(this.$refs.echarts, 'largeScreen')
    this.setOption()
  },
  beforeDestroy() {
    
    
    this.myChart && this.myChart.dispose()
  },
  methods: {
    
    
    setOption() {
    
    
      this.myChart && this.option && this.myChart.setOption(this.option)
    }
  },
}
</script>

<style lang="scss" scoped>
.echarts{
    
    
  width: 100%;
  height: 100%;
}
</style>

图表组件使用时，可直接引入

<template>
  <div>
    <Echarts :option="option" style="height: 100%" />
  </div>
</template>


import Echarts from '@/components/Echarts'
export default {
    
    
  components: {
    
     Echarts },
  data() {
    
    
    return {
    
    
      url: ''   //api
      option: {
    
    
        series: [],
        title: []
      }
    }
  },
    getData() {
    
    
      this.getChartsData()
    },
    async getChartsData() {
    
    
      const {
    
     data } = await getAction(this.url, {
    
      ..params })
      this.option.series[0] = series  
      //or
      this.option.series[0] = dataList.map((item, index) => {
    
    
       // 逻辑处理
        return {
    
    
          ...item,
          name:item.label      
          value: item.label
        } //and so on 总之需要构建类[value、value] 或者 [{name:"', value:''}, {name:"', value:''}] 的数据结构以便echart正确渲染
        
      })
    }  //get
  }  //methods
}

好了，这样就封装好了一个简洁干净，高效不臃肿的echarts组件,开发者只需要update数据即可更新图表，后面有时间我会抽空陆续更新echarts中的基础配置和高阶样式的配置

另外类边缘计算和数据可视化类的管理项目，很多图表的更新都是以来某一项数据的变化而更新的，比如地区、类型、时间等，这时候其实可以抽出一部分使用mixin混入来解决，可以有效降低重复代码量和增强代码的可读性可维护性，mixin使用参见我的另一篇博客：
vue的mixin混入在项目开发中的使用

基于vue封装一个echarts通用组件

猜你喜欢