本篇主要讲解通过echarts制作一个饼图时所用到的一些代码，及所用到代码的详细作用，记录自己的echarts学习过程，同时希望对看到这篇博客的客友提供些许帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pie2</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="pie2" style="width:1000px;height:800px;border:1px solid darkolivegreen"></div>
<script>
var data=genData(50); //必须放在上面，否则option中的变量data引用不到
//配置数据
var option={
//title:标题
title:{
text:"同名数量统计", //text:主标题文本,支持使用 \n 换行
subtext:"纯属虚构", //subtext:副标题文本，支持使用 \n 换行
left:"center" , //left:title 组件离容器左侧的距离。 left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比, 也可以是 'left', 'center', 'right'(right参数属性没有此参数值)
top:"10px", //top:title 组件离容器上侧的距离。 top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比， 也可以是 'top', 'middle', 'bottom'(bottom参数属性没有此参数值)
},
//tooltip:提示框组件-提示信息:鼠标悬浮图表上时有数据展示 (tooltip可用于：全局、坐标系、系列、系列中的每个数据项)
tooltip:{
show:true, //show:boolean 是否显示提示框组件
trigger:"item", //可选属性 trigger:设置触发类型 可取值有：item(数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用)、axis（坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用）
formatter:"{a}<br/>{b}:{c}({d}%)" //formatter:提示框浮层内容格式器（个人认为较为复杂，会重开一个HTML介绍学习它）
},
//legend:配置图例组件
legend:{
id:"leg", //id:组件ID，默认不指定，指定则可用于在option或者API中引用组件
show:true, //同tooltip中的show属性
type:"scroll", //type:图例的类型，可选值有：plain（普通图例）、scroll（可滚动翻页的图例。使用时可以可以对其进行细节配置，此处省略）
orient:"vertical", //orient:图例列表的布局朝向 可选值：horizontal（图例水平分布）、vertical(图例竖直分布)
right:10, //right/left属性同tooltip中的right/left属性
top:20, //top/bottom属性同tooltip中的top/bottom属性
bottom:20,
data:data.legendData,
selected:data.selected //selected:图例选中状态表
},
//series:系列设置，你的图表是柱状图还是饼图又或者是其他都需要在这里设置,还可以设置鼠标悬浮于图表上时所显示的数据
series:[{
name:"姓名", //name:系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列(!!!)
type:"pie", //type:设置你的图表是什么样的，选择不同的图表，接下来的参数属性配置都不一样
radius:"55%", //radius:饼图的半径，取值类型：number(直接指定外半径值)、string(例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度)、array<number|string>(数组的第一项是内半径，第二项是外半径,如[20,"70%"])
center:["40%","50%"], //center:饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。(支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。)
data:data.seriesData,
emphasis:{
itemStyle:{
shadowBlur:100,
shadowOffsetX:0,
shadowColor:"green"
}
}
}]
};
function genData(count){
var nameList=[
'赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
];
var legendData=[];
var seriesData=[];
for (var i=0;i<count;i++){
var name=Math.random()>0.65 //Math.random():返回0（包含）~1（不包含）之间的一个随机数
?makeWord(4,1)+"."+makeWord(3,0) //
:makeWord(2,1);
legendData.push(name);
seriesData.push({
name:name,
value:Math.round(Math.random()*100000) //Math.round() 方法可把一个数字舍入为最接近的整数。
});
}
return{
legendData:legendData,
seriesData:seriesData
};
function makeWord(max,min){
var nameLen=Math.ceil(Math.random()*max+min); //ceil() 方法可对一个数进行上舍入。
var name=[];
for(var i=0;i<nameLen;i++){
name.push(nameList[Math.round(Math.random()*nameList.length-1)]);
}
return name.join(""); //array.join(): 把数组的所有元素放入一个字符串。
}
}
var piet=echarts.init(document.getElementById("pie2")).setOption(option)
</script>
</body>
</html>
效果图：
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
