ECharts 环形图高级定制：透明间隔、嵌套图片与图形

ECharts 环形图高级定制：透明间隔、嵌套图片与图形

引用

CSDN

1.

https://blog.csdn.net/lan123456_/article/details/138901512

ECharts 是一个强大的数据可视化工具，可以用来创建各种类型的图表。本文将介绍如何使用 ECharts 实现环形图的高级定制，包括实现透明间隔、嵌套环形图片和嵌套环形图形。

环形图实现透明间隔

要实现环形图的透明间隔，首先需要通过 radius 属性创建一个圆环图，然后使用 padAngle 属性来设置扇区的角度间隔。此外，还可以通过 borderRadius 属性来设置扇形区块的内外圆角半径，使环形图的边角更加平滑。

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['60%', '70%'], // 设置饼图内外半径
      avoidLabelOverlap: false,
      padAngle: 5, // 调整数值，控制间隔大小
      itemStyle: {
        borderRadius: 10 // 设置扇形内外圆角半径
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

环形图嵌套环形图片

ECharts 提供了 graphic 属性，可以在图表中插入各种类型的图形元素，包括图片。通过设置 graphic 属性，可以将图片嵌套在环形图的内部。

option = {
  graphic: [
    {
      type: 'image',
      id: 'logo',
      left: 'center', // 调整图片位置
      top: 'center', // 调整图片位置
      z: 0, // 
      //设置图片样式
      style:{
          //  图片路径，这里是网上找的一张图，内嵌在环形图内部。如果UI是将环形图包含在内，调整图片大小即可实现
          image:'https://img.tukuppt.com/png_preview/00/11/78/14r3p0VP3i.jpg!/fw/780',
        width: 500, // 设置图片大小
        height: 500,
        opacity: 1 // 设置图形透明度
      }
    }
  ],
  series: [
    {
      type: 'pie',
      radius: ['60%', '70%'],
      padAngle: 5,
      avoidLabelOverlap: false,
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

环形图嵌套环形图形

要给环形图嵌套外边框和内边框图形，可以通过手动再生成一个圆环来实现。具体来说，可以在 series 中添加一个新的饼图系列，通过调整 radius 和 data 来创建虚线效果。

option = {
  series: [
    {
      type: 'pie',
      radius: ['60%', '70%'],
      center: ['50%', '50%'],
      padAngle: 5,
      avoidLabelOverlap: false,
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    },
    // 外边框虚线
    {
      type: 'pie',
      zlevel: 4,
      silent: true,
      radius: ['72%', '73%'], // 外层圆环半径
      center: ['50%', '50%'], // 控制外层圆环位置，和内层一致即可
      // 禁用外层圆环 label 样式
      label: {
        normal: {
          show: false
        }
      },
      // 禁用外层圆环 label 样式
      labelLine: {
        normal: {
          show: false
        }
      },
      // 自定义外层圆环数据
      data: createData()
    }
  ]
};
// 自定义外层圆环数据
function createData() {
  let dataArr = [];
  for (let i = 0; i < 40; i++) {
    if (i % 2 === 0) {
      dataArr.push({
        name: '',
        value: 25,
        itemStyle: {
          normal: {
            color: '#145662',
            borderWidth: 0,
            borderColor: 'rgba(0,0,0,0)'
          }
        }
      });
    } else {
      dataArr.push({
        name: '',
        value: 20,
        itemStyle: {
          normal: {
            color: 'rgba(0,0,0,0)',
            borderWidth: 0,
            borderColor: 'rgba(0,0,0,0)'
          }
        }
      });
    }
  }
  return dataArr;
}