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()

      
      var myChart = echarts.init(document.getElementById(`${this.elementId}`))

      
      myChart.setOption(this.options)

      
      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>