echarts饼图,从中心设置径向渐变

 主要在于需要计算径向渐变的中心点坐标

 代码:可复制在echarts中运行

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      label: {
        show: true,
        position: 'inside',
        color: '#fff',
        textBorderColor: '#000',
        textBorderWidth: 2
      },
      data: [
        {
          value: 1048,
          name: 'Search Engine',
          itemStyle: {
            color: {
              type: 'radial',
              x: myChart.getWidth() / 2, //计算径向渐变的中心点
              y: myChart.getHeight() / 2, // 计算径向渐变的中心点
              r: 150,
              global: true, //设置绝对像素位置
              colorStops: [
                {
                  offset: 0,
                  color: '#eee' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#00a09b' // 100% 处的颜色
                }
              ]
            }
          }
        },
        {
          value: 484,
          name: 'Union Ads',
          itemStyle: {
            barBorderRadius: [20, 20, 0, 0],
            color: {
              type: 'radial',
              x: myChart.getWidth() / 2, //计算径向渐变的中心点
              y: myChart.getHeight() / 2, // 计算径向渐变的中心点
              r: 150,
              global: true, //设置绝对像素位置
              colorStops: [
                {
                  offset: 0,
                  color: '#eee' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#91cc75' // 100% 处的颜色
                }
              ]
            }
          }
        },
        {
          value: 300,
          name: 'Video Ads',
          itemStyle: {
            barBorderRadius: [20, 20, 0, 0],
            color: {
              type: 'radial',
              x: myChart.getWidth() / 2, //计算径向渐变的中心点
              y: myChart.getHeight() / 2, // 计算径向渐变的中心点
              r: 150,
              global: true, //设置绝对像素位置
              colorStops: [
                {
                  offset: 0,
                  color: '#eee' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#fac858' // 100% 处的颜色
                }
              ]
            }
          }
        }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

效果图:

 

 

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在ECharts饼图中心设置文字,可以通过以下步骤实现: 1. 在ECharts的option中设置title属性,其中text属性为要显示的文字内容,x和y属性为文字的位置(相对于整个图表的比例)。 ``` option = { title: { text: '饼图中心文字', x: 'center', y: 'center' }, // 其他配置项 ... } ``` 2. 如果要设置文字的样式,可以在title属性中设置textStyle属性,如下所示: ``` option = { title: { text: '饼图中心文字', x: 'center', y: 'center', textStyle: { color: '#fff', fontSize: 14, fontWeight: 'bold' } }, // 其他配置项 ... } ``` 其中,textStyle属性可以设置文字的颜色、字体大小、字体粗细等样式。 3. 如果饼图中心需要显示的不仅仅是文字,还可以通过graphic属性在中心添加图形元素,如下所示: ``` option = { graphic: [{ type: 'text', left: 'center', top: '40%', style: { text: '饼图中心文字', fill: '#fff', fontSize: 14, fontWeight: 'bold' } }, { type: 'image', left: 'center', top: 'center', style: { image: 'http://example.com/logo.png', width: 80, height: 80 } }], // 其他配置项 ... } ``` 其中,graphic属性可以设置多个图形元素,可以通过type属性指定元素的类型,如text表示文字,image表示图片等。left和top属性分别表示元素相对于整个图表的横向和纵向位置,style属性可以设置元素的样式,包括文字内容、颜色、字体大小等,或者图片的地址、大小等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值