vue echart 3D环形图 静态

1.下载：因为3D 图涉及到了echart 的 gl 库，所以需要下载echart和echarts-gl

yarn add echart
yarn add echarts-gl

2.引入

import * as echarts from 'echarts'
import 'echarts-gl'

3.开发

<template>
	<div id="chart-panel">div>
template>

<script>
import { getPie3D, labelLine } from '公共方法路径'
import * as echarts from 'echarts'
import 'echarts-gl'
export default {
	data() {
    	return {
    		chartPanel: {},
    	}
    }，
    mounted() {
      let option = [{
        name: '河北',
        value: 37,
        itemStyle: {
          color: '#f77b66'
        }
      }, {
        name: '北京',
        value: 44,
        itemStyle: {
          color: '#3edce0',
        }
      }, {
        name: '安徽',
        value: 32,
        itemStyle: {
          color: '#f94e76'
        }
      }]
      this.draw3d(option)},
	  methods： {
		draw3d(optionData) {
		// 基于准备好的dom，初始化echarts实例
		  this.chartPanel = echarts.init(document.getElementById('chart-panel'))
        
	      for (let i = 0; i < optionData.length; i++) {
	        delete optionData[i].itemStyle.opacity
	      }
	      // 初始化数据 传入数据生成 option
	      let series = getPie3D(optionData, 2)
	      let option = {
	        tooltip: {
	          trigger: 'item',
	          formatter: (params) => {
	            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
	              return `
${params.seriesName}`
	            }
	          }
	        },
	        xAxis3D: {
	          min: -1,
	          max: 1
	        },
	        yAxis3D: {
	          min: -1,
	          max: 1
	        },
	        zAxis3D: {
	          min: -1,
	          max: 1
	        },
	        grid3D: {
	          show: false, // 是否显示三维笛卡尔坐标系。
	          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
	          viewControl: {
	            // 用于鼠标的旋转，缩放等视角控制
	            alpha: 40, // 角度
	            distance: 250, // 调整视角到主体的距离，类似调整zoom 重要
	            rotateSensitivity: 0, // 设置为0无法旋转
	            zoomSensitivity: 0, // 设置为0无法缩放
	            panSensitivity: 0, // 设置为0无法平移
	            autoRotate: false // 自动旋转
	          }
	        },
	        series: series
	      }
	      this.chartPanel.setOption(option)
	      // // 添加label 以及 label指引线 
	      let optionLine = labelLine(option, optionData)
	      this.chartPanel.setOption(optionLine)
	
	      let parent = document.getElementById('chart-panel') // 获取父元素
	      let canvas = parent.getElementsByTagName('canvas') // 获取父元素下面的所有canvas元素
	      canvas[1].style.transform = 'rotateX(30deg)'
	    }
	}
}
</script>

common.js

// 生成模拟 3D 饼图的配置项
// pieData（object）：饼图数据
// internalDiameterRatio（0~1之间的浮点数）：内径/外径的值（默认值 1/2），当该值等于 0 时，
// heigth配置每个数据生成的高度
export function getPie3D(pieData, internalDiameterRatio, height) {
    let series = [];
    let sumValue = 0;
    let startValue = 0;
    let endValue = 0;
    let legendData = [];
    let k =
        typeof internalDiameterRatio !== "undefined"
            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
            : 1 / 3;
    // 为每一个饼图数据，生成一个 series-surface 配置
    for (let i = 0; i < pieData.length; i++) {

        sumValue += pieData[i].value;

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

        if (typeof pieData[i].itemStyle != 'undefined') {

            let itemStyle = {};

            typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
            typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;

            seriesItem.itemStyle = itemStyle;
        }
        series.push(seriesItem);
    }

    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
    for (let i = 0; i < series.length; i++) {
        endValue = startValue + series[i].pieData.value;
        series[i].pieData.startRatio = startValue / sumValue;
        series[i].pieData.endRatio = endValue / sumValue;
        series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k,series[i].pieData.value);

        startValue = endValue;

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

    return series;
}
// startRatio（浮点数）: 当前扇形起始比例，取值区间[0, endRatio)
// endRatio（浮点数）: 当前扇形结束比例，取值区间(startRatio, 1]
// isSelected（布尔值）: 是否选中，效果参照二维饼图选中效果（单选）
// isHovered（布尔值）: 是否放大，效果接近二维饼图高亮（放大）效果（未能实现阴影）
// k（0~1之间的浮点数）：用于参数方程的一个参数，取值 0~1 之间，通过「内径 / 外径」的值换算而来。
// height配置3d扇形高度
export function getParametricEquation(
    startRatio,
    endRatio,
    isSelected,
    isHovered,
    k,
    height
) {
    // 计算
    let midRatio = (startRatio + endRatio) / 2;

    let startRadian = startRatio * Math.PI * 2;
    let endRadian = endRatio * Math.PI * 2;
    let midRadian = midRatio * Math.PI * 2;

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

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

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

    // 计算高亮效果的放大比例（未高亮，则比例为 1）
    let hoverRate = isHovered ? 1.05 : 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 : -1;
        }
    };
}
//label指引线
export function labelLine(option, optionData) {
    //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
    option.series.push({
        name: "pie2d",
        type: "pie",
        minAngle: 10,
        roseType: 'radius',
        hoverOffset: 15,
        label: {
            opacity: 1,
            show: true,
            position: 'outer',
            padding: [2,-2,2,-2],
            borderRadius: 2,
            distanceToLabelLine: 0,
            formatter: (item) => {
                return '{top|'+item.value+'%}' + '\n'+ '{bottom| '+item.name+'} '
            },
            align: 'center',
            rich: {
                top: {
                    verticalAlign: 'bottom',
                    align: 'center',
                    fontSize: 14,
                    color: 'inherit',
                    padding: [0, 0, 3, 0]
                },
                hr: {
                    borderColor: 'inherit',
                    width: '100%',
                    borderWidth: 1,
                    height: 0
                },
                bottom: {
                    padding: [2, 0, 0, 0],
                    verticalAlign: 'top',
                    align: 'center',
                    fontSize: 16,
                    color: '#ffffff',
                }
            }
        },
        labelLine: {
            showAbove: false,
            length: 40,
            length2: 30,
            lineStyle: {
                width: 1.5,
            },
        },
        startAngle: 321, //起始角度，支持范围[0, 360]。 //重要
        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["25%", "50%"],
        center: ["50%", "50%"],
        data: optionData,
        itemStyle: {
            opacity: 0,
        },
        top: "20%",
        avoidLabelOverlap: true, //防止标签重叠
    });
    return option
}

下一节写echart 3D环形图 动态切换两批数据。