vue3+echarts绘制中国地图

最近接到一个需求是做一个中国地图样式大概是这样的

需求是要去掉南海，但是由于csdn地图校验，图片如果没有南海会出现图片违规情况，要实现去掉南海，百度查阅相关资料都是说要这样，这个方法的大概意思就是：在地图中对特定的区域配置样式。穿梭车

regions: [{name: "南海诸岛",value: 0,itemStyle: {normal: {opacity: 0,label: {show: false,},},},},],

经实现还是不行，因为可能是因为我用的china.json的问题，只有一部分小的那个南海群岛去掉了，但是地图鸡脚那个地方的依旧显示。百度后需要替换json数据，穿梭车里边包含2个json，一个是去掉了南海诸岛，一个是保留的，加上上边的代码可以完整实现。

代码

首先我们需要引入echarts，现在echarts应该已经到5了，我们开发的时候建议看v5的版本

npm install echarts --save 或者
cnpm install echarts --save

引入成功后

import * as echarts from 'echarts'
import china from '../public/china.json';
echarts.registerMap('china', china);
app.config.globalProperties.$echarts = echarts

//注意如果不显示的话，需要给myMap增加固定的高和宽
<div id="myMap" ref="myMap" class="border"></div><script>
import {defineComponent,ref,getCurrentInstance,onMounted,
} from "vue";
export default defineComponent({setup(){let { proxy } = getCurrentInstance();
const chart = ref(null);
const mapOption = ref({backgroundColor: "#FFFFFF",geo: {map: "china",roam: false,zoom: 1.2,scaleLimit: { min: 0, max: 3 }, // 缩放级别regions: [{name: "南海诸岛",value: 0,itemStyle: {normal: {opacity: 0,label: {show: false,},},},},],itemStyle: {areaColor: "#BEDAEE", //默认的地图板块颜色borderWidth: 1,borderColor: "#009ce0",},},title: {text: "资源池分步",x: "center",y: 20,},tooltip: {trigger: "item",},//配置属性series: [{name: "数据",type: "map",mapType: "china",roam: false,geoIndex: 0,label: {normal: {show: false, //省份名称,},emphasis: {show: false,},},data: [{ name: "北京", value: Math.round(Math.random() * 500) },{ name: "天津", value: Math.round(Math.random() * 500) },{ name: "上海", value: Math.round(Math.random() * 500) },{ name: "重庆", value: Math.round(Math.random() * 500) },{ name: "河北", value: Math.round(Math.random() * 500) },{ name: "河南", value: Math.round(Math.random() * 500) },{ name: "云南", value: Math.round(Math.random() * 500) },{ name: "辽宁", value: Math.round(Math.random() * 500) },{ name: "黑龙江", value: Math.round(Math.random() * 500) },{ name: "湖南", value: Math.round(Math.random() * 500) },{ name: "安徽", value: Math.round(Math.random() * 500) },{ name: "山东", value: Math.round(Math.random() * 500) },{ name: "新疆", value: Math.round(Math.random() * 500) },{ name: "江苏", value: Math.round(Math.random() * 500) },{ name: "浙江", value: Math.round(Math.random() * 500) },{ name: "江西", value: Math.round(Math.random() * 500) },{ name: "湖北", value: Math.round(Math.random() * 500) },{ name: "广西", value: Math.round(Math.random() * 500) },{ name: "甘肃", value: Math.round(Math.random() * 500) },{ name: "山西", value: Math.round(Math.random() * 500) },{ name: "内蒙古", value: Math.round(Math.random() * 500) },{ name: "陕西", value: Math.round(Math.random() * 500) },{ name: "吉林", value: Math.round(Math.random() * 500) },{ name: "福建", value: Math.round(Math.random() * 500) },{ name: "贵州", value: Math.round(Math.random() * 500) },{ name: "广东", value: Math.round(Math.random() * 500) },{ name: "青海", value: Math.round(Math.random() * 500) },{ name: "西藏", value: Math.round(Math.random() * 500) },{ name: "四川", value: Math.round(Math.random() * 500) },{ name: "宁夏", value: Math.round(Math.random() * 500) },{ name: "海南", value: Math.round(Math.random() * 500) },{ name: "台湾", value: Math.round(Math.random() * 500) },{ name: "香港", value: Math.round(Math.random() * 500) },{ name: "澳门", value: Math.round(Math.random() * 500) },], //数据},],});onMounted(() => {console.log(proxy, chart.value, mapOption.value);chart.value = proxy.$echarts.init(document.getElementById("myMap"),"macarons");chart.value.setOption(mapOption.value);// this.chart.on("click", function(params) {//   //此点击事件也可以做为其他echarts图表的点击 事件//   alert(params.name);//   console.info(params);// });});
}
})
</script>

还有一张地图是这样的

这里边也去掉了南海，如果你的需要增加，请按照最上边修改China.json,并修改下边regions的南海诸岛的样式
每个地图板块的颜色不一样。这个百度我没找到方法，所以就自己看文档找到了一个实现方法，如果有更好的方法实现方法，可以共同交流。
实现方法见下

//记住一定要给这个id加宽高
<div id="NationView" ref="NationView"></div>
<script>
import {defineComponent,ref,getCurrentInstance,onMounted,
} from "vue";
export default defineComponent({setup(){let { proxy } = getCurrentInstance();
const chart = ref(null);
const mapOption = ref({backgroundColor: "#FFFFFF",geo: {map: "china",roam: false,zoom: 1.2,scaleLimit: { min: 0, max: 3 }, // 缩放级别regions: [{name: "南海诸岛",value: 0,itemStyle: {normal: {opacity: 0,label: {show: false,},},},},{name: "新疆",value: Math.round(Math.random() * 500),itemStyle: {areaColor: "#7995B1",},},{name: "北京",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#55718C" },},{name: "天津",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#9AAFC3" },},{name: "上海",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#7894B0" },},{name: "重庆",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#7A96B1" },},{name: "河北",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#A0B1C7" },},{name: "河南",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#7995B1" },},{name: "云南",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#B4C2D2" },},{name: "辽宁",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#98ABC3" },},{name: "黑龙江",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#7B96B1" },},{name: "湖南",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#F3F5F7" },},{name: "安徽",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#A4B5C5" },},{name: "山东",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#98ADC3" },},{name: "江苏",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#BDC9D9" },},{name: "浙江",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#93A9BE" },},{name: "江西",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#BBC7D6" },},{name: "湖北",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#9DB2C7" },},{name: "广西",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#D1DBE5" },},{name: "甘肃",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#91A7BE" },},{name: "山西",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#ADBBCA" },},{name: "内蒙古",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#98ADC3" },},{name: "陕西",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#96ACC2" },},{name: "吉林",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#819AB4" },},{name: "福建",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#90A9C0" },},{name: "贵州",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#97ABC1" },},{name: "广东",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#EEEDEA" },},{name: "青海",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#8CA3BB" },},{name: "西藏",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#859EB8" },},{name: "四川",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#7B97B2" },},{name: "宁夏",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#B5C2D3" },},{name: "海南",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#ADBCCC" },},{name: "台湾",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#DFE0EE" },},{name: "香港",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#7995B1" },},{name: "澳门",value: Math.round(Math.random() * 500),itemStyle: { areaColor: "#7995B1" },},],itemStyle: {//areaColor: "#BEDAEE", //默认的地图板块颜色borderWidth: 1,borderColor: "#009ce0",},},title: {text: "资源池分步",x: "center",y: 20,},tooltip: {trigger: "item",},//配置属性series: [{name: "数据",type: "map",mapType: "china",roam: false,geoIndex: 0,label: {normal: {show: false, //省份名称,},emphasis: {show: false,},},//data 这里的data删除了，因为设置了geoIndex之后，这里边的itemStyle就不生效了},],});onMounted(() => {console.log(proxy, chart.value, mapOption.value);chart.value = proxy.$echarts.init(document.getElementById("myMap"),"macarons");chart.value.setOption(mapOption.value);// this.chart.on("click", function(params) {//   //此点击事件也可以做为其他echarts图表的点击 事件//   alert(params.name);//   console.info(params);// });//鼠标移入地图不变黄色chart.value.on("mouseover", function() {chart.value.dispatchAction({type: "downplay",});});});
}
})
</script>

vue3+echarts绘制中国地图相关推荐

echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
vue中使用echarts绘制中国地图
首先需要一个绘制中国地图的json文件(资源还在审核,审核过后会重新贴上来) 1.首先引入echarts和json文件,在需要的地方引即可 import echarts from 'echarts'; ...
广西地图html插件,ECharts绘制中国地图、广西地图
准备工作:导入ECharts依赖.和地图需要的.js文件. 文件获取方式: 官网:url github:url (下载完后 :incubator-echarts-4.8.0mapjsprovince目 ...
Vue环境下用ECharts绘制中国地图，并实现拖动、缩放与各省份自动轮播高亮显示
}, { name: "福建", value: 20, }, { name: "贵州", value: 74, }, { name: "广东" ...
echaer 地图_用echarts绘制中国地图
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
vue集成echarts 绘制中国地图
最近项目遇见了需要以中国地图展示的需求了解到 echarts 是一个很好用的图表展示工具 ,但发现官网没有关于中国地图的组件,经过了解,echarts 5.0以上将中国地图去掉了,需要用到chi ...
使用Echarts绘制中国地图看这篇就够了（认真脸！）
世界那么大我画张地图看看! 一.效果图 1 二.代码具体编码参考官方Demo:echarts.baidu.com/echarts2/doc/example/map5.html 三.地图的扩展(值 ...
vue使用echarts来绘制中国地图下钻省市区县级地图
文章目录前言一.echarts 二.使用步骤 1.vue安装.引入echarts 2.使用echarts 总结前言公司需要一个中国地图点击可进入省市区县级,但是在我使用echarts绘制中国地 ...

vue3+echarts绘制中国地图

最近接到一个需求是做一个中国地图样式大概是这样的

代码

还有一张地图是这样的

vue3+echarts绘制中国地图相关推荐

最新文章

热门文章

vue3+echarts绘制中国地图

最近接到一个需求是做一个中国地图 样式大概是这样的

代码

还有一张地图是这样的

vue3+echarts绘制中国地图相关推荐

最新文章

热门文章

最近接到一个需求是做一个中国地图样式大概是这样的