Echarts 饼图(Pie)线性渐变的顺序设置为一个方向


计算每条数据相应的弧度值

	 for (let i = 0; i < this.options.data.length; i++) {
	    // data是需要给饼图的数据
        data.push({
          name: this.options.data[i].isEligible,
          value: this.options.data[i].number,
          percentage: this.options.data[i].percentage * 100,
          _startArc: null,
          _endArc: null
        })
      }
      // 获取总数值
      let totalValue = data.reduce((total, item) => total + item.value, 0)
      const rangeArr = []
      let cacheNum = 0
      // 按序计算数值区间
      for (let i = 0; i < data.length; i++) {
        const endNum = cacheNum + data[i].value
        rangeArr.push([cacheNum, endNum])
        cacheNum = endNum
      }
      const angleArr = rangeArr.map((arr)=> {
        //弧度值
        return arr.map(num => {
          return ((num / totalValue) * 365) * (Math.PI /180)
        })
      })

      for (let i = 0; i < data.length; i++) {
        data[i]._startArc = angleArr[i][0]
        data[i]._endArc = angleArr[i][1]
      }

根据弧度值计算实际的坐标点

	 function getCoordinates(startArc, endArc) {
        const posi = [Math.sin(startArc), -Math.cos(startArc), Math.sin(endArc), -Math.cos(endArc)]
        const dx = posi[2] - posi[0]
        const dy = posi[3] - posi[1]
        return getLocation(dx, dy)
      }


      function getLocation(dx, dy) {
        const tanV = dx / dy
        const directSign = Math.abs(tanV) < 1
        const t = directSign ? tanV : 1 / tanV

        const sign1 = t > 0 ? 1 : -1
        const sign2 = dx > 0 ? 1 : -1
        const sign = directSign ? sign1 * sign2 : sign2

        const group1 = [0.5 - (sign * t) / 2, 0.5 + (sign * t) / 2]
        const group2 = sign > 0 ? [0, 1] : [1, 0]
        const group = [...group1, ...group2]
        const keys = directSign ? ['x', 'x2', 'y', 'y2'] : ['y', 'y2', 'x', 'x2']

        let res = {}
        keys.forEach((k, idx) => {
          res[k] = group[idx]
        })
        return res
      }
		
	// 调用示例
	for (let i = 0; i < datas.length; i++) {
         const startArc = datas[i]._startArc
         const endArc = datas[i]._endArc
         // 这里计算了 线性渐变的起止方向
         const coordinates = getCoordinates(startArc, endArc)
         datas[i].itemStyle = {
           color: {
             ...coordinates,
             type: 'linear',
             global: false,
             // 这里给了 线性渐变的起止颜色
             colorStops: [
               {
                 offset: 0,
                 color: 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + startAlpha + ')'
               },
               {
                 offset: 1,
                 color: 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + endAlpha + ')'
               }
             ]
           }
         }
       }

  • 25
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值