echarts 饼图配置详解
作者：互联网
标题设置
1 title: {
2 text: '某站点用户访问来源',
3 subtext: '模拟数据',
4 // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
5 x: 'center',
6 // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
7 y: 'top',
8 // itemGap设置主副标题纵向间隔，单位px，默认为10，
9 itemGap: 30,
10 backgroundColor: '#EEE',
11 // 主标题文本样式设置
12 textStyle: {
13 fontSize: 26,
14 fontWeight: 'bolder',
15 color: '#000080'
16 },
17 // 副标题文本样式设置
18 subtextStyle: {
19 fontSize: 18,
20 color: '#8B2323'
21 }
22 },
图例设置
1 legend: {
2 // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
3 orient: 'vertical',
4 // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
5 x: 'left',
6 // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
7 y: 'center',
8 itemWidth: 24, // 设置图例图形的宽
9 itemHeight: 18, // 设置图例图形的高
10 textStyle: {
11 color: '#666' // 图例文字颜色
12 },
13 // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
14 itemGap: 30,
15 backgroundColor: '#eee', // 设置整个图例区域背景颜色
16 data: ['搜索引擎','直接访问','邮件营销','联盟广告','视频广告']
17 },
值域设置
1 series: [
2 {
3 name: '访问来源',
4 type: 'pie',
5 // radius: '50%', // 设置饼状图大小，100%时，最大直径=整个图形的min(宽，高)
6 radius: ['30%', '60%'], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
7 center: ['50%', '50%'], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
8 data: [
9 {value:335, name:'搜索引擎'},
10 {value:310, name:'直接访问'},
11 {value:234, name:'邮件营销'},
12 {value:135, name:'联盟广告'},
13 {value:148, name:'视频广告'}
14 ],
15 // itemStyle 设置饼状图扇形区域样式
16 itemStyle: {
17 // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
18 // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
19 emphasis: {
20 shadowBlur: 10,
21 shadowOffsetX: 0,
22 shadowColor: 'rgba(30, 144, 255，0.5)'
23 }
24 },
25 // 设置值域的那指向线
26 labelLine: {
27 normal: {
28 show: false // show设置线是否显示，默认为true，可选值：true ¦ false
29 }
30 },
31 // 设置值域的标签
32 label: {
33 normal: {
34 position: 'inner', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
35 // formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b}
36 // {a}指series.name {b}指series.data的name
37 // {c}指series.data的value {d}%指这一部分占总数的百分比
38 formatter: '{c}'
39 }
40 }
41 }
42 ]
series的radius设为50%时
series的radius设为['30%', '60%'], 的时候：
提示框设置
1 tooltip: {
2 // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
3 trigger: 'item',
4 showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
5 hideDelay: 20, // 隐藏延迟，单位ms
6 backgroundColor: 'rgba(255,0,0,0.7)', // 提示框背景颜色
7 textStyle: {
8 fontSize: '16px',
9 color: '#000' // 设置文本颜色 默认#FFF
10 },
11 // formatter设置提示框显示内容
12 // {a}指series.name {b}指series.data的name
13 // {c}指series.data的value {d}%指这一部分占总数的百分比
14 formatter: '{a} <br/>{b} : {c}个 ({d}%)'
15 }
背景颜色设置
1 backgroundColor: 'red'
饼图每块颜色设置
1 color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#C0FF3E']
标签：10,name,series,配置,默认,详解,设置,可选值,echarts 来源： https://www.cnblogs.com/wen-web/p/15088720.html