<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#chart-panel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 1000px;
height: 750px;
}
</style>
<script src="./lib/5.5.0/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="chart-panel"></div>
<script type="text/javascript">
//初始化图表对象。
var myChart = echarts.init(document.getElementById('chart-panel'));
//图表配置。
// This example requires ECharts v5.4.0 or later
myChart.showLoading();
$.get('./json/usa.json', function (usaJson) {
echarts.registerMap('USA', usaJson, {
Alaska: {
left: -131,
top: 25,
width: 15
},
Hawaii: {
left: -110,
top: 28,
width: 5
},
'Puerto Rico': {
left: -76,
top: 26,
width: 2
}
});
function randomPieSeries(center, radius) {
const data = ['A', 'B', 'C', 'D'].map((t) => {
return {
value: Math.round(Math.random() * 100),
name: 'Category ' + t
};
});
return {
type: 'pie',
coordinateSystem: 'geo',
tooltip: {
formatter: '{b}: {c} ({d}%)'
},
label: {
show: false
},
labelLine: {
show: false
},
animationDuration: 0,
radius,
center,
data
};
}
let option = {
toolbox: {
show: true,
feature: {
saveAsImage: {
},
},
},
geo: {
map: 'USA',
roam: true,
itemStyle: {
areaColor: '#e7e8ea'
}
},
tooltip: {},
legend: {},
series: [
randomPieSeries([-86.753504, 33.01077], 15),
randomPieSeries([-116.853504, 39.8], 25),
randomPieSeries([-99, 31.5], 30),
randomPieSeries(
// it's also supported to use geo region name as center since v5.4.1
+echarts.version.split('.').slice(0, 3).join('') > 540
? 'Maine'
: // or you can only use the LngLat array
[-69, 45.5],
12
)
]
};
myChart.hideLoading();
//将图表对象和图表配置进行关联。
myChart.setOption(option);
});
</script>
</body>
</html>
