echarts 绘制报表 vue 通用组件模板

echarts 绘制报表 vue 通用组件模板

Start

• 最近频繁遇到制作echart的报表图需求，这里列举一个常用的组件模板，方便快速初始化页面

具体代码

<template>
  <div class="create-category">
    <div :id="elementId" class="main"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
      
      
  name: 'CreateCategory',
  props: {
      
      
    // 类型
    type: {
      
      
      type: String,
      default: ''
    },
    // 类型
    elementId: {
      
      
      type: String,
      default: ''
    },
    // 配置
    options: {
      
      
      type: Object,
      default() {
      
      
        return {
      
      }
      }
    }
  },
  data() {
      
      
    return {
      
      
      myChart: null
    }
  },
  mounted() {
      
      },
  methods: {
      
      
    // 初始化数据
    initData(data) {
      
      
      this.options.series[0].data = data || []

      // 每次初始化之前，手动重置一下相关表单的逻辑
      this.myChart && this.myChart.dispose()

      // 2.在DOM加载完毕后 我们再操作DOM-拿到我们的main
      var myChart = echarts.init(document.getElementById(`${ 
        this.elementId}`))

      // 3.传入参数即可
      myChart.setOption(this.options)

      // echart点击事件
      myChart.on('click', (param) => {
      
      
        this.$emit('clickCallBack', this.options, param)
      })

      this.myChart = myChart
      window.addEventListener('resize', this.$_vm_resize)

      this.$on('hook:destroyed', () => {
      
      
        window.removeEventListener('resize', this.$_vm_resize)
      })
    },
    $_vm_resize() {
      
      
      this.myChart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.create-category {
      
      
  .main {
      
      
    width: 100%;
    height: 600px;
  }
}
</style>