Echarts — 绘制省级地图

版本：vue@3.0.5 + echarts@5.1.2
本文将介绍如何使用 echarts 绘制一个省级地图（以江西省为例）

一、安装 echarts

npm i echarts --save-dev

二、引入

import * as echarts from "echarts";
import jiangxi from '../assets/jiangxi.json';

三、初始化

< 1 > 创建一个图表容器

<div id="main" style="width: 700px; height: 700px; margin: 80px auto"></div>

< 2 > 初始化图表

const myChart = echarts.init(document.getElementById("main"));

四、配置数据

< 1 > 制造一些假数据（这里也可以通过接口获取数据然后去处理对应的格式）

const cityInfo = [{name: "新余市",x: 240,y: 260,weather: "小雨",images: "src/assets/weather/small.png",itemStyle: { areaColor: "#5698c3" },temp: "26.8",},{name: "赣州市",x: 300,y: 520,weather: "晴",images: "src/assets/weather/晴.png",itemStyle: { areaColor: "#d9a40e" },temp: "27.8",},{name: "吉安市",x: 240,y: 380,weather: "大雨",images: "src/assets/weather/大雨.png",itemStyle: { areaColor: "#1781B5" },temp: "28.8",},{name: "抚州市",x: 400,y: 290,weather: "小雨",images: "src/assets/weather/small.png",itemStyle: { areaColor: "#5698c3" },temp: "25.8",},{name: "鹰潭市",x: 455,y: 240,weather: "雷阵雨",images: "src/assets/weather/雷阵雨.png",itemStyle: { areaColor: "#1677B3" },temp: "24.8",},{name: "上饶市",x: 520,y: 150,weather: "中雨",images: "src/assets/weather/中雨.png",itemStyle: { areaColor: "#B0D5DF" },temp: "30.8",},{name: "景德镇市",x: 455,y: 120,weather: "阴",images: "src/assets/weather/阴.png",itemStyle: { areaColor: "#C3D7DF" },temp: "24.8",},{name: "南昌市",x: 350,y: 180,weather: "多云",images: "src/assets/weather/多云.png",itemStyle: { areaColor: "#93B5CF" },temp: "21.8",},{name: "宜春市",x: 230,y: 200,weather: "中雨",images: "src/assets/weather/中雨.png",itemStyle: { areaColor: "#B0D5DF" },temp: "27.8",},{name: "萍乡市",x: 150,y: 300,weather: "阴",images: "src/assets/weather/阴.png",itemStyle: { areaColor: "#C3D7DF" },temp: "26.8",},{name: "九江市",x: 330,y: 60,weather: "大雨",images: "src/assets/weather/大雨.png",itemStyle: { areaColor: "#1781B5" },temp: "28.8",},
];

< 2 > 配置 option

参考配置：https://www.runoob.com/echarts/echarts-setup.html

const option = {// 容器背景颜色backgroundColor: 'transparent',// 鼠标移入显示浮层tooltip: {trigger: 'item',formatter: function (params) {const dataIndex = params.dataIndex;const cityName = params.name + '<br />';const weatherTip = '天气：' + cityInfo[dataIndex].weather + '<br />';const tempTip = '平均温度：' + cityInfo[dataIndex].temp;return cityName + weatherTip + tempTip;}},series: [{type: 'map',map: '江西',roam: false,top: '11%',aspectScale: 0.75, //长宽比zoom: 1.2, //缩放比x: '25%',selectedMode: 'single',label: {show: true,color: "red"},itemStyle: {areaStyle: {color: '#B1D0EC'},color: '#B1D0EC',},//鼠标hover样式,emphasis: {itemStyle: {areaColor: 'transparent'}},data: cityInfo},{// 配置显示方式为用户自定义type: 'custom',coordinateSystem: 'geo',// 具体实现自定义图标的方法renderItem: function (params, api) {return {type: 'image',style: {image: cityInfo[params.dataIndex].images,x: cityInfo[params.dataIndex].x,y: cityInfo[params.dataIndex].y}}},data: cityInfo}]
};

五、绘制图表

echarts.registerMap('江西', jiangxi);
myChart.setOption(option);

六、效果图

友情提示：省级地图数据和天气图标需要自行下载并且配置路径
地图：http://datav.aliyun.com/tools/atlas/index.html
图标：https://www.iconfont.cn/

Echarts — 绘制省级地图相关推荐

VUE echarts绘制省级/市级地图自动轮循tooltip
效果图绘制省级地图 1.安装echarts依赖,并在main.js中准备 import echarts from "echarts" Vue.prototype.$echarts ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
Echarts实现省级地图的两种方法（以浙江省为例）
Echarts实现省级地图的两种方法(以浙江省为例) 在echarts调用地图时,我们往往会使用GeoJson格式的数据,根据网上的资料,会发现官网会提供世界.中国以及各省的数据.但是,访问下载最新的 ...
Echarts引入省级地图（简便快捷，以浙江省为例）
Echarts引入省级地图(简便快捷,以浙江省为例) 最近需求,利用echarts地图显示浙江省行政区.一开始找了很多资料,但是一直没法实现,也不知道为什么.网上的办法试了个遍,老是不成功.总感觉打开 ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
Echarts绘制各省地图
Echarts 绘制全国地图近期工作需要用到echarts制作省内地图,研究了一番,好多人写的很模糊不好理解,我这里写个菜鸟教程记录一下. 在页面引入 jquery.js h和echarts.js ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
使用Echarts绘制geo地图（案例）
使用Echarts绘制geo地图(案例) 项目使用@vue/cli 4.5.13以及echarts版本为5.1.2. 需求:在省份地图上,将数据进行分段映射.如图: 首先下载geojson数据链接: ...
广西地图html插件,ECharts绘制中国地图、广西地图
准备工作:导入ECharts依赖.和地图需要的.js文件. 文件获取方式: 官网:url github:url (下载完后 :incubator-echarts-4.8.0mapjsprovince目 ...