echarts圆环添加背景图

给echarts圆环添加背景图

对于无法实现的背景图 可以考虑添加echarts背景图 主要使用graphic属性

<template>
  <div style="height: 400px; width: 500px;background-color: #CCC;">
    <v-chart
      :option="options"
      autoresize
      style="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'), // 替换成您的背景图 URL
                width: 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>