var data = [ { "name": "自用", "value": 40, "number": 5, itemStyle: { color: '#2DCEA3', } }, { "name": "公交", "value": 40, "number": 10, itemStyle: { color: '#2D97E8', } }, { "name": "单位内部专用", "value": 40, "number": 15, itemStyle: { color: '#DAD467', } }, { "name": "城市公交", "value": 40, "number": 20, itemStyle: { color: 'red', } }, { "name": "高速", "value": 40, "number": 50, itemStyle: { color: 'green', } }, ] function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) { console.log(startRatio, endRatio, isSelected, isHovered, k, h) // 计算 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) * h * 0.1; } return Math.sin(v) > 0 ? 1 * h * 0.1 : -1; }, }; } function getPie3D(pieData, internalDiameterRatio) { let series = []; let legendData = []; let ringsize = [] let sum = 0 let levelsum = 0 let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3; for (let i = 0; i < pieData.length; i++) { sum += pieData[i].number } for (let i = 0; i < pieData.length; i++) { if (i == 0) { ringsize.push([0, Number(Number(pieData[i].number) / sum.toFixed(2))]) levelsum = Number(Number(pieData[i].number) / sum.toFixed(2)) } else if (i == pieData.length - 1) { ringsize.push([levelsum, 1]) } else { ringsize.push([levelsum, levelsum + Number(Number(pieData[i].number) / sum.toFixed(2))]) levelsum = levelsum + Number(Number(pieData[i].number) / sum.toFixed(2)) } } console.log(ringsize,'ringsize') // for (let i = 0; i < pieData.length; i++) { // if (i == 0) { // ringsize[0][1] = Number(Number(pieData[i].number) / sum.toFixed(2)) // ringsize[1][0] = Number(Number(pieData[i].number) / sum.toFixed(2)) // levelsum=Number(Number(pieData[i].number) / sum.toFixed(2)) // } else if (i == 1) { // ringsize[1][1] = Number(Number(pieData[i].number) / sum.toFixed(2))+levelsum // ringsize[2][0] = Number(Number(pieData[i].number) / sum.toFixed(2))+levelsum // } // } // 为每一个饼图数据，生成一个 series-surface 配置 for (let i = 0; i < pieData.length; i++) { let seriesItem = { name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name, value: typeof pieData[i].value === 'undefined' ? `series${i}` : pieData[i].value, 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; } seriesItem.label = { formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ', backgroundColor: '#eee', borderColor: '#aaa', borderWidth: 1, borderRadius: 4, rich: { a: { color: '#999', lineHeight: 22, align: 'center' }, hr: { borderColor: '#aaa', width: '100%', borderWidth: 0.5, height: 0 }, b: { fontSize: 16, lineHeight: 33 }, per: { color: '#eee', backgroundColor: '#334455', padding: [2, 4], borderRadius: 2 } } }; series.push(seriesItem); } let aaa = [[0, 0.8], [0.8, 0.9], [0.9, 1]] for (let i = 0; i < series.length; i++) { series[i].pieData.startRatio = ringsize[i][0]; series[i].pieData.endRatio = ringsize[i][1]; series[i].parametricEquation = getParametricEquation( series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value ); legendData.push(series[i].name); } // 补充一个透明的圆环，用于支撑高亮功能的近似实现。 series.push({ name: 'mouseoutSeries', type: 'surface', parametric: true, wireframe: { show: false, }, itemStyle: { opacity: 0, }, parametricEquation: { u: { min: 0, max: Math.PI * 2, step: Math.PI / 20, }, v: { min: 0, max: Math.PI, step: Math.PI / 20, }, x: function (u, v) { return Math.sin(v) * Math.sin(u) + Math.sin(u); }, y: function (u, v) { return Math.sin(v) * Math.cos(u) + Math.cos(u); }, z: function (u, v) { return Math.cos(v) > 0 ? 0.1 : -0.1; }, }, }); // 准备待返回的配置项，把准备好的 legendData、series 传入。 let option = { //animation: false, backgroundColor: "#000", tooltip: { formatter: (params) => { if (params.seriesName !== 'mouseoutSeries') { return `${ params.seriesName }
${option.series[params.seriesIndex].pieData.number}`; } }, }, xAxis3D: { min: -1, max: 1, }, yAxis3D: { min: -1, max: 1, }, zAxis3D: { min: -1, max: 1, }, grid3D: { left: 'center', top: 20, show: false, boxHeight: 5, viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置 alpha: 38, beta: 30, rotateSensitivity: 0, zoomSensitivity: 0, panSensitivity: 0, autoRotate: false, }, //后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。 postEffect: { //配置这项会出现锯齿，请自己去查看官方配置有办法解决 enable: true, bloom: { enable: true, bloomIntensity: 0, }, SSAO: { enable: false, quality: 'medium', radius: 2, }, }, }, series: series, }; return option; } option = getPie3D(data, 0.71);

Echarts在线免费图表