给echarts圆环添加背景图
对于无法实现的背景图 可以考虑添加echarts背景图 主要使用graphic属性
<template><div style="height: 400px; width: 500px;background-color: #CCC;"><v-chart:option="options"autoresizestyle="width: 100%; height: 100%"/></div>
</template><script>export default {name: 'AboutView',data() {return{dataList: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}},computed: {options() {return {tooltip: {trigger: 'item'},legend: [{top: '45%',left: '5%',orient: 'vertical',itemWidth: 20,itemHeight: 10,itemGap: 30, // 两个图例之间的间隔data: ['Search Engine', 'Direct'],formatter: (name) => { // 添加const item = this.dataList.find(item => item.name === name)const arr = ['{a|' + item.name + '}','{b|' + item.value + '}']return arr.join(' ')},textStyle: {padding: [0, 0, 0, 24],lineHeight: 8,rich: {a: {fontSize: 14,width: 110,color: '#ccc'},b: {fontSize: 16,fontWeight: 600,color: 'red',}}},},{top: '45%',right: '5%',orient: 'vertical',itemWidth: 20,itemHeight: 10,itemGap: 20, // 两个图例之间的间隔data: ['Email', 'Union Ads','Video Ads'],formatter: (name) => { // 添加const item = this.dataList.find(item => item.name === name)const arr = ['{a|' + item.name + '}','{b|' + item.value + '}']return arr.join(' ')},textStyle: {padding: [0, 0, 0, 24],lineHeight: 8,rich: {a: {fontSize: 14,width: 110,color: '#ccc'},b: {fontSize: 16,fontWeight: 600,color: 'red',}}},}],// 添加背景图的主要代码graphic: [{type: 'image',id: 'bgcImage',left: 'center',top: 45,z: -15, // 将 z 设置为 -1，使背景图在环形图下面bounding: 'raw',origin: [0, 0], // 图片的原点位置，根据实际情况调整style: {image: require('@/assets/img/abc.png'), // 替换成您的背景图 URLwidth: 220, // 背景图宽度height: 220, // 背景图高度opacity: 1}}],series: [{name: 'Access From',type: 'pie',radius: ['45%', '50%'],center: ['50%', '38.5%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: 40,fontWeight: 'bold'}},labelLine: {show: false},data: this.dataList}]}}}}
</script><style lang="scss" scoped></style>
