echarts环形图分段留白

奔波的鲍滚滚

于 2020-07-14 15:56:52 发布

阅读量1.2k

点赞数

分类专栏： Echarts 数据可视化文章标签： echarts 环形图

本文链接：https://blog.youkuaiyun.com/metooyoume/article/details/107340046

版权

Echarts 同时被 2 个专栏收录

4 篇文章

订阅专栏

数据可视化

3 篇文章

订阅专栏

本文详细解析了使用ECharts创建饼图的具体配置方法，包括如何设置饼图的样式、标签显示规则、数据项样式及如何利用占位符风格实现数据的平衡显示，适合初学者及需要深入理解ECharts图表配置的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  var placeHolderStyle = {
      normal: {
          label: {
              show: false
          },
          labelLine: {
              show: false
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0
      }
  };
  option = {
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      series: [{
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
              show: false,
              position: 'center'
          },
          emphasis: {
              label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
              }
          },
          labelLine: {
              show: false
          },
          data: [{
                  value: 335,
                  name: '直接访问'
              },
              {
                  value: 40,
                  name: "",
                  itemStyle: placeHolderStyle
              },
              {
                  value: 310,
                  name: '邮件营销'
              },
              {
                  value: 40,
                  name: "",
                  itemStyle: placeHolderStyle
              },
              {
                  value: 234,
                  name: '联盟广告'
              },
              {
                  value: 40,
                  name: "",
                  itemStyle: placeHolderStyle
              },
              {
                  value: 135,
                  name: '视频广告'
              },
              {
                  value: 40,
                  name: "",
                  itemStyle: placeHolderStyle
              },
              {
                  value: 1548,
                  name: '搜索引擎'
              },
              {
                  value: 40,
                  name: "",
                  itemStyle: placeHolderStyle
              },
          ]
      }]
  };