<template>
<div id="china-map" style="width: 100%; height: 500px"></div>
</template>
<script>
export default {
mounted() {
this.initCharts()
},
methods: {
initCharts() {
let chinaMap = document.getElementById('china-map')
let myChart = this.echarts.init(chinaMap)
// 绘制图表 canvas画布
myChart.setOption(this.option)
window.onresize = function() {
console.log('uguufiuu')
myChart.resize()
}
}
},
data() {
return {
option: {
title: { text: '中国地图' },
geo: {
show: true,
map: 'china',
emphasis: {
label: {
show: false
}
},
label: {
emphasis: {
show: false
},
show: true //地图文字显示
},
itemStyle: {
areaColor: '#eee',
borderColor: '#fdc000',
shadowBlur: 4,
shadowColor: '#fdc000',
shadowOffsetY: 10
}
},
series: [
{
type: 'map',
map: 'china',
emphasis: {
label: false
},
ite
vue使用echarts设置中国地图
最新推荐文章于 2024-07-23 11:13:06 发布
本文介绍如何在Vue项目中使用Echarts库来绘制中国地图,详细讲解配置过程和关键代码,帮助开发者实现地图展示功能。
摘要由CSDN通过智能技术生成