当前位置：首页 > news >正文

ECharts饼图，配置标注示例

news 2025/7/19 9:09:09

在这里插入图片描述

const color = ["#00FFB4", "#5498FD", "#6F54FD", "#FD5454", "#FDA354",]const datas = [{ value: 100, name: "一年级" },{ value: 70, name: "二年级" },{ value: 184, name: "三年级" },{ value: 126, name: "四年级" },{ value: 233, name: "五年级" },
];option = {legend: {top: 'bottom',   // 标注位置textStyle: {     color: "#000",  // 标注颜色fontSize: 12    // 标注字体大小},itemWidth: 24,  // 显示标注左侧图片的宽度itemHeight: 12, // 显示标注左侧图片的高度itemGap: 30     // 标注间距},color,  // 颜色tooltip: {   // 提示框trigger: "item",  // 鼠标悬停触发extraCssText: "width: 128px;  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);", // 设置提示框宽度等样式等formatter: function (params) {// 显示内容let str =(params.data &&`<div style="font-weight: bold; font-size: 16px;">${params.name}</div><div style="display:flex; justify-content: space-between; align-items: center; font-size: 16px;"><span><span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: ${color[params.dataIndex]}; margin-right: 4px;"></span>占比</span><span>${params.percent}%</span></div>`) ||"";return str;}},series: [{type: "pie",  // 饼图radius: "65%", // 饼图大小center: ["50%", "45%"], // 饼图位置label: {  // 显示内容normal: {// formatter: "{xx|{b}：}{c} 个",rich: {xx: { // xx是样式fontSize: 14,lineHeight: 32}}}},data: datas,itemStyle: {emphasis: { // 鼠标经过扇形区域时，区域边框的阴影效果shadowBlur: 10, // 阴影大小shadowOffsetX: 0, // 偏移shadowColor: "rgba(0, 0, 0, 0.5)" // 阴影颜色}},labelLine: {normal: {length: 35,   // 第一条线的长度length2: 20,  // 第二条线的长度smooth: false // false折线，true曲线}}}]}