62 lines
1.3 KiB
Vue
62 lines
1.3 KiB
Vue
<template>
|
|
<div :id="id" :class="className" :style="{ height, width }"></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: 'barChart1',
|
|
},
|
|
className: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '400px',
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '400px',
|
|
},
|
|
render: {
|
|
type: Function,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.chart = window.echarts.init(document.getElementById(this.id))
|
|
setTimeout(() => {
|
|
this.setOption({})
|
|
}, 400)
|
|
// 大小自适应
|
|
window.addEventListener('resize', () => {
|
|
this.chart.resize()
|
|
})
|
|
},
|
|
methods: {
|
|
reLoad() {
|
|
let opt = {}
|
|
if (this.render) {
|
|
opt = this.render(opt)
|
|
}
|
|
this.chart.setOption(opt, true)
|
|
},
|
|
setOption(opt) {
|
|
if (this.render) {
|
|
opt = this.render(opt, this.chart)
|
|
}
|
|
this.chart.setOption(opt)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style> |