Echarts绘制地图，且可以下钻到省区

点击前

点击后(山东省为例)

1. 安装echarts，echarts按需引入
npm install echarts --save

//引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口
import * as echarts from 'echarts/core';

2.引入echarts后，基于准备好的dom，初始化echarts实例。

const ChartMap = (props) =>{
const {id} = props;
const [name, setName] = useState('china');const renderMap = (code, name) => {const chartId = document.getElementById(id);const myChart = echarts.getInstanceByDom(chartId as HTMLElement);if (myChart) {mapInstance = myChart;} else {mapInstance = echarts.init(chartId as HTMLElement);}};const chinaMapConfig = (name, data) => {// 地图配置const option = {...}mapInstance.clear();mapInstance.setOption(option);}useEffect(() =>{renderMap(name);},[name])return (<div style={{ width: "100%", height: "70vh" }} id={id}></div>);
};
export default ChartMap;

3. 使用echarts.registerMap 注册可用地图

import { MapChart } from 'echarts/charts';
//使用visiualMap来配置图表根据值的范围显示特定的颜色
import { VisualMapComponent } from 'echarts/components';// 必须在使用 use 方法注册了 MapChart 后才能使用 registerMap 注册地图echarts.registerMap(name, data); // name: 地图当前名称和地图的地理数据

4. 地图数据下载，推荐阿里云 DataV
我已经提前下载到本地，可以统一放在后端或者cdn上

import { mapJson } from './map';
import { ahuiJson } from './ahui';// 上海, cp地理位置
export const mapJson = {type: 'FeatureCollection',features: [{type: 'Feature',id: 'shang_hai',properties: {name: '上海',cp: [121.4648, 31.2891],childNum: 19,adcode: '310000',},geometry: {type: 'Polygon',coordinates: [[[120.9375, 31.0254],[121.2012, 31.4648],[121.377, 31.5088],[121.1133, 31.7285],[121.2012, 31.8604],[121.9922, 31.5967],[121.9043, 31.1572],[121.9922, 30.8057],[121.2891, 30.6738],[120.9375, 31.0254],],],},}],
}

5. visualMap 视觉映射组件
visualMap 是视觉映射组件。可以定义为分段型（visualMapPiecewise）或连续型（visualMapContinuous），通过 type 来区分。

visualMap: {left: "left", // visualMap 组件离容器左侧的距离,值为`'left'`, `'center'`, `'right'`，组件会根据相应的位置自动对齐。bottom: 0,itemSymbol:"circle",right: 10,seriesIndex: [0],itemWidth: 10, // 每个图元的宽度itemGap: 4,    // 每两个图元之间的间隔距离，单位为pxpieces: [{gte: 8, lte: 9, label: '连续下降', color: '#FF4D4D', symbol: 'circle'},{gte: 5, lte: 8, label: '本期下降', color: '#FF6F00', symbol: 'circle'},{gte: 1, lte: 5, label: '本期上升', color: '#FFC666', symbol: 'circle'},{gte: 0, lte: 1, label: '连续上升', color: '#13BF30', symbol: 'circle'},{gte: -1, lte: 0, label: '价格预警', color:'', symbol: 'image://http://xxx.png'}],},

6. 利用echartsInstance.resize改变图表尺寸

useEffect(() => {window.addEventListener("resize", function () {mapInstance.resize();});return () => {mapInstance && mapInstance.dispose();};}, []);

7. 地图的后端数据
alwaysDown：true是显示炸弹图标
value: 是根据数据大小显示色值不同

  const mapInfos1 = [{alwaysDown: false,marketShareTrend: "8",name: "上海",provCode: "310000",provName: "上海",value: 1,},{alwaysDown: true,marketShareTrend: "8",name: "安徽",provCode: "340000",provName: "安徽省",value: 8,}]const mapInfos2 = [{alwaysDown: false,marketShareTrend: "2",provCode: "340200",provName: "芜湖市",name: "芜湖市",value: 3},{alwaysDown: false,marketShareTrend: "2",name: "马鞍山市",provCode: "340500",provName: "马鞍山市",value: 3}]

8. 图例禁止点击

const toEntriesObject = (data) => {return data?.features?.map((v) => ({name: v.properties.name,adcode: v.properties.adcode,}));
};const handleClickMap = () => {mapInstance?.on('click', (params) => {clearTimeout(timeFn);timeFn = setTimeout(function() {const name = params.name; //地区nameconst code = toEntriesObject(mapJson).find((el:any) => el.name === name)?.adcode;if(!code) returnsetName(name);}, 250);});// 炸弹不点击mapInstance?.on('datarangeselected',(e) => {const selected = { 0: true, 1: true, 2: true, 3: true, 4: true };if (JSON.stringify(selected) !== JSON.stringify(e.selected) && !Object.values(e.selected)[4]) { //* 判断是否为全部选中，全部选中则不用设置。如果不判断则会死循环e.selected[4] = truemapInstance.dispatchAction({ //* 调用action方法将图例重新设置为全部选中type: 'selectDataRange',selected: e.selected})}})}

9. 炸弹图标添加

geo: {map: name,zoom: 1.25,roam: false,},
series: [{map: name,type: "scatter",coordinateSystem: "geo",symbol: icon,symbolSize: 16,symbolOffset: [2, 8],data:convertData(mapInfos, mapData),tooltip:{show: false}}]

10. 地图的完整配置

const option =  {backgroundColor: '#E1E6EB',tooltip: {trigger: "item",showDelay: 0,transitionDuration: 0.2,},visualMap: {left: "left", // visualMap 组件离容器左侧的距离,值为`'left'`, `'center'`, `'right'`，组件会根据相应的位置自动对齐。bottom: 0,itemSymbol:"circle",right: 10,seriesIndex: [0],itemWidth: 10, // 每个图元的宽度itemGap: 4,    // 每两个图元之间的间隔距离，单位为pxpieces: [{gte: 8, lte: 9, label: '连续下降', color: '#FF4D4D', symbol: 'circle'},{gte: 5, lte: 8, label: '本期下降', color: '#FF6F00', symbol: 'circle'},{gte: 1, lte: 5, label: '本期上升', color: '#FFC666', symbol: 'circle'},{gte: 0, lte: 1, label: '连续上升', color: '#13BF30', symbol: 'circle'},{gte: -1, lte: 0, label: '价格预警', color:'', symbol: 'image://http://xxx.png'}],},geo: {map: name,zoom: 1.25,roam: false,},series: [{name: 'MAP',type: 'map',zoom: 1.25,mapType: name,selectedMode: false,//是否允许选中多个区域label: {normal: {show: true,},emphasis: {show: true}},itemStyle: {normal: {borderColor: "rgba(254, 254, 254, 1)",borderWidth: 1,label:{color: '#48535A'}},emphasis: {areaColor: "#eee",borderColor: "rgba(255,111,0,1)",borderWidth: 1,label:{color: '#FF6F00'}},},data: mapInfos},{map: name,type: "scatter",coordinateSystem: "geo",symbol: icon,symbolSize: 16,symbolOffset: [2, 8],data:convertData(mapInfos, mapData),tooltip:{show: false}}]};

注意：

mapInfos1,mapInfos2中的name的值要和mapJson的name保持一致，这样数据才会展示出来
mapJson的cp字段是为了调整文字展示的位置，防止重叠在一起
serise内scatter的配置与option.geo共存，即在地理坐标系内添加组件，且option.geo.roam为false，否则出现如下情况

Echarts绘制地图，且可以下钻到省区相关推荐

Vue 使用 Apache Echarts 绘制地图（拓展篇）
前言根据大家的私信.留言,还是决定对地图这块的东西进行拓展讲解一下,希望大家能够真正了解.使用.绘制自己想要的地图效果,让大家彻底弄懂Echarts地图,涉及绘制原理.行政区划.SVG地图.地图打点 ...
echarts 绘制地图设置其中某些板块高亮（颜色）
问题描述:当我们用echarts绘制了一个地图,可能需要某个位置高亮. 如下图: 其实有个属性,当我们传入的data数据里面加一行就可以改变它是否选中了.具体代码如下. 当selected:true ...
echarts 3d地图_用Echarts绘制地图-绘制省级地图
公司有一个大数据平台的需求,图表什么的都还好实现.主要就是当中的地图效果我没有做过所以耗费了我一些时间去查资料,万幸还是实现出来了,当然只是一个特别基础的图层没有散点没有下钻,但后面会逐步写出来,所以 ...
ECharts 绘制地图飞线
以官方示例为起点进行修改: https://www.echartsjs.com/gallery/editor.html?c=scatter-map 若自行绘制html进行尝试,请记得引入中国地图或者世 ...
echarts 绘制地图柱状图
现在的地图代码是用的江苏省的json,如果需要绘制别的地区,或者中国地图需要下载指定的json进行替换,如果你找不到json下载,可以私信我. 成果图代码下面的代码中有详情的每个参数的注释,文章中 ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
vue使用echarts绘制地图
由于vue-echarts网上能找到的资源太少了,鼓捣了好久地图也没出来,最后还是放弃了,还是用echarts吧.直接贴代码 <template><div class="& ...
echarts绘制地图-china.json
分为两种一种是使用echarts里面的china.json渲染城市一种是在data的 services写数据中国地图下面是世界地图效果图 option里面配置了弹窗,设置了弹窗的样式配置r ...
echarts 绘制地图飞机路线
Tip: 在 ECharts 3 中不再建议在地图类型的图表使用 markLine 和 markPoint.如果要实现点数据或者线数据的可视化,可以使用在地理坐标系组件上的散点图和线图. 本来要画地图 ...

Echarts绘制地图，且可以下钻到省区

Echarts绘制地图，且可以下钻到省区相关推荐

最新文章

热门文章