做网站流量要钱吗,花都网站建设,中国能源建设集团有限公司招标网,网站建设没有图片文章目录 一、引入echarts二、下载地图json数据三、编写react组件四、组件使用 一、引入echarts
安装#xff1a;npm i echarts --save
二、下载地图json数据
由于echarts内部不再支持地图数据#xff0c;所以要绘制地图需要自己去下载数据。建议使用阿里云的。 地址npm i echarts --save
二、下载地图json数据
由于echarts内部不再支持地图数据所以要绘制地图需要自己去下载数据。建议使用阿里云的。 地址https://datav.aliyun.com/portal/school/atlas/area_selector 默认展示的是全国地图如果想要某市的json数据点击对应省份即可。
本文中直接复制了json数据然后将数据保存为geoJson.js如下
三、编写react组件
// components/chinaMap/index.tsximport { useRef, useEffect } from react;
import * as echarts from echarts;
import { geoJson } from ./geoJson;const ChinaMap ({option,width 100%,height 100%,
}: {option: any;width?: string;height?: string;
}) {const ref useRef(null);let mapInstance: echarts.ECharts | null;const renderMap () {if (ref.current) {const renderedMapInstance echarts.getInstanceByDom(ref.current);if (renderedMapInstance) {mapInstance renderedMapInstance;} else {mapInstance echarts.init(ref.current);}mapInstance.setOption(option);}};useEffect(() {echarts.registerMap(china, geoJson as any);renderMap();// eslint-disable-next-line react-hooks/exhaustive-deps}, []);useEffect(() {window.onresize function () {// 调用 echarts实例上 resize 方法mapInstance?.resize();};return () {// 销毁实例销毁后实例无法再被使用。mapInstance mapInstance.dispose();};// eslint-disable-next-line react-hooks/exhaustive-deps}, []);return div ref{ref} style{{ width: width, height: height }} /;
};export default ChinaMap;四、组件使用
// src/views/home/chart/map.tsximport React from react;
import ChinaMap from /components/chinaMap/index;const dataList [{value: 218,name: 北京,},{value: 122,name: 广东,},{value: 119,name: 台湾,},{value: 81,name: 香港,},{value: 74,name: 山东,},{value: 68,name: 江苏,},{value: 62,name: 浙江,},{value: 49,name: 上海,},{value: 48,name: 河北,},{value: 43,name: 河南,},{value: 41,name: 辽宁,},{value: 38,name: NULL,},{value: 36,name: 四川,},{value: 33,name: 湖北,},{value: 31,name: 湖南,},{value: 29,name: 安徽,},{value: 28,name: 吉林,},{value: 26,name: 江西,},{value: 24,name: 新疆,},{value: 24,name: 重庆,},{value: 23,name: 福建,},{value: 19,name: 广西,},{value: 18,name: 山西,},{value: 16,name: 云南,},{value: 16,name: 内蒙古,},{value: 16,name: 黑龙江,},{value: 12,name: 陕西,},{value: 12,name: 天津,},{value: 11,name: 宁夏,},{value: 10,name: 甘肃,},{value: 8,name: 贵州,},{value: 4,name: 西藏,},{value: 4,name: 青海,},{value: 1,name: 海南,},
];const Map: React.FC () {const option: any {title: {text: 数据地图,// subtext: 数据来源于阿里云平台,// sublink: https://datav.aliyun.com/portal/school/atlas/area_selector,left: right,textStyle: {color: #000,},},// 提示框tooltip: {trigger: item,showDelay: 0,transitionDuration: 0.2,formatter: (params: any) {const { data {} } params;const { value 0 } data;return ${params.name}br/数量: ${value};},},// 工具导航toolbox: {show: true,left: left,top: top,feature: {// dataView: { readOnly: false },restore: {},saveAsImage: {},},},// 地图数据dataset: {source: dataList,},series: {type: map,map: china,roam: true, // 地图拖动、缩放top: 10%, // 距离顶部距离zoom: 1.2, // 当前视角的缩放比例scaleLimit: {max: 2,min: 1, // 设置默认缩放效果},// 文本标签地区名, 控制样式位置等等可以是数组多个label: {show: true, // 默认状态下显示省市名称position: [1, 100], // 相对的百分比fontSize: 12,offset: [2, 0],align: left,},itemStyle: {areaColor: #e5f7ff, // 地图图形颜色 #fff// borderColor: #a0d4e7, // 地图边框线色// borderWidth: 1, // 地图边框线宽},// 高亮状态下的多边形和文本样式鼠标悬浮在地图块上的效果emphasis: {itemStyle: {areaColor: #ccc,borderColor: #4aacd9,},},},// 视觉映射组件visualMap: {type: continuous,left: right,min: 0,max: 218,inRange: {color: [#e5f7ff,#096dd9,// #fedeb5,// #f96a35,// #c3380e,// #942005,// #5b1305,],},text: [最大值218, 0],textStyle: {color: #000,},// calculable: true},};return (ChinaMap option{option} height80vh width100% /;/);
};export default Map;展示如下 本文项目源码https://download.csdn.net/download/ganyingxie123456/88800965?spm1001.2014.3001.5503
echarts使用地图主要就是要先下载相关地理数据其次就是按需求进行常规的option配置并不难。
