echarts 实现圆环图效果配置

小男孩的王者梦

于 2024-05-06 13:40:27 发布

阅读量263

点赞数 3

文章标签： echarts

本文链接：https://blog.csdn.net/u011489056/article/details/138492168

版权

option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    data: [
      'Direct',
      'Marketing',
      'Search Engine',
      'Email',
      'Union Ads',
      'Video Ads',
      'Baidu',
      'Google',
      'Bing',
      'Others'
    ]
  },
  title: {
    text: '265849',
    top: '45%',
    textAlign: 'center',
    left: '29%',
    textStyle: {
      color: '#fff',
      fontSize: 28,
      fontWeight: '400'
    },
    subtext: '销售额',
    subtextStyle: {
      color: '#fff',
      fontSize: 30,
      fontWeight: '400'
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      center: ['30%', '50%'],
      // radius: ['60%', '70%'],
      radius: ['45%', '60%'],

      labelLine: {
        length: 30
      },
      label: {
       	normal: {
						show: true,
						position: 'inside', //标签的位置
						formatter: "{d}%",
						
						textStyle: {
							color: '#fff'
						}
					},
					emphasis: {
						show: true,
						textStyle: {
							fontWeight: 'bold'
						}
					}
      },
      data: [
        { value: 1048, name: 'Baidu' },
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 251, name: 'Google' },
        { value: 234, name: 'Union Ads' },
        { value: 147, name: 'Bing' },
        { value: 135, name: 'Video Ads' },
        { value: 102, name: 'Others' }
      ]
    },
    {
      // title背景层
      name: '背景圆环',
      z: 5,
      backgroundColor: '#8C8D8E',
      type: 'pie',
      // left:'30%',
      cursor: 'default',
      center: ['30%', '50%'],
      radius: '35%',
      hoverAnimation: false,
      legendHoverLink: false,
      silent: true, //不响应和触发鼠标事件
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        {
          value: 0,
          itemStyle: {
            normal: {
              color: '#4C505840'
            }
          }
        }
      ]
    }
  ]
};