vue中echarts的3D饼图实现

vue中echarts的3D饼图实现

<script>
/**
 * props: 未列出的props与原Chart组件相同
 * height: 高度
 * data: 格式化后的数据，不是chart option
 * option：同 data，取此名是为方便直接修改2D组件为3D组件而不用修改props字段
 * distance: 视角距离，值越大饼图越小，默认200
 * position: [left, top] 饼图位置，取值：百分比|数字字符串，默认值['-25%', '0']
 * tipField: 饼图鼠标划过百分比取值字段，默认 rate || LZ
 * legendPosition: [left, top] legend位置，取值：百分比|数字字符串，默认 ['50%', 'height/5.5']
 * legendRich: legend rich，默认值请在下面代码中查看
 * legendFormatter(name, data): legend formatter，data即格式化后的数据，默认值请在下面代码中查看
 * autoRotate: 自动旋转, 默认 false
 */

import isEqual from 'lodash/isEqual'
import isEmpty from 'lodash/isEmpty'
import find from 'lodash/find'
import colors from '@/comp/colors'

function fixedUnit(num = 0) {
  if (isNaN(num)) num = 0
  num = Math.abs(num)
  if (num > 1e4) {
    return '万'
  }

  return ''
}
function fixed4(num) {
  if (isNaN(num) || num == null) return '-'
  let flag = false
  if (num < 0) {
    num = Math.abs(num)
    flag = true
  }
  if (num > 1e4) {
    num = parseInt(num / 1e2) / 100
  }
  return ((flag ? '-' : '') + num) * 1
}

function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
  // 计算
  const midRatio = (startRatio + endRatio) / 2
  const startRadian = startRatio * Math.PI * 2
  const endRadian = endRatio * Math.PI * 2
  const midRadian = midRatio * Math.PI * 2

  // 如果只有一个扇形，则不实现选中效果。
  if (startRatio === 0 && endRatio === 1) {
    isSelected = false
  }

  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  k = k ?? 1 / 3

  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
  const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0

  // 计算高亮效果的放大比例（未高亮，则比例为 1）
  const hoverRate = isHovered ? 1.1 : 1

  // 返回曲面参数方程
  return {
    u: {
      min: -Math.PI,
      max: Math.PI * 3,
      step: Math.PI / 32,
    },

    v: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 20,
    },

    x: function (u, v) {
      if (u < startRadian) {
        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
      }
      if (u > endRadian) {
        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
      }
      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
    },

    y: function (u, v) {
      if (u < startRadian) {
        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
      }
      if (u > endRadian) {
        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
      }
      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
    },

    z: function (u, v) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u)
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u)
      }
      return Math.sin(v) > 0 ? 1 * height : -1
    },
  }
}

// 生成模拟 3D 饼图的配置项
function getPie3D({
  pieData,
  tipField,
  position,
  legendPosition,
  legendRich,
  legendFormatter,
  autoRotate,
  boxHeight,
  distance,
  internalDiameterRatio,
}) {
  const series = []
  let sumValue = 0
  let startValue = 0
  let endValue = 0
  const legendData = []
  const k =
    typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3

  // 为每一个饼图数据，生成一个 series-surface 配置
  for (let i = 0; i < pieData.length; i++) {
    sumValue += pieData[i].value * 1

    const seriesItem = {
      name: pieData[i].name ?? `series${i}`,
      type: 'surface',
      parametric: true,
      wireframe: {
        show: false,
      },
      pieData: pieData[i],
      pieStatus: {
        selected: false,
        hovered: false,
        k,
      },
    }

    if (!pieData[i].itemStyle) {
      const itemStyle = {}

      if (!pieData[i].itemStyle.color) {
        itemStyle.color = pieData[i].itemStyle.color
      } else {
        itemStyle.color = colors[i]
      }
      if (!pieData[i].itemStyle.opacity) {
        itemStyle.opacity = pieData[i].itemStyle.opacity
      } else {
        itemStyle.opacity = 1
      }

      seriesItem.itemStyle = itemStyle
    }
    series.push(seriesItem)
  }
  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  const isZero = pieData.every((e) => e.value * 1 === 0)
  const len = series.length || 1
  for (let i = 0; i < len; i++) {
    if (!series[i]?.pieData) series[i].pieData = {}
    if (isZero) {
      series[i].pieData.startRatio = i / len
      series[i].pieData.endRatio = i === len - 1 ? 1 : (i + 1) / len
    } else {
      endValue = startValue * 1 + (series[i]?.pieData.value || 0) * 1
      series[i].pieData.startRatio = startValue / sumValue
      series[i].pieData.endRatio = i === len - 1 ? 1 : endValue / sumValue
    }
    series[i].parametricEquation = getParametricEquation(
      series[i].pieData.startRatio,
      series[i].pieData.endRatio,
      false,
      false,
      k,
      4000
    )

    startValue = endValue

    legendData.push(series[i].name)
  }

  // series.push({
  //   name: 'pie2d',
  //   type: 'pie',
  //   label: {
  //     opacity: 1,
  //     position: 'outside',
  //     fontSize: 12,
  //     lineHeight: 20,
  //     textStyle: {
  //       fontSize: 12,
  //       color: '#fff',
  //     },
  //   },
  //   labelLine: {
  //     length: 30,
  //     length2: 30,
  //   },
  //   minAngle: 10,
  //   startAngle: 50, // 起始角度，支持范围[0, 360]。
  //   clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
  //   radius: ['60%', '60%'],
  //   center: ['30%', '50%'],
  //   data: pieData.map((item) => {
  //     item.itemStyle.opacity = 0
  //     return item
  //   }),
  // })

  // 准备待返回的配置项，把准备好的 legendData、series 传入。
  const option = {
    animation: true,
    color: colors,
    backgroundColor: 'rgba(0,0,0,0)',
    // 图例组件
    legend: {
      data: legendData,
      // 图例列表的布局朝向。
      orient: 'vertical',
      left: legendPosition[0] ?? '50%',
      top: legendPosition[1] ?? boxHeight / 5.5,
      // 图例文字每项之间的间隔
      itemGap: 5,
      show: true,
      icon: 'rect',
      itemHeight: 10,
      itemWidth: 10,
      textStyle: {
        // 图例字体大小
        fontSize: 12,
        color: '#B8DDFF',
        lineHeight: 14,
        rich: legendRich,
      },

      // 格式化图例文本
      formatter: function (name) {
        return legendFormatter(name, pieData)
      },
    },

    tooltip: {
      formatter: (params) => {
        if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
          const item = option.series[params.seriesIndex]?.pieData || {}
          const rate = item[tipField] ?? item?.rate ?? item?.LZ ?? '-'
          return `${
            params.seriesName
          }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
            params.color
          };"></span>${rate + '%'}`
        }
      },
      textStyle: {
        fontSize: 14,
      },
    },
    title: {
      x: 'center',
      top: '20',
      textStyle: {
        color: '#fff',
        fontSize: 22,
      },
    },

    labelLine: {
      show: true,
      lineStyle: {
        color: '#7BC0CB',
      },
      normal: {
        show: true,
        length: 10,
        length2: 10,
      },
    },
    label: {
      show: true,
      position: 'outside',
      formatter: '{b} \n{d}%',
      textStyle: {
        color: '#fff',
        fontSize: '12px',
      },
    },
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    grid3D: {
      show: false,
      boxHeight: 0.01,
      left: position[0] ?? '-25%',
      top: position[1] ?? '0',
      // environment: 'rgba(0,0,0,0)',
      viewControl: {
        distance,
        alpha: 35,
        beta: 60,
        autoRotate, // 自动旋转
        zoomSensitivity: false,
        rotateSensitivity: false,
      },
    },
    series: series,
  }

  return option
}

