<script>
import axios from 'axios'
// import china from '../../public/static/map/china.json'
export default {
data () {
return {
chartInstance: null,
allData: null,
mapData: {} // 所获取的省份的地图矢量数据
}
},
mounted () {
this.intChart()
// this.$nextTick(() => {
// this.intChart()
// })
},
methods: {
async intChart () {
this.chartInstance = this.$echarts.init(this.$refs.map_ref)
// 获取中国地图的矢量数据
// http://localhost:8999/static/map/china.json
// 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$http
const ret = await axios.get('http://localhost:8999/static/map/china.json')
// console.log(china)
this.$echarts.registerMap('china', ret.data)
console.log(ret.data)
console.log(this.$echarts)
console.log(this.$echarts.getMap())
const initOption = {
geo: {
type: 'map',
map: 'china'
}
}
// this.chartInstance.setOption(initOption)
this.chartInstance.setOption(initOption)
}
}
}
以上为js代码 检查了好久都没有找出原因
最后打开网页检查 以下为html
<template>
<div class='com-container' >
<div class='com-chart' ref='map_ref'></div>
</div>
</template>
后来发现 没给宽高 后来试试了
<template>
<div class='com-container' >
<div class='com-chart' ref='map_ref' style="width:100%;height:100%"></div>
</div>
</template>
啊 数据出现了 原来是因为没给宽高 没出现
标签：map,console,log,矢量,china,chartInstance,echarts,加载 From： https://www.cnblogs.com/xiaobaizitaibai/p/17142657.html