import React, { useEffect, useState, useRef } from "react";
import * as echarts from 'echarts/core'
import ReactEchartsCore from 'echarts-for-react/lib/core'
import {
GeoComponent,
TooltipComponent,
VisualMapComponent
} from 'echarts/components'
import {
MapChart,
BarChart,
LinesChart,
ScatterChart
} from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use(
[
MapChart,
BarChart,
LinesChart,
ScatterChart,
GeoComponent,
TooltipComponent,
VisualMapComponent,
CanvasRenderer
]
);
import { geoJson } from './mapgeoJson'
function ChinaMap() {
const [myChart, set_myChart] = useState();
const chartRef = useRef(null);
useEffect(() => {
echarts.registerMap("china", geoJson);
const markPointData = [{
"name": "长沙",
"coord": [112.59, 28.12],
"all_val":5,
"abnormal_val":1,
"normal_val":4
},
{
"name": "北京",
"coord": [116.46, 39.92],
"all_val":5,
"abnormal_val":1,
"normal_val":4
},
{
"name": "合肥",
"coord": [117.27, 31.86],
"all_val":5,
"abnormal_val":1,
"normal_val":4
}
];
const options = {
// title: {
// text: "漫入漫出分布",
// left: "center",
// },
tooltip: {
trigger: "item",
formatter: function (params) {
return `${params.name}: ${params.value || 0}`;
},
},
visualMap: {
show: false,
min: 800,
max: 50000,
text: ["High", "Low"],
realtime: false,
calculable: true,
inRange: {
color: ["lightskyblue", "yellow", "orangered"],
},
},
dataRange: {//左下角的颜色块。start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值
x: 'left',
y: 'bottom',
show: false,
splitList: [
{start: 41, label: '> 41 极高', color: '#69A4FE'},
{start: 30, end: 40, label: '31 - 40 高', color: '#4F87FF'},
{start: 21, end: 30, label: '21 - 30 中', color: '#AECEFF'},
{start: 11, end: 20, label: '11 - 20 低', color: '#D2E4FF'},
{start:0, end: 10,label: '0 -10 无数据', color: '#69A4FE'}
]
},
geo: {//地理坐标系组件
map: 'china',//注册的地图名称
roam: false,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
zoom:1.2,//当前视角的缩放比例
label: {//图形上的文本标签（显示地图省份）
normal: {
show: true,
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal: {
// areaColor: '#000',
borderWidth: 2, //设置外层边框
borderColor:'#2C76E3',
},
emphasis: {
show: false,
// areaColor: '#01215c'
}
},
// itemStyle: {
// normal:{
// borderColor: 'rgba(0, 0, 0, 0.2)'//图形的描边颜
// },
// emphasis:{
// areaColor: '#F3B329',
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// shadowBlur: 20,
// borderWidth: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
// }
// }
},
series: [
{
type: "map",
map: "china",
zoom: 1.2,
markPoint: { //图表标注。
symbol: 'path://M510.77974326 962S192.08934248 555.19771133 192.08934248 380.69040078a318.69040078 318.69040078 0 0 1 637.38080156 0c0 174.50731055-318.69040078 581.30959922-318.69040078 581.30959922z m-3.43293047-715.19389717a134.45645273 134.45645273 0 1 0 135.60076231 133.88429795 135.02860752 135.02860752 0 0 0-135.60076231-133.88429795z',
symbolSize: [10, 15], //图形大小
label: {
normal: {
show: true,
},
emphasis: {
show: true,
}
},
itemStyle: {
normal: {
"color": 'blue'
}
},
data: markPointData
},
// 这是要显示的数据
// data: [
// { name: "重庆市", value: 20057.34 },
// { name: "新疆维吾尔自治区", value: 15477.48 },
// { name: "宁夏回族自治区", value: 31686.1 },
// { name: "西藏自治区", value: 6992.6 },
// { name: "内蒙古自治区", value: 44045.49 },
// { name: "河南省", value: 4045.49 },
// ],
data:[
{ name: '北京', value: 1 },
{ name: '天津', value: 2 },
{ name: '上海', value: 3 },
{ name: '重庆', value: 4 },
{ name: '河北', value: 5 },
{ name: '河南', value: 6 },
{ name: '云南', value: 7 },
{ name: '辽宁', value: 8 },
{ name: '黑龙江', value: 9 },
{ name: '湖南', value: 10 },
{ name: '安徽', value: 11 },
{ name: '山东', value: 12 },
{ name: '新疆', value: 13 },
{ name: '江苏', value: 14 },
{ name: '浙江', value: 15 },
{ name: '江西', value: 16 },
{ name: '湖北', value: 17 },
{ name: '广西', value: 18 },
{ name: '甘肃', value: 19 },
{ name: '山西', value: 20 },
{ name: '内蒙古', value: 21 },
{ name: '陕西', value: 22 },
{ name: '吉林', value: 23 },
{ name: '福建', value: 24 },
{ name: '贵州', value: 25 },
{ name: '广东', value: 26 },
{ name: '青海', value: 27 },
{ name: '西藏', value: 28 },
{ name: '四川', value: 29 },
{ name: '宁夏', value: 30 },
{ name: '海南', value: 31 },
{ name: '台湾', value: 32 },
{ name: '香港', value: 33 },
{ name: '澳门', value: 34 }
],
itemStyle: {
normal: {
//areaColor: '#000',
borderColor: '#2C76E3',
borderWidth: 1
},
emphasis: {
show: false,
areaColor: null
}
},
// // 自定义命名映射，不设置的话，label默认是使用 geoJson中的name名
// nameMap: {
// "新疆": "新疆维吾尔自治区",
// "西藏": "西藏自治区",
// "内蒙古": "内蒙古自治区",
// },
},
],
}
const chartDom = echarts.init(chartRef.current);
chartDom.setOption(options, true);
set_myChart(chartDom);
const resize = () => chartDom.resize();
window.addEventListener('resize', resize)
return () => {
window.removeEventListener("resize", resize)
}
}, [])
return (
<div id="my_chart_line" ref={chartRef} style={{ height: "100%", width: "100%" }}></div>
)
}
export default ChinaMap
浙公网安备 33010602011771号