大家在使用echarts饼图时,经常遇到formatter无法处理精确数据的情况,怎么办呢?建议在外面自定义或处理好数据pieData,然后在formatter里面使用for循环遍历
//首先建议在外面自定义或处理好数据pieData,然后在formatter里面使用for循环遍历
var chartPie = echarts.init(document.getElementById("charPie"));
var option = {
backgroundColor: "#ffffff",//背景色
legend: {//图例配置
selectedMode: false,//取消图例上的点击事件
show: true,//是否显示图例
orient: 'vertical',
x: '55%',
y: '0px',
right: '0px',
top: 'center',
data: pieData,//饼图数据
icon: "circle",
itemHeight: 9,//图例圆点的高度
formatter: function (name) {
console.log(name, "打印一下name")
// let arr = ["{a|" + n + "}", "{b|" + target + "%}"]
//return arr.join("")
},
textStyle: {
rich: {
a: {
fontSize: 12,
color: "#333",
padding: 1//图例上下的间距
}
}
}
},
series: [{
name: '圆环图系列名称', // 系列名称
type: 'pie', // 系列类型
center: ['20%', '50%'], // 饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。[ default: ['50%', '50%'] ]
radius: [34, 58], // 饼图的半径,数组的第一项是内半径,第二项是外半径。[ default: [0, '75%'] ]
hoverAnimation: false, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
label: { // 饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等.
normal: {
show: false // 是否显示标签[ default: false ]
}
},
color: ['#16B6F3', '#DB3764', '#B482CE', '#F9C03D', "#44A22E", "#F39716", "#E54EB5", "#82E2D2", "#3DD5F9", "#A39D0E"], // 圆环图各环节的颜色(顺时针)
data: pieData // 系列中的数据内容数组。
}]
};
// 使用刚指定的配置项和数据显示图表
chartPie.setOption(option)
window.addEventListener("resize", function () {
chartPie.resize()//图表自适应大小
})
效果图如下: