Echarts之饼图制作

本篇主要讲解通过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>

效果图：

Echarts之饼图制作相关推荐

echarts的饼图制作分析
echarts底层是使用canvas的类库ZRender实现的,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. 看了echarts的饼状图,思考了他的实现方法那么canvas怎么绘制饼状 ...
echarts之饼图制作+标示线
1,安装echarts组件 npm install echarts -s 2,在main.js中全局引入以及挂载 import echarts from 'echarts';//引入 Vue.prot ...
Echarts 解决饼图文字过长重叠的问题
Echarts 解决饼图文字过长重叠的问题参考文章: (1)Echarts 解决饼图文字过长重叠的问题 (2)https://www.cnblogs.com/yingsu/p/10608014.ht ...
echarts饼图解析html标签,解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
java word 饼图_[Java教程]echarts标准饼图解读(一)——基本配置demo
[Java教程]echarts标准饼图解读(一)--基本配置demo 0 2016-11-21 17:00:18 echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title) ...
Echarts pie 饼图类型后显示数据
Echarts pie 饼图类型后显示数据 sysPie:function(libtypelist){var that=this;libtypelist=that.indexData.libtypel ...
Echarts实现饼图+饼图中心文字显示
Echarts实现饼图+饼图中心文字显示描述效果源代码描述 Echarts实现饼图+中心文字显示. 在 title 内实现饼图中心文字展示. 效果源代码 let data = [{ name ...
echart饼图标签重叠_解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
如何制作饼图？制作步骤有哪些？专业的饼图制作软件
同一种数据,往往有多种可视化呈现的方式.然而,在我们将数据可视化的过程中,却经常会被"惯性思维"所束缚.饼图常用于统计学模块,它是一个分区的特殊形状如饼的圆形图.但如今,饼图不仅仅 ...

Echarts之饼图制作

Echarts之饼图制作相关推荐

最新文章

热门文章