@joakimono/echarts-extension-leaflet
Version:
Leaflet map extension for Apache Echarts 5
127 lines (124 loc) • 3.86 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<meta http-equiv="cleartype" content="on" />
<meta http-equiv="x-dns-prefetch-control" content="on" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Example using pie chart with echarts-extension-leaflet</title>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha512-Zcn6bjR/8RZbLEpLIeOwNtzREBAJnUKESxces60Mpoj+2okopSAcSUIUOseddDm0cxnGQzxIR7vJgsLZbdLE3w=="
crossorigin="anonymous"
/>
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha512-BwHfrr4c9kmRkLw6iXFdzcdWV/PGkVgiIyIWLLlTSXzWQzxuSg4DiQUCpauz/EWjgk5TYQqX/kvn9pG1NpYfqg=="
crossorigin="anonymous"
></script>
<!-- ECharts CDN -->
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"
></script>
<!-- echarts leaflet extension -->
<script
type="text/javascript"
src="../dist/echarts-extension-leaflet.js"
></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body,
#echarts-lmap {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="echarts-lmap"></div>
<!-- data is only for example -->
<script type="text/javascript">
var data = {
a: [10, 20, 30, 40],
b: [15, 20, 36, 42],
c: [17, 42, 15, 31],
};
var geoCoords = {
a: [10, 65],
b: [11, 66],
c: [9, 64],
};
var pieDimensions = ["A", "B", "C", "D"];
var pieSeries = [];
echarts.util.each(data, function (values, name) {
pieSeries.push({
type: "pie",
name: name,
coordinateSystem: "lmap",
center: geoCoords[name],
radius: 20,
data: echarts.util.map(values, function (value, idx) {
return {
name: pieDimensions[idx],
value: value,
};
}),
label: {
show: false,
},
emphasis: {
label: {
show: true,
},
labelLine: {
show: true,
lineStyle: {
color: "#fff",
},
},
},
});
});
var option = {
// lmap component option
lmap: {
center: [10, 65],
zoom: 5,
resizeEnable: true,
// It's better to set this option to false if data is large.
renderOnMoving: true,
echartsLayerInteractive: true,
largeMode: false,
// Note: Please DO NOT use the initial option `layers` to add Satellite/RoadNet/Other layers now.
// Do it after you have retrieved the leaflet instance.
},
tooltip: {
trigger: "item",
},
animation: true,
series: pieSeries,
};
// initialize echarts
var chart = echarts.init(document.getElementById("echarts-lmap"));
chart.setOption(option);
// get Leaflet extension component and Leaflet instance
var lmapComponent = chart.getModel().getComponent("lmap");
var lmap = lmapComponent.getLeaflet();
L.tileLayer(
"https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
{
attribution:
"Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community",
}
).addTo(lmap);
</script>
</body>
</html>