echarts饼状图设置位置
设置饼状图的位置通过 属性，默认是 [50%, 50%].
在 Echarts ⽂档中查设置图标位置，设置条形图的位置，设置饼状图的位置，到很艰⾟。
1. 设置条形图的位置通过 id 的 x 属性设置图形 x 轴⽅向距左上⾓的位置 ，x、y、x2、y2 的的含义如下图：
2. 设置饼状图的位置通过 属性，默认是 [50%, 50%].
看下⾯的 Echarts 基本配置，很清晰：
theme = {
// 全图默认背景
// backgroundColor: ‘rgba(0,0,0,0)’,
// 默认⾊板
color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
'#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
'#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'],
// 图表标题
title: {
x: 'left', // ⽔平安放位置，默认为左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
//textAlign: null // ⽔平对齐⽅式，默认根据x设置⾃动调整
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 标题边框颜⾊
borderWidth: 0, // 标题边框线宽，单位px，默认为0（⽆边框）
padding: 5, // 标题内边距，单位px，默认各⽅向内边距为5，
/
/ 接受数组分别设定上右下左边距，同css
itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主标题⽂字颜⾊
},
subtextStyle: {
color: '#aaa' // 副标题⽂字颜⾊
}
},
/
/ 图例
legend: {
legend: {
orient: 'horizontal', // 布局⽅式，默认为⽔平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'center', // ⽔平安放位置，默认为全图居中，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 图例边框颜⾊
borderWidth: 0, // 图例边框线宽，单位px，默认为0（⽆边框）
padding: 5, // 图例内边距，单位px，默认各⽅向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为⽔平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形⾼度
textStyle: {
color: '#333' // 图例⽂字颜⾊
}
},
// 值域
dataRange: {
orient: 'vertical', // 布局⽅式，默认为垂直布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'left', // ⽔平安放位置，默认为全图左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'bottom', // 垂直安放位置，默认为全图底部，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
/
/ ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 值域边框颜⾊
borderWidth: 0, // 值域边框线宽，单位px，默认为0（⽆边框）
padding: 5, // 值域内边距，单位px，默认各⽅向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为⽔平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 值域图形宽度，线性渐变⽔平布局宽度为该值 * 10 itemHeight: 14, // 值域图形⾼度，线性渐变垂直布局⾼度为该值 * 10 splitNumber: 5, // 分割段数，默认为5，为0时为线性渐变
color: ['#1e90ff', '#f0ffff'],//颜⾊
//text:['⾼','低'], // ⽂本，默认为数值⽂本
textStyle: {
color: '#333' // 值域⽂字颜⾊
}
},
toolbox: {
orient: 'horizontal', // 布局⽅式，默认为⽔平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'right', // ⽔平安放位置，默认为全图右对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
backgroundColor: 'rgba(0,0,0,0)', // ⼯具箱背景颜⾊
borderColor: '#ccc', // ⼯具箱边框颜⾊
borderWidth: 0, // ⼯具箱边框线宽，单位px，默认为0（⽆边框） padding: 5, // ⼯具箱内边距，单位px，默认各⽅向内边距为5， // 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为⽔平间隔，纵向布局时为纵向间隔
itemSize: 16, // ⼯具箱图形宽度
featureImageIcon: {}, // ⾃定义图⽚icon
featureTitle: {
mark: '辅助线开关',
markUndo: '删除辅助线',
markClear: '清空辅助线',
dataZoom: '区域缩放',
dataZoomReset: '区域缩放后退',
dataView: '数据视图',
lineChart: '折线图切换',
barChart: '柱形图切换',
restore: '还原',
saveAsImage: '保存为图⽚'
}
},
// 提⽰框
tooltip: {
trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis' showDelay: 20, // 显⽰延迟，添加显⽰延迟可以避免频繁切换，单位ms
hideDelay: 100, // 隐藏延迟，单位ms
transitionDuration: 0.4, // 动画变换时间，单位s
backgroundColor: 'rgba(0,0,0,0.7)', // 提⽰背景颜⾊，默认为透明度为0.7的⿊⾊ borderColor: '#333', // 提⽰边框颜⾊
borderRadius: 4, // 提⽰边框圆⾓，单位px，默认为4
borderWidth: 0, // 提⽰边框线宽，单位px，默认为0（⽆边框）
padding: 5, // 提⽰内边距，单位px，默认各⽅向内边距为5，
// 接受数组分别设定上右下左边距，同css
axisPointer: { // 坐标轴指⽰器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle: { // 直线指⽰器样式设置
color: '#48b',
width: 2,
type: 'solid'
},
shadowStyle: { // 阴影指⽰器样式设置
width: 'auto', // 阴影⼤⼩
color: 'rgba(150,150,150,0.3)' // 阴影颜⾊
}
},
textStyle: {
color: '#fff'
}
},
// 区域缩放控制器
dataZoom: {
orient: 'horizontal', // 布局⽅式，默认为⽔平布局，可选为：
// 'horizontal' ¦ 'vertical'
// x: {number}, // ⽔平安放位置，默认为根据grid参数适配，可选为：
// {number}（x坐标，单位px）
// y: {number}, // 垂直安放位置，默认为根据grid参数适配，可选为：
// {number}（y坐标，单位px）
// width: {number}, // 指定宽度，横向布局时默认为根据grid参数适配
// height: {number}, // 指定⾼度，纵向布局时默认为根据grid参数适配
backgroundColor: 'rgba(0,0,0,0)', // 背景颜⾊
dataBackgroundColor: '#eee', // 数据背景颜⾊
fillerColor: 'rgba(144,197,237,0.2)', // 填充颜⾊
handleColor: 'rgba(70,130,180,0.8)' // ⼿柄颜⾊
},
// ⽹格
grid: {
x: 80,
x: 80,
y: 60,
x2: 80,
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#ccc'
},
// 类⽬轴
categoryAxis: {
position: 'bottom', // 位置
nameLocation: 'end', // 坐标轴名字位置，⽀持'start' | 'end'
boundaryGap: true, // 类⽬起始和结束两端空⽩策略
axisLine: { // 坐标轴线
show: true, // 默认显⽰，属性show控制显⽰与否
lineStyle: { // 属性lineStyle控制线条样式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick: { // 坐标轴⼩标记
show: true, // 属性show控制显⽰与否，默认不显⽰
interval: 'auto',
// onGap: null,
inside: false, // 控制⼩标记是否在grid⾥
length: 5, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: '#333',
width: 1
}
},
axisLabel: { // 坐标轴⽂本标签，详见axis.axisLabel
show: true,
interval: 'auto',
rotate: 0,
margin: 8,
/
/ formatter: null,
textStyle: { // 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE color: '#333'
}
},
splitLine: { // 分隔线
show: true, // 默认显⽰，属性show控制显⽰与否
// onGap: null,
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
splitArea: { // 分隔区域
show: false, // 默认不显⽰，属性show控制显⽰与否
// onGap: null,
areaStyle: { // 属性areaStyle（详见areaStyle）控制区域样式
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
}
}
},
// 数值型坐标轴默认参数
valueAxis: {
position: 'left', // 位置
position: 'left', // 位置
nameLocation: 'end', // 坐标轴名字位置，⽀持'start' | 'end'
nameTextStyle: {}, // 坐标轴⽂字样式，默认取全局样式
boundaryGap: [0, 0], // 数值起始和结束两端空⽩策略
splitNumber: 5, // 分割段数，默认为5
axisLine: { // 坐标轴线
show: true, // 默认显⽰，属性show控制显⽰与否
lineStyle: { // 属性lineStyle控制线条样式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick: { // 坐标轴⼩标记
show: false, // 属性show控制显⽰与否，默认不显⽰
inside: false, // 控制⼩标记是否在grid⾥
length: 5, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: '#333',
width: 1
}
},
axisLabel: { // 坐标轴⽂本标签，详见axis.axisLabel
show: true,
rotate: 0,
margin: 8,
// formatter: null,
textStyle: { // 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE color: '#333'
}
},
splitLine: { // 分隔线
show: true, // 默认显⽰，属性show控制显⽰与否
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
splitArea: { // 分隔区域
show: false, // 默认不显⽰，属性show控制显⽰与否
areaStyle: { // 属性areaStyle（详见areaStyle）控制区域样式
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
}
}
},
polar: {
center: ['50%', '50%'], // 默认全局居中
radius: '75%',
startAngle: 90,
splitNumber: 5,
textstylename: {
show: true,
textStyle: { // 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE color: '#333'
}
},
axisLine: { // 坐标轴线
show: true, // 默认显⽰，属性show控制显⽰与否
lineStyle: { // 属性lineStyle控制线条样式
color: '#ccc',
width: 1,
type: 'solid'
}
},
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论