echarts 饼图
官网：Documentation - Apache ECharts
*******************
配置属性
option = {
series: [
{
type: 'pie', //type为pie，表示图表为饼图
data: [
{
value: 335,
name: '直接访问'
},
{
value: 234,
name: '联盟广告'
},
{
value: 1548,
name: '搜索引擎'
}
]
}
]
};
基本属性
id：组件id，默认不指定
name：系列名称
type：series图表类型，常用值：bar（柱形图）、line（折线图）、pie（饼图）、scatter（散点图）
colorBy: series（同一系列颜色相同）、data（同一维度颜色相同）
legendHoverLink：鼠标滑过时legend（图标）是否高亮，默认true
selectedMode：是否支持多个选中，可选值：true、false（默认）、single、multiple
selectedOffset：选中扇区的偏移距离
clockwise：饼图的扇区是否是顺时针排布，默认true
startAngle：起始角度，从0到360度，默认90度
minAngle：最小扇区角度，用于防止某个值过小导致扇区太小影响交互
minShowLabelAngle：小于这个角度的扇区，不显示标签（label、labelLine）
roseType：是否展示成南丁格尔图，通过半径区分数据大小，可选值：
radius：扇区圆心角展现数据的百分比，半径展现数据的大小
area：所有扇区圆心角相同，仅通过半径展现数据大小
avoidLabelOverlap：是否启用防止标签重叠策略，默认true（开启）
stillShowZeroSum：是否在数据和为0的时候仍显示扇区，默认true
cursor：鼠标悬浮时在图形元素上时鼠标的样式是什么，如：pointer
zlevel：图形的zlevel值，用于canvas分层，数值大的展示在上面
z：图形的z值，优先级比zlevel低，用韵canvas分层，数值大的展示在上面
left：组件离容器左侧的距离，可选值：10（像素）、10%、left、cneter、right
top：件离容器上侧的距离，可选值：10（像素）、10%、top、middle、bottom
right：组件离容器右侧的距离，可选值：10（像素）、10%
bottom：组件离容器下侧的距离，可选值：10（像素）、10%
width：宽度，默认auto（自适应）
height：高度，默认auto（自适应）
center：饼图的中心坐标，数组的第一项是横坐标，第二项是纵坐标，如：[400, 300]、['50%', '50%']
radius：饼图的半径，如：10，10%，[0,10]（内半径，外半径）
seriesLayoutBy：数据集映射方式，可选值：column（默认）、row
datasetIndex：数据集index，如果没有指定，并且dataset存在，那么就会使用dataset
dimensions：数据维度
encode：自定义数据映射方式
dataGroupId：数据组id
data：series中使用的数据，一般使用dataset中的数据，实现数据与配置分离
silent：图形是否不响应和触发鼠标事件，默认为false
动画属性
animation：是否开启动画，默认true
animationType：初始动画效果，可选值：expansion（沿圆弧展开，默认）、scale（缩放效果）
animationTypeUpdate：更新数据时的动画效果，可选值：transition（从起始到终止角度过渡）、scale（数据整体重新沿圆弧展开）
animationThreshold：动画阈值，动画数量大于该值会关闭动画，默认2000
animationDuration：动画持续时间，默认1000ms
animationEasing：动画缓动效果，如：cubicOut
animationDelay：动画初始延时时间
animationDurationUpdate：动画更新时长
animationEasingUpdate：动画更新缓动时长
animationDelayUpdate：动画延时更新时长
# universalTransition：全局过渡动画配置
：是否开启全局延时动画
：如何关联需要动画的系列，默认取系列的id
：对多或者多对一的动画中，当前系列的图形如何分裂成多个图形，可选值：
split：通过一定的算法将分割图形成为多个（柱状图默认）
clone：从当前图形克隆得到多个（散点图默认）
：一对多或者多对一的动画中每个图形的动画延时
占位圆样式：emptyCircleStyle
showEmptyCircle：是否在无数据的时候显示一个占位圆，默认true
：颜色，如：rgb(255,255,255)，rgba(255,255,255,1)，#fff
：边框颜色
：边框宽度，默认无边框
：边框线型，可选值：solid（实线，默认）、dashed、dotted
：虚线偏移量
：线段末端的绘制方式，可选值：butt（方形，默认）、round、square（矩形）
：连接属性，可选值：bevel（三角形，默认）、round、miter（菱形）
：菱形斜接面比例，默认为10，borderJoin为miter时有效
：阴影模糊大小
：阴影颜色
：阴影水平偏移距离
：阴影垂直偏移距离
：阴影透明度, 默认1, 支持从0到1的数字, 0表示不显示
标签属性：label
：是否显示标签,默认false
：文本标签位置，可选值：outside（outer）、inside（inner）、center
：标签旋转,true（径向排布）、数值（旋转角度，从-90度到90度,正值是逆时针）
：标签内容格式器，支持字符串模板和回调函数两种形式
模板字符串：formatter: '{b}: {@score}'
{a}：系列名
{b}：数据名
{c}：数据值
{@×××}：维度名对应的数据，如{@product}：表示维度名为product的值
{@[n]}：维度n对应的数据，如{@[2]}：表示维度2对应的数据，维度从0开始计数
回调函数：(params: Object|Array) => string
：标签颜色，如："#fff"
：字体风格，可选值：normal、italic、oblique
：字体粗细，可选值：normal、bold、bolder、lighter、100|200|300|400...
：字体设置，可选值：sans-serif、serif、monospace、Arial、Courier New、Microsoft YaHei等
：字体大小，如：12
：文本宽度
：文本高度
：行高
：标签背景色，如：'#123234', 'red', 'rgba(0,23,11,0.3)'
：边框颜色
：边框宽度
：边框类型，可选值：solid、dashed、dotted、5、[5, 10]
：虚线偏移量
：文字块的圆角，默认为0
：文字块的内边距，如：[3, 4, 5, 6]（上、右、下、左）、[3,4]([3,4,3,4])、3（[3,3,3,3]）
：阴影颜色
：阴影长度
：阴影水平偏移
：阴影垂直偏移
：文本边框颜色
：文本边框宽度
：文本边框类型，可选值：solid、dashed、dotted、5、[5,10]等
：文字虚线偏移量
：文字阴影颜色
：文字阴影大小
：阴影水平偏移
：阴影垂直偏移
：文本超出长度后，是否截断或者换行
none：不截断或者换行，默认
truncate：截断
break：单词间换行
breanAll：除单词间换行，单词内也换行
：文本超出长度，截断（truncate）后显示的文本，如:...
：文本超过高度是否截断，配置生效
none：不截断
truncate：截断
：自定义富文本样式
alignTo：标签的对齐方式，position值为'outer'时有效，可选值：
none：label line的长度为固定值
labelLine：label line的末端对齐
edge：文字对其
edgeDistance：文边距离，仅当为'outer'并且为'edge'时有效，如：20%
bleedMargin：文本长度，超出长度被裁剪为"..."
distanceToLabelLine:文字与 label line之间的距离,如：5
标签视觉引导线：labelLine
：是否显示视觉引导线
：是否显示在图形上方
：视觉引导线第一段的长度
labelLine.length2：视觉引导项第二段的长度
：是否平滑视觉引导线，默认false
：视觉引导线的最小转角，0-180度
：引导线与扇区法线的最大夹角，0-180度
：颜色，如：rgb(255,255,255)，rgba(255,255,255,1)，#fff
：宽度
：线型，如：solid、dashed、dotted、[5,10]等
：虚线偏移量
：线段末端绘制方式，可选值：butt（方形，默认）、round、square（矩形）
：连接属性，可选值：bevel（三角形，默认）、round、miter（菱形）
：菱形斜接面比例，默认为10，负数、0、Infinity、NaN均会被忽略
：阴影模糊大小
：阴影颜色
：阴影水平偏移
：阴影垂直偏移
：透明度，默认为1，数值为从0到1的数字（0不显示）
标签布局：labelLayout
：是否隐藏重叠的标签
：在标签重叠的时候是否挪动标签位置以防止重叠
：标签的水平位置，如：2（像素值）、20%
：标签的垂直位置，如：2（像素值）、20%
：标签在 x 方向上的像素偏移，可以和x一起使用
：标签在 y 方向上的像素偏移，可以和y一起使用
：标签旋转角度
：标签宽度
：标签高度
：标签水平对其方式，可选值：left、center、right
：标签垂直对齐方式，可选值：top、middle、bottom
：标签字体大小
：标签是否可以拖拽
：标签引导线三个点的位置，格式为：[[x, y], [x, y], [x, y]]
图形样式：itemStyle
：颜色，默认为，可设置：rgb(255,255,255)，rgba(255,255,255,1)，#fff
：边框颜色
：边框宽度，默认无宽度
：边框线型，可选值：solid（默认）、dashed、dotted
：虚线偏移量
：线段末端的绘制方式，可选值：butt（方形，默认）、round、square（矩形）
：末端连接方式，可选值：bevel（三角形连接）、round、miter（菱形）
：斜截面限制比列，borderJoin为miter时有效
：阴影模糊大小
：阴影颜色
：阴影水平偏移
：阴影垂直偏移
：柱条透明度，默认为1，0表示不显示
：饼图扇形区块的内外圆角半径，如：10、10%、[10,20]、[10%,20%]
：图形贴花图案，在、都是true时生效
如果为none表示不使用贴花图案
：贴花图案，如：rect、circle、image://url、path://等
：图案占比大小，从0到1
：是否保持图案长宽比，默认为true
：贴花图案颜色
：贴花图案背景色
：贴花图案横向模式
：贴花图案纵向模式
：图案旋转角度（弧度值），从-到
：生成的图案在未重复之前的宽度上限，通常不需要设置
：生成的图案在未重复之前的高度上限，通常不需要设置
高亮样式：emphasis
：是否开启高亮后扇区的放大效果，默认true
：高亮后扇区的放大尺寸，默认10
：高亮图形时，是否淡出其它数据的图形已达到聚焦的效果，可选值：
none：不淡出其他图形，默认
self：只聚焦（不淡出）当前高亮的数据的图形
series：聚焦当前高亮的数据所在的系列的所有图形
：配置淡出范围，可选值：
coordinateSystem：淡出范围为坐标系，默认
series：淡出范围为系列
global：淡出范围为全局
：文本标签高亮配置，属性同label
：标签视觉引导线高亮配置，属性同labelLine
：图形高亮配置，属性同itemStyle
淡出样式：blur
：标签淡出配置，属性同label
：标签视觉引导线淡出配置，属性同labelLine
：图形淡出配置，属性同itemStyle
选中样式：select，开启selectMode后有效
selectMode：是否支持多选，可选值：true、false（默认）、single、multiple
：标签选中配置，属性同label
：标签视觉引导线选中配置，属性同labelLine
：图形选中配置，属性同itemStyle
图表标注：markPoint
：标记的图形，可选值：circle、rect、round、pin、image://url、path://等
：标记的大小，默认50
：标记的旋转角度，正值表示逆时针
：如果symbol是path://的形式，是否在缩放时保持该图形的长宽比
：标记偏移，如[0,0]
：图形是否不响应和触发鼠标事件，默认为 false
：标注的数据数组
：标注的文本，属性同label
：标注的样式，属性同itemStyle
：标注的高亮样式，内含label、itemStyle
：标注的淡出样式，内含label、itemStyle
#标注的动画属性
：是否开启动画，默认true
：动画阈值，动画数量大于该值会关闭动画，默认2000
：动画持续时间，默认1000ms
：动画缓动效果，如：cubicOut
：动画初始延时时间
：动画更新时长
：动画更新缓动时长
：动画延时更新时长
图表标线：markLine
：标线两端的标记类型，可选值：circle、rect、round、pin、image://url、path://等
：标线两端的标记大小，默认50
：图形是否不响应和触发鼠标事件，默认为 false
：标线数值的精度，默认为2
：标线的数据数组
：标注的文本，属性同label
：标注的样式，属性同lineStyle
：标注的高亮样式，内含label、lineStyle
：标注的淡出样式，内含label、lineStyle
#标注线的动画属性
：是否开启动画，默认true
：动画阈值，动画数量大于该值会关闭动画，默认2000
：动画持续时间，默认1000ms
：动画缓动效果，如：cubicOut
：动画初始延时时间
：动画更新时长
：动画更新缓动时长
：动画延时更新时长
图表区域：markArea
：图形是否不响应和触发鼠标事件，默认为 false
：标注的数据数组
：标注区域的文本，属性同label
：标注区域的样式，属性同itemStyle
：标注区域的高亮样式，内含label、itemStyle
：标注区域的淡出样式，内含label、itemStyle
#标注区域的动画属性
：是否开启动画，默认true
：动画阈值，动画数量大于该值会关闭动画，默认2000
：动画持续时间，默认1000ms
：动画缓动效果，如：cubicOut
：动画初始延时时间
：动画更新时长
：动画更新缓动时长
：动画延时更新时长
提示框：tooltip
：提示框位置，如：[10, 10]（左侧10px、上侧10px）、[10%,10%]
：提示框内容格式化器
：提示框背景色
：提示框边框颜色
：提示框边框宽度
：提示框内边距
padding: 5 // 设置内边距为 5
padding: [5, 10] // 设置上下的内边距为 5，左右的内边距为 10
padding: [ // 分别设置四个方向的内边距
5, // 上
10, // 右
5, // 下
10, // 左
]
：提示框文本样式
：文字颜色
：字体设置，可选值：normal、italic、oblique
：字体粗细，可选值：normal、bold、bolder、lighter、100|200| 300|400...
：字体，可选值：serif、sans-serif、monospace、Arial、Courier New、NewMicrosoft YaHei等
：字体大小
：行高
：文本宽度
：文本高度
：边框颜色
：边框宽度
：边框线性，可选值：solid、dashed、dotted、[5,10]
：虚线偏移量
：字体阴影颜色
：字体阴影长度
：字体水平偏移
：字体垂直偏移
：文本超出宽度是否阶段或者换行，可选值：
none：不截断或者换行
truncate：截断
break：单词间换行
breakAll：单词间、单词内换行
：overflow为truncate时，文末显示文本
：文本超过高度后是否截断，可选值：none、truncate
：额外附加到浮层的css样式，如：box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
*******************
示例
**************
基础饼图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/echarts/"></script>
<script src="/jquery/jquery-3.6."></script>
<script type="text/javascript">
$(function (){
const myChart = ($("#con")[0]);
// 指定图表的配置项和数据
const option = {
title: {
left: 'center',
text: '营业总收入季度分布图',
textStyle: {
color: '#6d6'
}
},
tooltip: {},
legend: {
left: 'right',
top: '10',
orient: 'vertical',
data:['一季度','二季度','三季度','四季度']
},
dataset: {
source: [
['quarter', '一季度', '二季度', '三季度', '四季度'],
['完美世界', 25.74, 25.70, 29.18, 21.58],
['中国神华', 510.8, 539.2, 611, 672]
]
},
series: [
{
name: '完美世界',
type: 'pie',
center: ['25%','50%'], //圆心横坐标、纵坐标
radius: '40%',
seriesLayoutBy: 'row',
encode: {
itemName: 0, //数据项名称，在legend中展示
value: 1
},
label: {
show: false
}
},
{
name: '中国神华',
type: 'pie',
center: ['75%','50%'], //圆心横坐标、纵坐标
radius: '40%',
seriesLayoutBy: 'row',
encode: {
itemName: 0, //数据项名称，在legend中展示
value: 2
},
label: {
show: false
}
}
]
};
// 使用刚指定的配置项和数据显示图表
(option);
})
</script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div style="width: 500px;height:300px;"></div>
</body>
</html> 
**************
圆环图：设置不同的内外半径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/echarts/"></script>
<script src="/js/jquery-3.6."></script>
<script type="text/javascript">
$(function (){
const myChart = ($("#con")[0]);
// 指定图表的配置项和数据
const option = {
title: {
left: 'center',
text: '完美世界2020年营业总收入季度分布图',
textStyle: {
color: '#6d6'
}
},
tooltip: {},
legend: {
left: 'right',
top: '10',
orient: 'vertical',
data:['一季度','二季度','三季度','四季度']
},
dataset: {
source: [
['quarter', '一季度', '二季度', '三季度', '四季度'],
['完美世界', 25.74, 25.70, 29.18, 21.58]
]
},
series: [
{
name: '完美世界',
type: 'pie',
seriesLayoutBy: 'row',
encode: {
itemName: 0, //数据项名称，在legend中展示
value: 1
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
color: '#484',
fontSize: '30',
fontWeight: 'bold'
}
},
radius: ['50%', '70%'] //设置不同的内外半径
}
]
};
// 使用刚指定的配置项和数据显示图表。
(option);
})
</script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div style="width: 500px;height:300px;"></div>
</body>
</html> 
**************
南丁格尔图（玫瑰图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/echarts/"></script>
<script src="/js/jquery-3.6."></script>
<script type="text/javascript">
$(function (){
const myChart = ($("#con")[0]);
// 指定图表的配置项和数据
const option = {
title: {
left: 'center',
text: '中国神华2020年营业总收入季度分布图',
textStyle: {
color: '#6d6'
}
},
tooltip: {},
legend: {
left: 'right',
top: '10',
orient: 'vertical',
//data:['一季度','二季度','三季度','四季度']
},
dataset: {
source: [
['quarter', '一季度', '二季度', '三季度', '四季度'],
['完美世界', 25.74, 25.70, 29.18, 21.58],
['中国神华', 510.8, 539.2, 611, 672]
]
},
series: [
{
name: '中国神华',
type: 'pie',
seriesLayoutBy: 'row',
encode: {
itemName: 0, //数据项名称，在legend中展示
value: 2
},
label: {
show: true
},
roseType: 'area' //设置玫瑰图
}
]
};
// 使用刚指定的配置项和数据显示图表。
(option);
})
</script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div style="width: 500px;height:300px;"></div>
</body>
</html> 