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: [], }, ], }, };
