代码，图片如下，字体的省略我这边没有显示，之前测试过了，可以的。主要的以 + 号形式标记了，方便查阅。
const mainLiftId = useId()
const [dataa,setDataa] = useState( [
{ value: 1048, name: '口水鸡', },
{ value: 735, name: '酸菜鱼' },
{ value: 580, name: '金酱肉丝' },
{ value: 484, name: '梅菜扣肉' },
{ value: 300, name: '鼓汁鱿鱼' },
],[])
useEffect(()=>{
var chartDom = document.getElementById(mainLiftId);
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
icon: "circle",
itemWidth: 8, // 小圆点
right: 50, +++++
top: 0,++++++++
formatter: (name) => { // + 1084元 33.30%+++++++++++++++
let total = 0;
let target;
for (let i = 0; i < dataa.length; i++) {
total += dataa[i].value;
if (dataa[i].name === name) {
target = dataa[i].value;
}
}
let arr = [
'{a|' + name + '}{b|' + target + '元' + '}{c|' + ((target / total) * 100).toFixed(2) + '%}'
];
return arr.join('\n')
},
textStyle: {+++++++++++++++++++++++++++++++
rich: {
a: {
verticalAlign: 'right',
fontSize: 12,
align: 'left',
width: 70
},
b: {
fontSize: 12,
align: 'left',
width: 50
},
c: {
fontSize: 12,
align: 'left',
width: 50
}
}
},
},
// legend: { // 矩形
// // type: 'scroll',
// orient: 'vertical', //线性垂直
// show: true,
// right: 0,
// top: 0,
// bottom: 0,
// textStyle: {fontSize: 10 },
// formatter: function (name) {
// return (name.length > 5 ? (name.slice(0,8)+"...") : name );
// },
// // data: ['']
// },
series: [
{
name: '销售额(元)',
type: 'pie',
radius: ['60%', '90%'], // 第一个参数是控制里面小圈的大小，第二个参数是控制外面大圈的大小；
avoidLabelOverlap: false,
center: ['20%', '50%'], // 调节圆形的位置 也可以像素
itemStyle: { // 圆形的操作
borderRadius: 2,
borderColor: '#fff',
borderWidth: 1,
// emphasis: { // 定义相关 圆形 放大的效果
// shadowBlur: 10, // 阴影模糊
// shadowOffsetX: 10, // 阴影偏离 X 轴
// shadowColor: 'rgba(0, 0, 0, 0.2)' // 圆形的背景显示
// },
},
label: {
show: false,
position: 'center',
},
// label: { // 弧形里面显示百分比
// normal: {
// show: true,
// position: 'inner',
// formatter: '{d}',
// fontSize: 7
// }
// },
emphasis: {
label: {
show: true,
fontSize: 16, // 字体的大小 放上去显示
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data:dataa,
},
],
// data: this.data
};
option && myChart.setOption(option);
},[mainLiftId])
