最简单的react+echarts画地图

在开始之前我们需要china.json或者china.js

没有的话戳这里

第一部

npm i echarts --save

第二部

import * as echarts from 'echarts' //全部引用

import china from './china.json' //你准备好的china.json

当然了。除了全部引用你也可以按需引用，就是按路径引用里面的小模块

第三部

<div id="main" style={{width:"100%",height:"500px"}}></div>

这边的话最好是给对象设置个宽高以免被其他样式污染了导致看不到效果

最后就是开始配置地图了

const myecharts = echarts.init(document.getElementById("main"))
echarts.registerMap("china", china)//第一个参数是你定义的字符串，下面map要用到，第二个就是你刚刚引入的china.json
var option
myecharts.setOption(option = {geo: {map: "china",show: true,}
})

做到以上的话我们的地图轮廓就已经出来啦！

除此之外我们也可以把option对象中的geo给替换成

            series:[{type:"map",map:"china"}]

这样也可以实现同样的效果，但是略微不同

那光有地图是不行的，我们给他来点坐标点，在series里面加上

            {type: 'effectScatter',coordinateSystem: 'geo',//使用地理坐标系geodata: [[120.13, 33.38],[118.87, 42.28],[120.33, 36.07],]}

使用这个话就会给地图加上坐标点啦，但是记得这个时候option对象中要存在geo对象哦

效果如下：

echarts官网中提供了很多犹如此类的配置项，大家可以去官网看，比如标题，工具箱，颜色，高亮显示之类的。

最简单的react+echarts画地图相关推荐

在vue中使用echarts,echarts-map:echarts画地图
1.首先安装:cnpm install echarts --save 2.然后main.js引入(也可以组件内引入) // 引入ECharts图表公共组件 import echarts from 'e ...
react echarts中国地图的实现
安装echarts npm install echarts --save import { useEffect } from "react" import * as echarts ...
python 利用echarts画地图(热力图)(世界地图，省市地图，区县地图)
首先安装对应的python模块 $ pip install pyecharts==0.5.10 $ pip install echarts-countries-pypkg $ pip install ...
vue 引入echarts画中国地图 Map china not exists
现象:在vue里用echarts画地图时报错:Map china not exists. 只出现了南海诸岛部分原因:没引入地图数据解决: import 'echarts/map/js/china. ...
echarts实现地图飞线
echarts实现地图飞线 echarts画地图 echarts画地图由于地图需要省市区经纬度,需要geoJSON数据,我们使用aliyun官方的JSON数据,以中国地图为例(链接: link.). ...
详解python 利用 pyecharts 画地图(热力图)(世界地图，省市地图，区县地图)、动态流向图
转载: 详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图) Pyecharts绘制全球流向图 pyecharts中文教程官网目录安装对应的python模块世界 ...
echarts geo地图示例_python小白的画地图合集（使用pyecharts)
经过今晚的小摸索,终于可以画出世界地图.省级地图以及全国的热力图.所以特此决定出一个小的合集,建议先去阅读上一篇写的画中国地图,可能那样子你会很快速了解到画图的精髓. 画世界地图依旧是上次的套路: ...
echarts画中国地图！
今天,我们迎来了冬至节气,大家今天吃了什么呀?我想着今天冬至,应该吃一碗饺子,于是去了一家饺子馆,到了那里人惊呆了,真的太多人了!!我随手拍了一张,氛围十分不错,有过年的味道了. 上图为武汉某饺子馆冬 ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...

最简单的react+echarts画地图

最简单的react+echarts画地图相关推荐

最新文章

热门文章