function bindListen(
  chart,
  data,
  distance,
  position,
  tipField,
  legendPosition,
  legendRich,
  legendFormatter,
  autoRotate,
  boxHeight
) {
  chart.setOption(
    getPie3D({
      pieData: data,
      tipField,
      position,
      legendPosition,
      legendRich,
      legendFormatter,
      autoRotate,
      boxHeight,
      distance,
      internalDiameterRatio: 0.6,
    })
  )
}

export default {
  props: {
    reset: {
      type: Boolean,
      default: true,
    },
    height: {
      type: Number,
      default: 400,
    },
    option: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    distance: {
      type: [Number, String],
      default: 200,
    },
    position: {
      type: Array,
      default: () => [],
    },
    tipField: {
      type: String,
      default: '',
    },
    legendPosition: {
      type: Array,
      default: () => [],
    },
    legendRich: {
      type: Object,
      default: () => ({
        one: {
          color: '#ffffff',
          width: 60,
        },
        two: {
          color: '#59caf0',
          fontSize: 18,
          fontWeight: 600,
        },
        three: {
          color: '#d7dcf2',
        },
      }),
    },
    legendFormatter: {
      type: Function,
      default: (name, pieData) => {
        const item = find(pieData, ['name', name])
        return `{one|${name}} {two|${fixed4(item.value)}} {three|${fixedUnit(item.value)}个}`
      },
    },
    autoRotate: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chart: null,
    }
  },
  computed: {
    list() {
      if (!isEmpty(this.option)) return this.option
      else if (!isEmpty(this.data)) return this.data

      return []
    },
  },
  watch: {
    list(n, o) {
      if (!isEqual(n, o)) {
        if (this.reset) {
          this.chart.clear()
        }
        bindListen(
          this.chart,
          n,
          this.distance * 1,
          this.position,
          this.tipField,
          this.legendPosition,
          this.legendRich,
          this.legendFormatter,
          this.autoRotate,
          this.height
        )
      }
    },
  },
  mounted() {
    this.initChart()
  },
  methods: {
    resize() {
      this.chart.resize()
    },
    clear() {
      const canvasArr = this.chart.getDom().getElementsByTagName('canvas')
      for (const item of canvasArr) {
        const itemWebgl = item.getContext('webgl')
        itemWebgl?.getExtension && itemWebgl.getExtension('WEBGL_lose_context').loseContext()
      }
      this.chart.clear()
    },
    initChart() {
      this.chart = this.$echarts.init(this.$refs.chart)
      this.chart.resize()
      window.addEventListener('resize', () => {
        this.chart.resize()
      })
      bindListen(
        this.chart,
        this.list,
        this.distance * 1,
        this.position,
        this.tipField,
        this.legendPosition,
        this.legendRich,
        this.legendFormatter,
        this.autoRotate,
        this.height
      )
      this.chart.off('legendselectchanged')
      this.chart.on('legendselectchanged', (p) => {
        this.chart.setOption({
          legend: { selected: { [p.name]: true } },
        })
        if (this.$listeners['legend']) {
          this.$emit('legend', p)
        }
      })
    },
  },
}
</script>
<template>
  <div ref="chart" :style="{ width: '100%', height: height <= 100 ? `${height}%` : `${height}px` }"></div>
</template>