一起做网店官方网站,美丽乡村 村级网站建设,不用下载就能看的网站的浏览器,郴州网站制作公司地址引入#xff1a;使用 DataV 引入地图的教程是参考别人的#xff0c;主要介绍修改地图相关的样式#xff1b; 引入地图 是参考别人的#xff0c;这里自己再整理一遍#xff0c;注意需要安装 5 版本以上的 echarts#xff1b; DataV 网址#xff1a;https://datav.aliyun.…引入使用 DataV 引入地图的教程是参考别人的主要介绍修改地图相关的样式 引入地图 是参考别人的这里自己再整理一遍注意需要安装 5 版本以上的 echarts DataV 网址https://datav.aliyun.com/portal/school/atlas/area_selector 选中你需要的地图区域点复制 然后再组件中
templatediv classhellodiv stylewidth: 800px;height: 600px; refaaa/div/div
/templatescript
import * as echarts from echarts
import getShanXiMap from ../api/getShanXiMapexport default {name: HelloWorld,mounted() {// 初始化统计图对象var myChart echarts.init(this.$refs[aaa]);// 获取移入的每一个省份的配置信息myChart.on(mouseover, function (params) {console.log(params);})// 显示 loading 动画myChart.showLoading();// 再得到数据的基础上进行地图绘制getShanXiMap.then(res {// 得到结果后关闭动画myChart.hideLoading();// 注册地图数据放在axios返回对象的data中echarts.registerMap(SX, res.data);var option {series: [{name: 陕西地图,type: map,map: SX, // 这是上面注册时的名字label: {show: true,// 地图上显示的文字颜色color: #0A4788},// 重点更改地图的颜色和当前激活部分的颜色itemStyle: {// 正常预览的状态下更改背景色和边框线颜色normal: {areaColor: #D9EBFE,borderColor: #FFFFFF,},// 选中的状态下更改背景色emphasis: {areaColor: #75B6F6,label: {show: true,color: #fff}},},// 鼠标点击后select: {// 标签文本的样式设置label: {show: true,color: #fff},// 地图区域的样式设置itemStyle: {// 被点击后的背景颜色areaColor: #75B6F6,},},}]};myChart.setOption(option);})}}
/scriptstyle scoped langless
.hello {width: 800px;height: 2000px;background-color: skyblue;
}
/style更改样式的主要是这一部分要注意写的位置是在series里面
// 重点更改地图的颜色和当前移入部分的颜色
itemStyle: {// 正常预览的状态下normal: {// 更改背景色和边框线颜色areaColor: #D9EBFE,borderColor: #FFFFFF},// 悬浮区域emphasis: {// 更改背景颜色areaColor: #75B6F6}
},// 鼠标点击后
select: {// 标签文本的样式设置label: {show: true,color: #fff},// 地图区域的样式设置itemStyle: {// 被点击后的背景颜色areaColor: #75B6F6,},
},预览效果
补充
