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

最新推荐文章于 2024-05-24 09:47:16 发布

玛卡丶巴卡Z

最新推荐文章于 2024-05-24 09:47:16 发布

阅读量843

点赞数 3

文章标签： echarts 数学建模前端

本文链接：https://blog.csdn.net/qq_45771320/article/details/130985043

版权

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

代码：可复制在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)'
        }
      }
    }
  ]
};

效果图：