Echarts饼状图属性设置⼤全
1、标题设置
title: {
text: ‘学⽣⽣源地来源分布图’,
subtext: ‘模拟数据’,
// x 设置⽔平安放位置，默认左对齐，可选值：‘center’ ¦ ‘left’ ¦ ‘right’ ¦ {number}（x坐标，单位px）
x: ‘center’,
// y 设置垂直安放位置，默认全图顶端，可选值：‘top’ ¦ ‘bottom’ ¦ ‘center’ ¦ {number}（y坐标，单位px）y: ‘top’,
// itemGap设置主副标题纵向间隔，单位px，默认为10，
itemGap: 30,
backgroundColor: ‘#EEE’,
// 主标题⽂本样式设置
textStyle: {
fontSize: 26,
fontWeight: ‘bolder’,
color: ‘#000080’
},
// 副标题⽂本样式设置
subtextStyle: {
fontSize: 18,
color: ‘#8B2323’
}
},
2、图例设置
legend: {
// orient 设置布局⽅式，默认⽔平布局，可选值：‘horizontal’（⽔平） ¦ ‘vertical’（垂直）
orient: ‘vertical’,
// x 设置⽔平安放位置，默认全图居中，可选值：‘center’ ¦ ‘left’ ¦ ‘right’ ¦ {number}（x坐标，单位px）x: ‘left’,
// y 设置垂直安放位置，默认全图顶端，可选值：‘top’ ¦ ‘bottom’ ¦ ‘center’ ¦ {number}（y坐标，单位px）y: ‘center’,
itemWidth: 24, // 设置图例图形的宽
itemHeight: 18, // 设置图例图形的⾼
textStyle: {
color: ‘#666’ // 图例⽂字颜⾊
},
// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为⽔平间隔，纵向布局时为纵向间隔itemGap: 30,
backgroundColor: ‘#eee’, // 设置整个图例区域背景颜⾊
data: [‘北京’,‘上海’,‘⼴州’,‘深圳’,‘郑州’]
},
3、值域设置
{
name: ‘⽣源地’,
type: ‘pie’,
// radius: ‘50%’, // 设置饼状图⼤⼩，100%时，最⼤直径=整个图形的min(宽，⾼)
radius: [‘30%’, ‘60%’], // 设置环形饼状图， 第⼀个百分数设置内圈⼤⼩，第⼆个百分数设置外圈⼤⼩center: [‘50%’, ‘50%’], // 设置饼状图位置，第⼀个百分数调⽔平位置，第⼆个百分数调垂直位置data: [
{value:335, name:‘北京’},
{value:310, name:‘上海’},
{value:234, name:‘⼴州’},
{value:135, name:‘深圳’},
{value:148, name:‘郑州’}
],
// itemStyle 设置饼状图扇形区域样式
itemStyle: {
// emphasis：英⽂意思是 强调；着重;（轮廓、图形等的）鲜明；突出，重读
// emphasis：设置⿏标放到哪⼀块扇形上⾯的时候，扇形样式、阴影
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(30, 144, 255，0.5)’
font weight bolder}
},
// 设置值域的那指向线
labelLine: {
normal: {
show: false // show设置线是否显⽰，默认为true，可选值：true ¦ false
}
},
// 设置值域的标签
label: {
normal: {
position: ‘inner’, // 设置标签位置，默认在饼状图外 可选值：‘outer’ ¦ ‘inner（饼状图上）’
// formatter: ‘{a} {b} : {c}个 ({d}%)’ 设置标签显⽰内容 ，默认显⽰{b}
// {a}指series.name {b}指series.data的name
// {c}指series.data的value {d}%指这⼀部分占总数的百分⽐
formatter: ‘{c}’
}
}
}
],
radius: ‘50%’, 的时候：
radius: [‘30%’, ‘60%’], 的时候：
4、提⽰框设置
// trigger 设置触发类型，默认数据触发，可选值：‘item’ ¦ ‘axis’
trigger: ‘item’,
showDelay: 20, // 显⽰延迟，添加显⽰延迟可以避免频繁切换，单位ms
hideDelay: 20, // 隐藏延迟，单位ms
backgroundColor: ‘rgba(255,0,0,0.7)’, // 提⽰框背景颜⾊
textStyle: {
fontSize: ‘16px’,
color: ‘#000’ // 设置⽂本颜⾊ 默认#FFF
},
// formatter设置提⽰框显⽰内容
// {a}指series.name {b}指series.data的name
// {c}指series.data的value {d}%指这⼀部分占总数的百分⽐
formatter: ‘{a}
{b} : {c}个 ({d}%)’
},
5、默认⾊板
color: [’#7EC0EE’, ‘#FF9F7F’, ‘#FFD700’, ‘#C9C9C9’, ‘#E066FF’, ‘#C0FF3E’] 6、整个图形背景颜⾊设置
backgroundColor: ‘pink’,
或是直接给Echarts所在的DOM元素设置背景颜⾊也可以。
注意：如何两种⽅式都设置的有，backgroundColor: ‘pink’, ⽣效

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。