echarts图例多个一排，对齐换行和横向柱状图y轴label左对齐
1、图例对齐
设置legend宽度和padding
legend: {
orient: 'horizontal',
bottom: '0%',
left: '0%',
icon: 'diamond',
itemWidth: 12,
itemHeight: 12,
itemGap: 10,
width: '280rem',
align: 'left',
textStyle: {
color: '#fff',
rich: {
a: {
width: 20,
// color: () => {},
height: 38,
padding: [
0, // 上
40, // 右
0, // 下
0, // 左
],
},
},
},
formatter: (e) => {
return '{a| ' + e + '}{b|' + ' ' + '}';
},
},
export const placeConfig = {
option: {
grid: {
top: '1%',
left: '2%',
right: '2%',
bottom: '0',
containLabel: true,
},
tooltip: {
trigger: 'item',
formatter: '{b}：{c}（{d}%）',
},
legend: {
// show: true,
orient: 'horizontal',
bottom: '0%',
left: '0%',
icon: 'diamond',
itemWidth: 12,
itemHeight: 12,
itemGap: 10,
width: '280px',
align: 'left',
textStyle: {
color: '#fff',
rich: {
a: {
width: 20,
// color: () => {},
height: 38,
padding: [
0, // 上
40, // 右
0, // 下
0, // 左
],
},
},
},
formatter: (e) => {
return '{a| ' + e + '}{b|' + ' ' + '}';
// return `${name} ${((val / total) * 100).toFixed(2)}%`;
},
},
labelLine: {
lineStyle: {
color: '#fff',
wdith: 1,
},
},
series: [
{
type: 'pie',
radius: '54px',
center: ['50%', '80px'],
data: [],
minAngle: 10,
startAngle: 90,
// alignTo: 'labelLine',
label: {
show: false,
color: '#fff',
overflow: 'none',
formatter: (v) => {
return `${v.data.rate}% \n ${v.data.name} `;
},
},
labelLine: {
show: true,
// minTurnAngle: 270,
// length: 10,
// length2: 30,
},
},
],
},
}; 
//饼图
export const pieConfig = {
option: {
grid: {
top: '0',
left: '3%',
right: '3%',
bottom: '0',
containLabel: true,
},
tooltip: {
trigger: 'item',
// formatter: '{b}：{c}（{d}%）',
formatter: '{b}：{c}',
},
legend: {
top: 'center',
left: '40%',
orient: 'vertical',
width: 480,
height: 180,
itemGap: 20,
// icon: 'circle',
textStyle: {
color: 'rgba(235, 245, 255, 1)',
width: 200,
height: 20,
},
},
series: [
{
type: 'pie',
radius: '60%',
center: ['20%', '50%'],
data: [],
label: {
show: false,
},
},
],
},
};
const [personPie, setPersonPie] = useState(pieConfig);
const numsResult = _.cloneDeep(personPie);
const codeDatas = [{name:'xxx',value:123}]
numsResult.option.series[0].radius = ['40%', '70%'];
// numsResult.option.legend.icon = 'rect';
numsResult.option.legend.width = 20;
numsResult.option.legend.itemHeight = 0;
numsResult.option.legend.itemWidth = 0;
numsResult.option.legend.borderRadius = 0;
numsResult.option.series[0].data = codeDatas;
numsResult.option.legend.formatter = (e) => {
let data = codeDatas;
let value = 0;
let name = '';
data.forEach((el) => {
if (e == el.name) {
name = el.name;
value = el.value;
}
});
let title = name;
if (title.length > 30) {
return ['{a|}' + '{b|' + title.substr(0, 15) + '...' + ': ' + value + '个' + '}'].join(
'\n',
);
} else {
return ['{a|}' + '{b|' + title + ': ' + value + '个' + '}'].join('\n');
}
};
numsResult.option.legend.textStyle = {
//rich放在textStyle里面
// color: '#fff',
rich: {
a: {
width: 39,
height: 14,
lineHeight: 15,
backgroundColor: [],
borderRadius: 6,
},
b: {
lineHeight: 15,
borderRadius: 15,
padding: [0, 0, 0, 5],
},
c: {
lineHeight: 15,
borderRadius: 15,
padding: [0, 0, 0, 5],
},
},
};
2、y轴label对齐
设置grid左边位置和label的宽度和边距，每个宽度的图表不一样数据长度不一样这些值都不一样，自己调试
grid: {
top: '1%',
left: '-100px',
right: '5%',
bottom: '5%',
containLabel: true,
},yAxis: {
type: 'category',
axisLabel: {
show: true,
overflow: 'truncate',
color: '#fff',
width: 150,//label宽度
margin: 120,//距离y轴的位置
align: 'left',
},
},
//当日
export const todaybarChartConfig = {
option: {
grid: {
top: '1%',
left: '-100px',
right: '5%',
bottom: '5%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999',
},
},
},
legend: {
show: false,
x: 'right', // 'center' | 'left' | {number},
y: 'top', // 'center' | 'bottom' | {number}
textStyle: { color: '#fff' },
itemWidth: 15,
itemHeight: 15,
icon: 'rect',
},
yAxis: {
type: 'category',
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
overflow: 'truncate',
color: '#fff',
width: 150,
margin: 120,
align: 'left',
},
splitLine: {
show: false,
},
splitArea: {
show: false,
},
data: [],
},
xAxis: [
{
type: 'value',
axisLabel: {
color: '#fff',
},
nameTextStyle: {
color: '#fff',
},
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
color: '#fff',
show: false,
},
axisTick: {
show: false,
},
},
],
series: [
{
type: 'bar',
barMaxWidth: '8px',
label: {
show: true,
position: 'right',
color: '#fff',
},
itemStyle: {
normal: {
borderRadius: 10,//
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: 'rgba(0, 149, 255, 1)',
},
{
offset: 1,
color: 'rgba(55, 255, 253, 1)',
},
]),
},
},
data: [],
},
],
},
};