87 lines
2.0 KiB
TypeScript
87 lines
2.0 KiB
TypeScript
import React, { useEffect, useRef } from "react";
|
|
import * as echarts from "echarts";
|
|
import indonesiaGeo from "../../public/assets/geo/indonesia.json";
|
|
|
|
export const IndonesiaMap: React.FC = () => {
|
|
const chartRef = useRef<HTMLDivElement>(null);
|
|
const myChart = useRef<echarts.EChartsType | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!chartRef.current) return;
|
|
(window as any).echarts = echarts;
|
|
|
|
const fixedGeo = {
|
|
...indonesiaGeo,
|
|
features: indonesiaGeo.features.map((f) => ({
|
|
...f,
|
|
properties: {
|
|
...f.properties,
|
|
name: f.properties.Propinsi, // 🔥 inilah kuncinya
|
|
},
|
|
})),
|
|
};
|
|
|
|
echarts.registerMap("indonesia", fixedGeo as any);
|
|
|
|
const chart = echarts.init(chartRef.current);
|
|
myChart.current = chart;
|
|
|
|
const rawData = [
|
|
{ name: "DI. ACEH", value: 10 },
|
|
{ name: "SUMATERA UTARA", value: 20 },
|
|
{ name: "DKI JAKARTA", value: 100 },
|
|
{ name: "JAWA BARAT", value: 30 },
|
|
{ name: "IRIAN JAYA TIMUR", value: 20 },
|
|
];
|
|
|
|
console.log("raw", rawData);
|
|
chart.setOption({
|
|
backgroundColor: "#d3d3d3",
|
|
title: {
|
|
text: "Sebaran Data",
|
|
left: "center",
|
|
textStyle: { color: "#000" },
|
|
},
|
|
visualMap: {
|
|
min: 0,
|
|
max: 100,
|
|
show: true,
|
|
seriesIndex: 0,
|
|
inRange: {
|
|
color: ["#ffffff", "#ff0000"],
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "map",
|
|
map: "indonesia",
|
|
// nameProperty: "properties.Propinsi", // harus cocok
|
|
|
|
roam: true,
|
|
zoom: 1.2,
|
|
center: [120, -2],
|
|
label: {
|
|
show: false,
|
|
color: "#000",
|
|
},
|
|
itemStyle: {
|
|
borderColor: "#999",
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
areaColor: "#ffcccc",
|
|
},
|
|
},
|
|
data: rawData,
|
|
},
|
|
],
|
|
});
|
|
|
|
return () => {
|
|
chart.dispose();
|
|
};
|
|
}, []);
|
|
|
|
return <div ref={chartRef} style={{ height: "100%", width: "100%" }} />;
|
|
};
|