1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <template>
<div style="width: 400px; height: 300px;"></div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import echarts from 'echarts'
@Component
export default class ECharts extends Vue {
@Prop({ default: () => ({}) }) private options!: echarts.EChartOption | echarts.EChartsResponsiveOption
private _chart?: echarts.ECharts
protected mounted () {
this.draw()
}
@Watch('options', { deep: true })
private draw () {
if (!this._chart) {
this._chart = echarts.init(this.$el as HTMLDivElement)
}
this._chart.setOption(this.options)
}
}
</script>
|