认定了一个女孩 就要好好的珍惜对待她，人生不容辜负，你必须要更加努力 。加油 骚年。
用 echarts 做动态中国区域地图 或者全国地图 效果如下
做这些 必须先引入echarts 怎么引入的 自己去echarts 官网看 ，这里不解释了
说明下 这个区域地图 需要从阿里云可视化数据请求过来
/portal/school/atlas/area_selector#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
所以你要从后端拿到当前的位置，或者 你自己定位 这个根据具体业务 然后拿到省的code 去阿里云请求当前省的的区域 下面是请求地址
https://geo./areas_v3/bound/geojson?code=100000_full
拿到数据后 接下来 就是写我们业务了
// 这是放图表的结构<div class="ditu_box_box_cont" ref="mapDataAll"></div>// 在methods里面写下面内容// 拿到地图数据mapDataFun() {console.log(resfullData, "resfullData");// 这个this.mapJson 就是数据 我是直接下载本地了 这个就应该是你从后端请求回来的某个区域数据 下面进行处理this.mapData = this.mapJson.features.map((item) => {return {name: item.properties.name,value: Math.ceil(Math.random() * 50), // 这个返回值随机也行 根据自己的业务需求level: item.properties.level,areaCode: item.properties.adcode,};});console.log(this.mapData, " this.mapData");this.renderingView(); // 这个 是渲染地图的},renderingView() {// 渲染地图var myChartMap = echarts.init(this.$refs.mapDataAll);echarts.registerMap("cityMap", this.mapJson, {}); //加载自定义边界数据地图var mapChangeData = {tooltip: {trigger: "item",// 鼠标移入的时候显示该地区 和一些值 自己调成 自己想要的就行formatter: (p) => {console.log(p);let val = p.value;if (window.isNaN(val)) {val = 0;}let txtCon ="<div style='text-align:center'> 地区：" +p.name +"<br />value值：" +p.data.value +"<br />code：" +p.data.areaCode +"</div>";return txtCon;},},dataRange: {orient: "horizontal",x: "center",itemWidth: 20, // 值域图形宽度，线性渐变水平布局宽度为该值 * 10itemHeight: 10, // 值域图形高度，线性渐变垂直布局高度为该值 * 10itemGap: 10,padding: 10,splitList: [{start: -1000, end: 0, label: "缺失值", color: "#E0E0E0" },{start: 35, label: ">35", color: "#2066AC" },{start: 25, end: 35, label: "25-35", color: "#5996B7" },{start: 15, end: 25, label: "15-25", color: "#92C5DE " },{start: 5, end: 15, label: "5-15", color: "#FCDBC7" },{start: 0, end: 5, label: "<5", color: "#F3A482" },],textStyle: {color: "#3899FF", // 值域文字颜色},selectedMode: false,color: ["#E0022B", "#E09107", "#A3E00B"],},series: [{name: "地图",type: "map",mapType: "cityMap",aspectScale: 0.85, //地图长度比color: ["#5F85F6", "#F9C96B"],itemStyle: {normal: {show: true,},emphasis: {// 鼠标移入时区域的样式areaColor: "#FFBD5A", // 鼠标移入的背景色borderWidth: 0,color: "green",},},label: {normal: {show: true,textStyle: {color: "#000000", //省市区字体颜色},},textStyle: {color: "rgba(255,255,255,1)",fontSize: 30,opacity: 1,backgroundColor: "rgba(0,0,0,0.2)",},},data: this.mapData, // 上面添加了 name,value,level,cityCode的数据},],};myChartMap.setOption(mapChangeData);},
至此结束
如有不足之处请指出 或直接联系邮箱 yuyong1663519276@ 谢谢
