vue封装echarts-003

<template lang="html">
<div class="chart chart-compose">

<div ref="chartCompose"></div>

</div>
</template>

<script>
import * as chart from 'assets/js/echart-config';
export default {
props: {

sourceInfo: {
  type: Object,
  required: true,
  default: () => {
    return {
      locationIdArr: [],
      locationNameArr: [],
      maliceNameArr: [],
      maliceTypeCount: {}
    }
  }
},
barColors: {
  type: Array,
  required: false,
  default: () => {
    return ['#115bce', '#3988ff']
  }
},
chartTitle: {
  type: String,
  required: false,
  default: '使用权限 TOP10'
}

},
data() {

return {
}

},
computed: {

chartDom() {
  return echarts.init(this.$refs.chartCompose);
},
optionDom() {
  const option = chart.composeOption(this.sourceInfo, this.chartTitle, this.barColors);
  return option;
}

},
watch: {

sourceInfo: {
  handler(cates) {
    this.hideLoading();
    if ( cates.locationIdArr && cates.locationIdArr.length && cates.locationNameArr && cates.locationNameArr.length && cates.maliceNameArr && cates.maliceNameArr.length && cates.maliceTypeArr && cates.maliceTypeArr.length ) {
      this.doRender();
    } else {
      this.chartDom.setOption(chart.emptyOption(this.chartTitle), true);
    }
  },
  deep: true
}

},
methods: {

doRender() {
  this.chartDom.setOption(this.optionDom, true);
},
resize() {
  this.chartDom.resize();
},
showLoading() {
  this.chartDom.showLoading({
    text: '',
    color: '#3988ff',
    textColor: '#000',
    maskColor: 'rgba(255, 255, 255, 0)',
    zlevel: 0
  });
},
hideLoading() {
  this.chartDom.hideLoading();
}

},
mounted() {

this.chartDom.resize(400, 400);
this.showLoading();
window.addEventListener('resize', this.resize);

},
destroyed() {

window.removeEventListener('resize', this.resize);

}
}
</script>

<style lang="scss">
</style>