index.html
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Geometry Styles - Marker with echarts</title>
<style type="text/css">
html,body{margin:0px;height:100%;width:100%}
.container{width:100%;height:100%}
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<body>
<script type="text/javascript" src="echarts.simple.min.js"></script>
<div id="map" class="container"></div>
<script>
var map = new maptalks.Map('map', {
center: [-0.113049,51.49856],
zoom: 14,
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains: ["a","b","c","d"],
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
})
});
var chartDom = document.createElement('div');
chartDom.style.cssText = 'width:650px; height:300px;';
createChart(chartDom);
var echartsUI = new maptalks.ui.UIMarker([-0.113049,51.49856], {
'draggable' : true,
'content' : chartDom
}).addTo(map).show();
// ECharts's chart creation
function createChart(dom) {
var myChart = echarts.init(dom);
var option = {
title : {
x:'center'
},
tooltip : {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
x : 'center',
y : 'bottom',
data:['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
},
toolbox: {
show : true,
feature : {
mark : { show: true },
dataView : { show: true, readOnly: false },
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : { show: true },
saveAsImage : { show: true }
}
},
calculable : true,
series : [
{
name:'Area mode',
type:'pie',
radius : [30, 110],
center : ['50%', '50%'],
roseType : 'area',
data:[
{ value:10, name:'rose1' },
{ value:5, name:'rose2' },
{ value:15, name:'rose3' },
{ value:25, name:'rose4' },
{ value:20, name:'rose5' },
{ value:35, name:'rose6' },
{ value:30, name:'rose7' },
{ value:40, name:'rose8' }
]
}
]
};
myChart.setOption(option);
}
</script>
</body>
</html>