设置饼状图中心点文字与图片一般来说只用设置 elements,并将left和top设置为center就可以保证文字图片位于正中央
代码:与series同级添加如下代码
graphic: {
//设置中心图片及文字
elements: [
{
type: "image", //通过不同top值可以设置上下显示
left: "center",
// left: 75,
// left: 'calc(100% - 80px)',
top: "center",
style: {
image: require("@/assets/images/statisic/zhuangshi1.png"), // 添加你想要展示的图片的URL
width: 90,
height: 90,
top: "center" // 图片距离容器顶部的距离
// left: 75 // 图片距离容器左侧的距离
}
// position: [75, 30],
},
{
type: "text", //通过不同top值可以设置上下显示
left: "center",
top: "center",
style: {
text: "状态分布",
textAlign: "center",
fill: "#000", //文字的颜色
width: 30,
height: 30,
fontSize: 14,
color: "#6c6c6c",
fontFamily: "Microsoft YaHei"
}
}
]
},
如果图表本身并不是居于中间,而且偏左或偏右,这时候left就要使用百分比或数值,这种情况下容器宽高不固定的话就会有问题了!只有刷新才能保证中心位置否则会出现偏移情况!网上的设置resize方法已经试过了不管用
解决方法如下:
{
type: "pie",
emphasis: {
scale: true,
scaleSize: 25
},
radius: ["50%", "65%"],
// radius: ["50%", "69%"],
center: ["20%", "50%"], // 控制饼状图位置
color: loopColor,
labelLine: {
normal: {
show: false //指示线隐藏
}
},
// label: {
// normal: {
// show: true,
// formatter: "状态分布",
// textStyle: {
// fontSize: 14
// },
// position: "center"
// }
// },
label: {
normal: {
show: true,
position: "center",
formatter: [
"{a|状态分布}" // 使用富文本标记设置文字样式和背景图片
].join("\n"),
rich: {
a: {
color: "#333",
fontSize: 14,
width: 90, // 设置背景图片宽度
height: 90, // 设置背景图片高度
backgroundColor: {
image: require("@/assets/images/statisic/zhuangshi1.png")// 设置背景图片
}
}
}
}
},
data: this.chartData
}
这是利用富文本标记设置文字和背景图片,基于图表本身来设置避免了偏移情况!
完整代码如下可直接复制:
图表子组件:
<template>
<div class="pieChart">
<div ref="chart" id="chart"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
props: ["pieDatas"],
data() {
return {
chartData: [],
rel: {},
};
},
created() {},
mounted() {
this.initChart();
},
methods: {
initData() {
this.chartData.forEach(res => {
this.rel[res.name] = res.value;
});
},
initChart() {
this.chartData = this.pieDatas;
this.initData();
echarts.init(this.$refs.chart).dispose();
let myChart = echarts.init(this.$refs.chart);
let fontSize = 20;
let loopColor = [
"#0046ff",
"#7b00ff",
"#2dcf56",
"#ffd732",
"#fb6126",
"#2cb5f8"
];
let option = {
tooltip: {
trigger: "item",
formatter: "{b}: {c} 占比{d}%"
},
legend: {
show: true,
itemWidth: 5, //图例大小 我这里用的是圆
itemGap: 15, //图例之间的间隔
orient: "vertical", //布局方式,默认水平布局,另可选horizontal
// y: "80%", //垂直放的位置,可以写top,center,bottom,也可以写px或者百分比。x轴方向同理,默认center
icon: "circle",
right: "20%",
top: "center",
formatter: name => {
let list = this.chartData;
let total = 0;
let value = 0;
list.forEach(item => {
total += item.value;
if (item.name == name) {
value = item.value;
}
});
var p = ((value / total) * 100).toFixed(2); //求出百分比
return `${name}${this.rel[name]} 占比${p}%`;
}
},
// graphic: {
// //设置中心图片及文字
// elements: [
// {
// type: "image", //通过不同top值可以设置上下显示
// left: "12.5%",
// // left: 75,
// // left: 'calc(100% - 80px)',
// top: "center",
// style: {
// image: require("@/assets/images/statisic/zhuangshi1.png"), // 添加你想要展示的图片的URL
// width: 90,
// height: 90,
// top: "center" // 图片距离容器顶部的距离
// // left: 75 // 图片距离容器左侧的距离
// }
// // position: [75, 30],
// },
// // {
// // type: "text", //通过不同top值可以设置上下显示
// // left: "15.5%",
// // top: "center",
// // style: {
// // text: "状态分布",
// // textAlign: "center",
// // fill: "#000", //文字的颜色
// // width: 30,
// // height: 30,
// // fontSize: 14,
// // color: "#6c6c6c",
// // fontFamily: "Microsoft YaHei"
// // }
// // }
// ]
// },
series: [
// 外圈环
{
type: "pie",
hoverAnimation: false,
legendHoverLink: false,
z: -1,
radius: ["76%", "78%"],
// radius: ["84%", "83%"],
center: ["20%", "50%"], // 控制饼状图位置
color: "#FFF0E0", //外环颜色
label: {
normal: {
position: "inner"
}
},
labelLine: {
normal: {
show: false
}
},
tooltip: {
show: false
},
// data:()=>{
// let arr=[]
// this.chartData.filter(item=>{
// arr.push({
// value:item.value,
// name:''
// })
// })
// return arr
// }
data: [
{
value: 100,
name: ""
},
{
value: 100,
name: ""
},
{
value: 100,
name: ""
}
]
},
{
type: "pie",
emphasis: {
scale: true,
scaleSize: 25
},
radius: ["50%", "65%"],
// radius: ["50%", "69%"],
center: ["20%", "50%"], // 控制饼状图位置
color: loopColor,
labelLine: {
normal: {
show: false //指示线隐藏
}
},
// label: {
// normal: {
// show: true,
// formatter: "状态分布",
// textStyle: {
// fontSize: 14
// },
// position: "center"
// }
// },
label: {
normal: {
show: true,
position: "center",
formatter: [
"{a|状态分布}" // 使用富文本标记设置文字样式和背景图片
].join("\n"),
rich: {
a: {
color: "#333",
fontSize: 14,
width: 90, // 设置背景图片宽度
height: 90, // 设置背景图片高度
backgroundColor: {
image: require("@/assets/images/statisic/zhuangshi1.png")// 设置背景图片
}
}
}
}
},
data: this.chartData
}
]
};
myChart.setOption(option, true);
}
},
components: {},
watch: {
pieDatas: {
deep: true,
handler(newVal, oldVal) {
if (newVal) {
this.initChart();
}
}
}
}
};
</script>
<style lang="scss" scoped>
.pieChart {
width: 100%;
height: 100%;
#chart {
width: 100%;
height: 100%;
}
}
</style>
pieDatas数据格式:
pieDatas: [
{
value: 55.0,
key: "zzrbhdn",
name: "备案"
},
{
value: 15.0,
key: "zzrbhdw",
name: "可研"
},
{
value: 45.0,
key: "zzrbhdw",
name: "初验"
},
{
value: 5.0,
key: "zzrbhdw",
name: "设计"
},
{
value: 45.0,
key: "zzrbhdw",
name: "施工"
},
{
value: 45.0,
key: "zzrbhdw",
name: "综验"
}
],
最后效果: