// 选中索引 let hoveredIndex = ''; /** 颜色组 */ let colors = ['#07daf2', '#64de8a', '#ecc23c', '#ffdb5c', '#ff9f7f', '#9fe6b8', '#67e0e3', '#32c5e9', '#fb7293', "#9A60B4", "#ea7ccc"] //设置扇形高度 0：为自定义高度 const itemHeight = 20 // 扇形数据 const optionsData = [ { name: '项目一', value: 60, }, { name: '项目二', value: 44, }, { name: '项目三', value: 32, }, ] // 生成扇形的曲面参数方程 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) { // 计算 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) { // eslint-disable-next-line no-param-reassign isSelected = false; } // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3） // eslint-disable-next-line no-param-reassign k = typeof k !== 'undefined' ? 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.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(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(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(u, v) { if (u < -Math.PI * 0.5) { return Math.sin(u); } if (u > Math.PI * 2.5) { return Math.sin(u) * h * 0.1; } // 当前图形的高度是Z根据h（每个value的值决定的） return Math.sin(v) > 0 ? 1 * h * 0.1 : -1; }, }; } // 监听 mouseover，近似实现高亮（放大）效果 myChart.on('mouseover', function (params) { // 准备重新渲染扇形所需的参数 let isSelected; let isHovered; let startRatio; let endRatio; let k; let i; // 如果触发 mouseover 的扇形当前已高亮，则不做操作 if (hoveredIndex === params.seriesIndex) { return; // 否则进行高亮及必要的取消高亮操作 } else { // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新） if (hoveredIndex !== '') { // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。 isSelected = option.series[hoveredIndex].pieStatus.selected; isHovered = false; startRatio = option.series[hoveredIndex].pieData.startRatio; endRatio = option.series[hoveredIndex].pieData.endRatio; k = option.series[hoveredIndex].pieStatus.k; i = itemHeight == 0 ? option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 35 : 10 : itemHeight; // 对当前点击的扇形，执行取消高亮操作（对 option 更新） option.series[hoveredIndex].parametricEquation = getParametricEquation( startRatio, endRatio, isSelected, isHovered, k, i ); itemHeight == 0 ? option.series[hoveredIndex].pieStatus.hovered = isHovered : itemHeight; // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空 hoveredIndex = ''; } // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新） if (params.seriesName !== 'mouseoutSeries') { // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。 isSelected = option.series[params.seriesIndex].pieStatus.selected; isHovered = true; startRatio = option.series[params.seriesIndex].pieData.startRatio; endRatio = option.series[params.seriesIndex].pieData.endRatio; k = option.series[params.seriesIndex].pieStatus.k; // 对当前点击的扇形，执行高亮操作（对 option 更新） option.series[params.seriesIndex].parametricEquation = getParametricEquation( startRatio, endRatio, isSelected, isHovered, k, itemHeight == 0 ? option.series[params.seriesIndex].pieData.value + 5 : itemHeight + 5 ); option.series[params.seriesIndex].pieStatus.hovered = isHovered; // 记录上次高亮的扇形对应的系列号 seriesIndex hoveredIndex = params.seriesIndex; } // 使用更新后的 option，渲染图表 myChart.setOption(option); } }); // 修正取消高亮失败的 bug myChart.on('globalout', function () { if (hoveredIndex !== '') { // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。 isSelected = option.series[hoveredIndex].pieStatus.selected; isHovered = false; k = option.series[hoveredIndex].pieStatus.k; startRatio = option.series[hoveredIndex].pieData.startRatio; endRatio = option.series[hoveredIndex].pieData.endRatio; // 对当前点击的扇形，执行取消高亮操作（对 option 更新） i = itemHeight == 0 ? option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 35 : 10 : itemHeight; option.series[hoveredIndex].parametricEquation = getParametricEquation( startRatio, endRatio, isSelected, isHovered, k, i ); option.series[hoveredIndex].pieStatus.hovered = isHovered; // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空 hoveredIndex = ''; } // 使用更新后的 option，渲染图表 myChart.setOption(option); }); // 生成模拟 3D 饼图的配置项 function getPie3D(pieData, 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 += 1) { sumValue += pieData[i].value; const seriesItem = { name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name, type: 'surface', parametric: true, wireframe: { show: false, }, pieData: pieData[i], itemStyle: { color: colors[i], // 自定义颜色 opacity: '0.7' }, pieStatus: { selected: false, hovered: false, k, }, }; if (typeof pieData[i].itemStyle !== 'undefined') { const { itemStyle } = pieData[i]; // eslint-disable-next-line no-unused-expressions typeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null; // eslint-disable-next-line no-unused-expressions typeof pieData[i].itemStyle.opacity !== 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null; seriesItem.itemStyle = itemStyle; } series.push(seriesItem); } // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 console.log(series); for (let i = 0; i < series.length; i += 1) { 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, // 环形高度 itemHeight == 0 ? series[i].pieData.value === series[0].pieData.value ? 35 : 10 : itemHeight ); startValue = endValue; legendData.push(series[i].name); } // 准备待返回的配置项，把准备好的 legendData、series 传入。 const option = { tooltip: { /** 保证 tooltip一直在图表内部 */ position: function (point, params, dom, rect, size) { // size 中有两个属性：viewSize 和 contentSize，分别为 tooltip 的宽高 // 这里设置的值都是为了保证 tooltip 内部显示 var x = point[0]; var y = point[1]; var viewWidth = size.viewSize[0]; var viewHeight = size.viewSize[1]; var boxWidth = size.contentSize[0]; var boxHeight = size.contentSize[1]; // 判断 tooltip 位置，调整其位置使其不会超出图表边界 if (x + boxWidth > viewWidth) { x = x - boxWidth; } if (y + boxHeight > viewHeight) { y = y - boxHeight; } // 保证 tooltip 始终在图表内部 if (x < 0) { x = 0; } if (y < 0) { y = 0; } return [x, y]; }, formatter: (params) => { if (params.seriesName !== 'mouseoutSeries') { return ` ${params.seriesName}
${option.series[params.seriesIndex].pieData.value} `; } return ''; }, }, xAxis3D: { min: -1, max: 1, }, yAxis3D: { min: -1, max: 1, }, zAxis3D: { min: -1, max: 1, }, grid3D: { show: false, boxHeight: 5, top: '0', left: '0', viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置 alpha: 30, //角度(这个很重要调节角度的) distance: 200,//调整视角到主体的距离，类似调整zoom(这是整体大小) rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转 zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放 panSensitivity: 10, //设置平移灵敏度，0无法平移 autoRotate: true, //自动旋转 autoRotateAfterStill: 1,//在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效 }, }, series, }; return option; } // 生成图表，第二个参数为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环 option = getPie3D(optionsData, .5);

3D环状图