|
|
@@ -1,11 +1,10 @@
|
|
|
import React from "react";
|
|
|
import * as echarts from "echarts";
|
|
|
-import "echarts-gl";
|
|
|
-
|
|
|
-// 注意：需要引入世界地图的 geoJSON
|
|
|
import worldJson from "../world.json";
|
|
|
+import topIcon from "../../../../assets/bigscreen/map-bar-head.svg";
|
|
|
+
|
|
|
|
|
|
-class WorldMap extends React.Component {
|
|
|
+class WorldMap2D extends React.Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.chartRef = React.createRef();
|
|
|
@@ -35,107 +34,75 @@ class WorldMap extends React.Component {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- // 根据国家名获取中心经纬度
|
|
|
- getGeoCenterByName(name) {
|
|
|
- const feature = worldJson.features.find((f) => f.properties.name === name);
|
|
|
- if (feature) {
|
|
|
- // 计算多边形的中心点
|
|
|
- const coords = feature.geometry.coordinates.flat(Infinity);
|
|
|
- let lng = 0,
|
|
|
- lat = 0;
|
|
|
- for (let i = 0; i < coords.length; i += 2) {
|
|
|
- lng += coords[i];
|
|
|
- lat += coords[i + 1];
|
|
|
- }
|
|
|
- lng /= coords.length / 2;
|
|
|
- lat /= coords.length / 2;
|
|
|
- return [lng, lat];
|
|
|
- }
|
|
|
- return null;
|
|
|
- }
|
|
|
-
|
|
|
initChart() {
|
|
|
if (!this.chartRef.current) return;
|
|
|
this.chartInstance = echarts.init(this.chartRef.current);
|
|
|
+ // 顶部图标数据，计算 y 偏移（柱子高度的一半）
|
|
|
+ const topIconData = this.props.data.map((d) => {
|
|
|
+ return {
|
|
|
+ name: d.name,
|
|
|
+ value: [d.value[0], d.value[1], d.value[2]], // 位置
|
|
|
+ symbolOffset: [0, -d.value[2] / 2 * 30 ], // Y轴偏移（柱子高度一半 + 额外10像素）
|
|
|
+ };
|
|
|
+ });
|
|
|
const option = {
|
|
|
tooltip: {
|
|
|
formatter: (params) => {
|
|
|
- return `${params.name} <br> ${params.value[2]}`;
|
|
|
+ return `${params.name} <br/>${params.value[2]}`;
|
|
|
},
|
|
|
textStyle: {
|
|
|
- fontSize: 28, // 字体大小
|
|
|
- fontWeight: "bold", // 可选加粗
|
|
|
+ fontSize: 20,
|
|
|
+ fontWeight: "bold",
|
|
|
},
|
|
|
},
|
|
|
- geo3D: {
|
|
|
+ geo: {
|
|
|
map: "world",
|
|
|
- roam: true, // 允许缩放平移
|
|
|
- // regionHeight: 1.1, // 区域厚度，调大更立体
|
|
|
- boxWidth: 200, // 宽度加大
|
|
|
- boxHeight: 20,
|
|
|
- regionHeight: 1,
|
|
|
- viewControl: {
|
|
|
- distance: 120, // 相机拉远一点
|
|
|
- alpha: 30,
|
|
|
- beta: 0,
|
|
|
- },
|
|
|
- distance: 0,
|
|
|
- shading: "lambert",
|
|
|
-
|
|
|
+ roam: true, // 支持缩放拖拽
|
|
|
itemStyle: {
|
|
|
- // 区域透明但微亮
|
|
|
- color: "rgba(255,255,255,0.05)",
|
|
|
- borderColor: "#66ccff", // 边界亮色
|
|
|
- borderWidth: 2,
|
|
|
- fontSize: 28,
|
|
|
+ areaColor: "#005eaa",
|
|
|
+ borderColor: "#00eaff",
|
|
|
+ borderWidth: 1.2,
|
|
|
},
|
|
|
-
|
|
|
emphasis: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- distance: 1,
|
|
|
- color: '#ffffff',
|
|
|
- fontSize: 28
|
|
|
- },
|
|
|
itemStyle: {
|
|
|
- color: "rgba(41,241,250, 0.3)", // 悬浮时区块填充颜色
|
|
|
- borderColor: "#fff", // 悬浮时边框颜色
|
|
|
- borderWidth: 1,
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- light: {
|
|
|
- main: {
|
|
|
- intensity: 1.2,
|
|
|
- shadow: true,
|
|
|
- alpha: 30,
|
|
|
- },
|
|
|
- ambient: {
|
|
|
- intensity: 0.4,
|
|
|
+ areaColor: "#29f1fa", // 悬浮时高亮色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- type: "bar3D",
|
|
|
- coordinateSystem: "geo3D",
|
|
|
- shading: "lambert",
|
|
|
- barSize: 1, // 柱子粗细
|
|
|
+ type: "scatter",
|
|
|
+ coordinateSystem: "geo",
|
|
|
+ symbol: "rect", // 用矩形柱代替点
|
|
|
+ symbolSize: (val) => {
|
|
|
+ const height = val[2] * 30;
|
|
|
+ return [10, height];
|
|
|
+ },
|
|
|
itemStyle: {
|
|
|
- color: "#DE701C",
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ { offset: 0, color: "#EC903A" },
|
|
|
+ { offset: 1, color: "rgba(18,92,178,0)" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ shadowColor: "#4fd2dd",
|
|
|
+ shadowBlur: 10,
|
|
|
+ borderRadius: [8, 8, 0, 0],
|
|
|
},
|
|
|
- // tooltip: {
|
|
|
- // show: true,
|
|
|
- // formatter: (params) => {
|
|
|
- // return `${params.name}<br/>${params.value[2]}`;
|
|
|
- // },
|
|
|
- // textStyle: {
|
|
|
- // // color: "#fff",
|
|
|
- // fontSize: 28,
|
|
|
- // fontWeight: "bold",
|
|
|
- // },
|
|
|
- // },
|
|
|
- data: this.props.data,
|
|
|
+ encode: { tooltip: 2 }, // 提示框显示 value[2]
|
|
|
+ data: this.props.data, // [lng, lat, value]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "scatter",
|
|
|
+ coordinateSystem: "geo",
|
|
|
+ symbol: `image://${topIcon}`, // 图片 URL
|
|
|
+ symbolSize: [15, 15], // 图片大小
|
|
|
+ data: topIconData,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
@@ -145,12 +112,9 @@ class WorldMap extends React.Component {
|
|
|
|
|
|
render() {
|
|
|
return (
|
|
|
- <div
|
|
|
- ref={this.chartRef}
|
|
|
- style={{ width: "100%", height: "100%", zIndex: 1 }}
|
|
|
- />
|
|
|
+ <div ref={this.chartRef} style={{ width: "100%", height: "100%" }} />
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-export default WorldMap;
|
|
|
+export default WorldMap2D;
|
周玉环
