<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./JS_tools/echarts.js"></script>
</head>
<style>
.chart {
width: 600px;
height: 450px;
background-color: rgb(134, 134, 134);
margin: 30px auto;
}
</style>
<body>
<div class="chart" id="chart"></div>
<script>
(function () {
var myChart = echarts.init(document.getElementById("chart"));
var option = {
// color: [
// "#006cff",
// "#60cda0",
// "#ed8884",
// "#ff9f7f",
// "#0096ff",
// "#9fe6b8"
// ],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
bottom: "0%",
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
series: [
{
name: "地区分布",
type: "pie",
// 这个radius可以修改饼形图的大小
// radius 第一个值是内圆的半径 第二个值是外圆的半径
radius: ["10%", "70%"],
center: ["50%", "50%"],
roseType: "radius",
// 图形的文字标签
label: {
fontSize: 10
},
// 链接图形和文字的线条
labelLine: {
// length 链接图形的线条
length: 6,
// length2 链接文字的线条
length2: 8
},
data: [
{ value: 20, name: "云南" },
{ value: 26, name: "北京" },
{ value: 24, name: "山东" },
{ value: 25, name: "河北" },
{ value: 20, name: "江苏" },
{ value: 25, name: "浙江" }
]
}
]
};
myChart.setOption(option);
// echarts的点击事件的回调函数
myChart.on('click', (params) => {
console.log(params)
});
// 监听浏览器缩放,图表对象调用缩放resize函数
window.addEventListener("resize", function () {
myChart.resize();
});
})();
</script>
</body>
</html>
效果图: