直接点饼图/点饼图图例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>eCharts 统计图 x 轴实现拉伸滑动</title>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mainDiv" style="height: 400px; width: 500px"></div>
<script>
drawFun();
function drawFun() {
let option = {
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "center",
},
series: [
{
name: "Access From",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "40",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" },
],
},
],
};
const eChart = echarts.init(document.getElementById('mainDiv')); // 初始化 echarts 实例
eChart.setOption(option);
//表格大小自适应
eChart.resize();
window.addEventListener("resize", () => {
setTimeout(function () {
eChart.resize();
}, 1000);
});
//点击事件
eChart.on("click", function (param) {
alert("name值:" +
param.name +
'\n' +
"value值:" +
param.value);
});
//范围点击
eChart.on("legendselectchanged", function (param) {
eChart.setOption({
legend: { selected: { [param.name]: true } },
});
alert("name值:" +
param.name +
'\n' +
"value值:拿不到的" +
"");
});
}
</script>
</body>
</html>