var continent = [ "亚洲" , "欧洲" , "非洲" , "美洲" , "大洋洲" ];
var population = [
[9000, 870 , 3000 , 1000 , 5200 ],
[ 3400, 8000 , 2300 , 4922 , 374 ],
[2000, 2000 , 7700 , 4881 , 1050 ],
[3000, 8012 , 5531 , 500 , 400 ],
[3540, 4310 , 1500 , 1900 , 300 ]
];
```
可以用第三方库，比如 echarts，Chart.js 等：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: '世界人口分布图'
},
tooltip: {},
legend: {
data: ['亚洲', '欧洲', '非洲', '美洲', '大洋洲']
},
series: [{
name: '人口分布',
type: 'pie',
data: [
{ value: 9000, name: '亚洲' },
{ value: 870, name: '欧洲' },
{ value: 3000, name: '非洲' },
{ value: 1000, name: '美洲' },
{ value: 5200, name: '大洋洲' }
]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
可以结合echarts试试，只要把数据丢过去就可以了。
样式很简单，就不多说。
其中的蓝色部分的id是top，而灰色部分的id是main。
window.onload=function(){
var main = document.getElementById('main');
// 拖动
var top = document.getElementById('top');
// 设置点击
top.onmousedown = function(event){
fndown(event,main);
}
}上面部分很简单，首先取到蓝色部分的元素，和主要的元素，为top元素设置鼠标点击事件。点击后调用以下函数：
function fndown(event,main){
event = event || window.event;
var disX = event.clientX - main.offsetLeft,
disY = event.clientY - main.offsetTop;
document.onmousemove = function(event){
event = event || window.event;
fnMove(event,disX,disY,main);
}
top.onmouseup = function(){
document.onmousemove = null;
top.onmouseup = null;
}
}在这个函数内，我们首先获取到当前的鼠标位置和main元素相距上左两面的距离，计算得出鼠标在元素内距离元素上左两端的距离。
注意这里的拖动事件只能挂载在document上，否则只有鼠标在元素内才可以拖动，如果鼠标出了元素就无法拖动，用户体验不好。当然鼠标点击的事件onmousedown和鼠标松开的事件onmouseup都是挂载在top元素上的。
下面是鼠标移动的函数：
function fnMove(event,disX,disY,main){
var l = event.clientX - disX,
t = event.clientY - disY；
main.style.left=l+'px';
main.style.top=t+'px';
}这里我们先获取到鼠标移动的位置，本来我们直接设置main距离左边和上边的距离就是鼠标位置可以实现拖动吗？答案是可以的。鼠标位置不断更新，main距离左边和上边的距离也不断变化，是不是就实现了拖动呢。尝试一下就发现这样是 有bug 的。因为对位置的更新默认就是对元素的左上角的位置进行更新，如果这样做，我们一拖动就会发现鼠标的位置变到了main元素的左上角，这样就很不和谐。
因此我们要将鼠标距离元素边界的位置计算出来并减去，减去过后的值就是main元素左上角距离浏览器左上角的距离。