vueパッケージecharts-003

<br>import * as chart from 'assets/js/echart-config';<br>export default {<br> props: {</p>
<pre><code>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:'使用権限TOP 10'
}</code></pre>
<p>},<br> data() {</p>
<pre><code>return {
}</code></pre>
<p>},<br> computed: {</p>
<pre><code>chartDom() {
return echarts.init(this.$refs.chartCompose);
},
optionDom() {
const option = chart.composeOption(this.sourceInfo, this.chartTitle, this.barColors);
return option;
}</code></pre>
<p>},<br> watch: {</p>
<pre><code>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
}</code></pre>
<p>},<br> methods: {</p>
<pre><code>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();
}</code></pre>
<p>},<br> mounted() {</p>
<pre><code>this.chartDom.resize(400, 400);
this.showLoading();
window.addEventListener('resize', this.resize);</code></pre>
<p>},<br> destroyed() {</p>
<pre><code>window.removeEventListener('resize', this.resize);</code></pre>
<p>}<br>}<br>
<br>