- 当前效果
- 目标效果
让图例中的“点”和标题同一行
- 代码
const data = [{value: 100,name: '未标注'},{value: 100,name: '已标注'},{value: 100,name: '标注中'}
];option = {tooltip: {backgroundColor: '#fff',extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',backgroundColor: 'rgba(0,0,0,0.75)',textStyle: {color: '#FFFFFF'},formatter: (param) => {let { name, value } = param;let result = `<div>${name}：${value}</div>`;return result;}},legend: {top: 'center',right: '10%',orient: 'horizontal',itemWidth: 6,itemHeight: 6,icon: 'circle',data: data,formatter: function (name) {const value = data.find((item) => item.name === name).value;return `{a|${name}}\n{b|${value}}`;// 实现方式1 通过三行文本，使得标题居中// return `{b|${""}}\n{a|${name}}\n{b|${value}}`;},textStyle: {// 实现方式2 通过文字设置padding，使得点和第一行统一// padding: [35, 0, 0, 0],color: '#808080',fontSize: 16,rich: {a: {fontWeight: 500,fontSize: 16,color: '#808080',width: 100},b: {padding: [10, 0, 0, 0],fontWeight: 'bold',fontSize: 22,color: '#1A1A1A'}}}},series: [{type: 'pie',radius: ['43%', '55%'],center: ['30%', '50%'],label: {show: false},color: ['#67d6b2', '#ed742a', '#f2ae72'],data: data}]
};
- 实现方式1
设置三行文本，这样点就和中间的文本重合了
return `{b|${""}}\n{a|${name}}\n{b|${value}}`;
- 实现方式2
设置文字的padding-top，这样点就和第一行统一了
padding: [35, 0, 0, 0],
