You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.2 KiB
68 lines
1.2 KiB
<template>
|
|
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from "echarts";
|
|
import tdTheme from './theme.json' // 引入默认主题
|
|
import '../map/fujian.js'
|
|
|
|
export default {
|
|
name: 'echart',
|
|
props: {
|
|
className: {
|
|
type: String,
|
|
default: 'chart'
|
|
},
|
|
id: {
|
|
type: String,
|
|
default: 'chart'
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '100%'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '2.5rem'
|
|
},
|
|
options: {
|
|
type: Object,
|
|
default: ()=>({})
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
chart: null
|
|
}
|
|
},
|
|
watch: {
|
|
options: {
|
|
handler (options) {
|
|
// 设置true清空echart缓存
|
|
this.chart.setOption(options, true)
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
mounted () {
|
|
echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
|
|
this.initChart();
|
|
},
|
|
beforeDestroy () {
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {
|
|
initChart () {
|
|
// 初始化echart
|
|
this.chart = echarts.init(this.$el, 'tdTheme')
|
|
this.chart.setOption(this.options, true)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|