echarts 3d饼图

立体饼图

  var optionData = [
                 {
                     name: '第一产业',
                    value: "470400",
                     unit:"吨"
                },
                {
                    name: '第二产业',
                    value: "52337100",
                    unit:"吨"
                },
                 {
                     name: '第三产业',
                    value: "4057600",
                    unit:"吨"
                },
            ]
            var option = getPie3D(optionData, 0);
            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) {
                    isSelected = false;
                }
                k = typeof k !== 'undefined' ? k : 1 / 3;
                const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
                const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
                // 鼠标滑过时外环放大大小
                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;
                    },
                };
            }

            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;
                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],
                        pieStatus: {
                            selected: false,
                            hovered: true,
                            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);
                }
                for (let i = 0; i < series.length; i += 1) {
                    // 判断series[i].pieData.value 数字的大小
                    var nums = series[i].pieData.value
                    // .toString()
                    let keys = null
                    if(nums>0 && nums<1000){
                        keys = series[i].pieData.value / 10
                    }else if(nums>=1000 && nums <10000){
                        keys = series[i].pieData.value / 100
                    }else if(nums>=10000 && nums < 100000){
                        keys = series[i].pieData.value / 1000
                    }else{
                        keys = series[i].pieData.value / 10000
                    }
                    
                    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,
                        keys //在此处传入饼图初始高度h
                    );
                    startValue = endValue;
                    legendData.push(series[i].name);
                }
                console.log(series, 'seriesseries')

                let objs = {
                    center: ['50%', '35%'],
                    clockwise: false,
                    data: optionData,
                    name: 'pie2d',
                    type: 'pie',
                    radius: '50%',
                    startAngle: -30,
                    itemStyle: { opacity: 0 },
                    label: {
                        fontSize: 14,
                        lineHeight: 20,
                        opacity: 1,
                        textStyle: {
                            color: "#fff",
                            fontSize: 14,
                        }
                    }
                }
                series.push(objs)
                // 准备待返回的配置项，把准备好的series 传入。
                const option = {
                    legend: {
                        show: true,
                        left: "center",
                        bottom: 10,
                        itemHeight: 8,
                        itemWidth: 20,
                        padding: [10, 20],
                        itemGap: 10,
                        textStyle: {
                            color: "#fff",
                            fontSize: 12,
                            fontWeight: "400",
                        },
                        formatter: (name) => {
                            if (optionData.length) {
                                const item = optionData.filter((item) => item.name === name)[0];
                                return `  ${name}  ${item.value} ${item.unit}        `;
                            }
                        },
                    },
                    color: [
                        '#159AFF',
                        '#66E1DF',
                        '#66E193',
                        '#E3F170',
                        '#FFAD6A',
                        '#ffe0ab',
                        '#6bc5f4',
                        '#c08ef2',
                        '#ffda49'
                    ],
                    tooltip: {
                        formatter: (params) => {
                            console.log(params, 'params')
                            if (params.seriesName !== 'mouseoutSeries') {
                                return `${params.marker}${params.seriesName}：${optionData[params.seriesIndex].value}${optionData[params.seriesIndex].unit}`;
                            }
                            return ``;
                        },
                    },
                    xAxis3D: {
                        min: -1,
                        max: 1,
                    },
                    yAxis3D: {
                        min: -1,
                        max: 1,
                    },
                    zAxis3D: {
                        min: -1,
                        max: 1,
                    },
                    grid3D: {
                        show: false,
                        boxHeight: 25,//修改立体饼图的高度
                        top: '-10%',
                        // left: '-10%',
                        viewControl: {
                            // 3d效果可以放大、旋转等，
                            alpha: 25,//饼图翻转的程度
                            beta: 40,
                            rotateSensitivity: 1,
                            zoomSensitivity: 0,
                            panSensitivity: 0,
                            // autoRotate: fasle,//是否自动旋转
                            distance: 390,//距离越小看到的饼图越大
                        },
                    },
                    series,
                };
                console.log(series, 'seriesseriesseries')
                return option;
            }

            myecharts.setOption(option)