react中使用ECharts绘制各省市地图

首先，安装对应依赖

npm install echarts --save

2.引入

import React from "react";
// 模块化样式表
import s from "./style.css";
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/visualMap';
import 'echarts/lib/chart/map';
import 'echarts/lib/chart/bar';
import 'echarts/map/js/china';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/gauge';
import 'echarts/lib/chart/pie';
//json地图数据文件，各省市坐标获取方法见文末
var uploadedDataURL = "/asset/get/s/data-1593671529129-u-DcAWe3h.json";

2.创建一个区域快，区域快必须有宽高


var points = [{name: '供应商A',value: [115.974519, 40.457009]
}, {name: '供应商B',value: [116.143267, 39.749144]
}, {name: 'BossSoft',value: [116.843177, 40.376834]
}]var colors = ['#FF8C00', '#00acea', '#1DE9B6'];export default class jinNanMapComponent extends BaseComponent {//生命周期钩子函数componentDidMount() {this.chart0()}// 将echarts实例地图代码放到一个函数中，该函数在生命周期中调用chart0(){//获取展示块的id，展示块必须有宽高var myChart = echarts.init(document.getElementById('main'));// 第二个参数为导入地图文件echarts.registerMap('china', uploadedDataURL);let option = {//背景色backgroundColor: '#fff',color: ['#FF8C00', '#00acea', '#1DE9B6'],tooltip: {trigger: 'item',formatter: '{b}'},legend: {orient: 'vertical',x: 'left',data: ['供应商A', '供应商B'],textStyle: {color: '#fff'}},visualMap: {type: 'continuous',seriesIndex: [2, 3],min: 0,max: 100,calculable: true,color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],textStyle: {color: '#fff'}},geo: {map: 'china',show: false},series: [{type: 'map',map: 'china',aspectScale: 0.75,itemStyle: {borderColor: 'rgba(100,149,237,1)',borderWidth: 0.5,areaColor: 'rgba(0,0,0,0)',},label: {show: true,textStyle: {color: '#fff'},emphasis: {textStyle: {color: '#fff'}}},emphasis: {label: {show: false},itemStyle: {areaColor: 'rgba(0,0,0,0)',}}}, {type: 'effectScatter',coordinateSystem: 'geo',showEffectOn: 'render',rippleEffect: {period: 5,scale: 5,brushType: 'fill'},hoverAnimation: true,label: {formatter: '{b}',position: 'right',offset: [15, 0],color: param => colors[param.dataIndex % colors.length],show: true},itemStyle: {color: (param) => {return colors[param.dataIndex % colors.length];},shadowBlur: 10,shadowColor: '#333',opacity: 0.75},emphasis: {itemStyle: {opacity: 1, //线条宽度}},data: points}, {name: '供应商A',type: 'lines',zlevel: 2,symbol: ['none', 'arrow'],symbolSize: 7,effect: {show: true,period: 4,trailLength: 0.02,symbol: 'circle',symbolSize: 4,color: '#fff'},lineStyle: {width: 0.5, //线条宽度opacity: 0.5, //尾迹线条透明度curveness: .3, //尾迹线条曲直度shadowBlur: 10,},emphasis: {lineStyle: {width: 2, //线条宽度}},data: [{name: '供应商A->BossSoft',value: 40,coords: [[38.936325, 117.402547],[38.936325, 120.402547]],}]}, {name: '供应商B',type: 'lines',zlevel: 2,symbol: ['none', 'arrow'],symbolSize: 7,effect: {show: true,period: 4,trailLength: 0.02,symbol: 'circle',symbolSize: 4,color: '#fff'},lineStyle: {width: 0.5, //线条宽度opacity: 0.5, //尾迹线条透明度curveness: 0.3, //尾迹线条曲直度shadowBlur: 10,},emphasis: {lineStyle: {width: 2, //线条宽度}},data: [{name: '供应商B->BossSoft',value: 80,coords: [[38.936325, 117.402547],[38.936325, 118.402547]]}]}]};myChart.setOption(option);}render() {let {data, timestamp} = this.props;this.scrollRow = 1;return (<div className={s.container}><div className={s.title}>分布地</div><div className={s.mapbox} id="main"></div></div>)}}

3.获取各省市地图轮框坐标json文件方法：

首先第一个是echarts官方的地图geojson数据的实时获取
第二个地图选择器
将得到的json文件导入到第二个参数中即可，或者直接复制json中的所有代码直接放到第二个参数也可以

echarts.registerMap('china', uploadedDataURL);

总结：实现了在react中绘制echarts地图的方法
文末彩蛋，附一个echarts图表社区
里面有大量用户制作的精美图表，安利给大家

react中使用ECharts绘制各省市地图相关推荐

React中使用echarts绘制图表
我们都知道,Echarts图表功能非常强大,使用起来也很方便,我们的项目中就用到了Echarts,现在笔者就带大家看看怎么在react中使用Echarts. 我们要想在react项目中高效使用echa ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
echarts绘制上海市乡镇级地图
echarts绘制上海市乡镇级地图 echarts 最新版本不支持GeometryCollection,虽然有人在4年前就提了issue <!DOCTYPE html> <html ...
echarts setoption方法_在Vue和React中使用ECharts的多种方法
前言俗话说:"工欲善其事,必先利其器".现如今已经有许多成熟易用的可视化解决方案,例如ECharts,AntV等等.我们可以把这些解决方案比作是一套套成熟的"工具&qu ...
vue中使用Echarts绘制K线图
一.需求问题在开发项目中,我们可能会遇到这样的需求.在vue中使用Echarts绘制K线图,进行数据分析.下面是一个简单的K线图绘制,数据是伪造的,虽然不多,但是能够实现大致的K线图效果. 二.需求 ...
在pycharm中使用Echarts绘制单个省份的地图（以内蒙古自治区为例）
今天来复盘一下,如何使用Echarts绘制单个省份的地图,昨天在网上搜了很多教程,代码大差不差,但是运行的时候总出不来,经过自己的琢磨,里面也有很多需要注意的点,今天就以自身的问题来针对几个问题说一下 ...
react中引入echarts中国地图
1.首先写一个容器div去装地图注意设置div的长和高!! <div className="map" style={{width:"500px";hei ...
echarts实现各省市地图、中国地图
之前写过单独的省市地图,好多朋友都问各省市的地图怎么写,今天我就简单的写了个demo.仅供大家参考.不足之处望大家多多指正. 首先我们还是先看下效果图鼠标滑过各个省市的效果如下: 其实写法和之前我写 ...
VUE echarts绘制省级/市级地图自动轮循tooltip
效果图绘制省级地图 1.安装echarts依赖,并在main.js中准备 import echarts from "echarts" Vue.prototype.$echarts ...

react中使用ECharts绘制各省市地图

react中使用ECharts绘制各省市地图相关推荐

最新文章

热门文章