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.
73 lines
1.7 KiB
73 lines
1.7 KiB
<!--
|
|
* @Author: your name
|
|
* @Date: 2021-10-14 13:08:10
|
|
* @LastEditTime: 2021-11-10 15:16:30
|
|
* @LastEditors: Please set LastEditors
|
|
* @Description: In User Settings Edit
|
|
* @FilePath: /data-show/src/components/v-echars-map/index.vue
|
|
-->
|
|
<template>
|
|
<div class="echars-map-cont" ref="mapChart">
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
import { createMap } from "@/api/getMap"
|
|
export default {
|
|
name: "v-echars-map",
|
|
props: {
|
|
opt: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: 'china'
|
|
}
|
|
},
|
|
watch: {
|
|
opt: {
|
|
handler(val) {
|
|
if (JSON.stringify(val) != "{}") {
|
|
this.$nextTick(() => {
|
|
if (!this.myChart) {
|
|
this.drawFun(val);
|
|
} else {
|
|
this.myChart.setOption(val);
|
|
}
|
|
this.$emit("echarsUpdate", this.myChart);
|
|
});
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
myChart: null,
|
|
};
|
|
},
|
|
methods: {
|
|
drawFun(opt) {
|
|
createMap(this.name).then(res => {
|
|
echarts.registerMap(this.name, res.data)
|
|
let eRef = this.$refs.mapChart;
|
|
this.myChart = echarts.init(eRef);
|
|
this.myChart.setOption(opt);
|
|
})
|
|
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.echars-map-cont {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|