vue+echarts 3D饼图

于 2024-08-21 17:29:12 发布
阅读量261 收藏 3
点赞数 7
文章标签： vue.js echarts 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44997264/article/details/141398841
版权

在 Vue 中实现 ECharts 3D 饼图

ECharts 是一个强大的开源图表库，支持多种图表类型，包括 3D 图表。下面是我在项目中做的一个案例我采用了封装

<template>
    <!-- 纵向柱状图 -->
    <div ref="myChart" :chartData="chartData" :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl'


export default {
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '200px'
        },
        height: {
            type: String,
            default: '200px'
        },
        chartData: {
            type: Object,
            default: null
        },
    },
    data() {
        return {
            chart: null,
            colors: [
                "#FF0000",   // 红色
                "#FF7F00",   // 亮橙色
                "#FFFF00",   // 亮黄色
                "#00FF00",   // 亮绿色
                "#0000FF",   // 亮蓝色
                "#8A2BE2",   // 亮靛蓝色
                "#FF00FF",   // 亮洋红色
                "#FF69B4",   // 亮桃红色
                "#FF1493",   // 亮粉红色
                "#FF6347",   // 亮红色
                "#FF4500",   // 亮橙红色
                "#FF00FF",   // 亮洋红色
                "#FF8C00",   // 亮橙色
                "#FFD700",   // 亮金色
                "#FFFF00",   // 亮黄色
                "#32CD32",   // 亮绿
                "#00FF00",   // 亮绿色
                "#00BFFF",   // 亮青色
                "#87CEEB",   // 亮天蓝色
                "#1E90FF",   // 亮蓝色
                "#00BFFF",   // 亮蓝色
                "#DA70D6",   // 亮紫色
                "#FF00FF",   // 亮洋红色
                "#FF1493",   // 亮粉色
                "#FFB6C1",   // 亮粉色
                "#FF69B4",   // 亮桃红色
                "#FF6347",   // 亮红色
                "#FFD700",   // 亮金色
                "#FFFFE0",   // 亮象牙色
                "#FFFFFF"    // 纯白色
            ]
        }
    },
    beforeUnmount() {
        if (!this.chart) {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    mounted() {
        this.getChartDataFun();
    },
    methods: {
        getChartDataFun() {
            this.chart = echarts.init(document.getElementById(this.id));

            var nameData = []

            var valueData = []

            let gaodata = [{
                "name": "干渠",
                "value": 28.58,
                "pec": "0.001%"
            },
            {
                "name": "养殖坑塘",
                "value": 59.06,
                "pec": "0.001%"
            },
            {
                "name": "广场用地",
                "value": 287.57,
                "pec": "0.006%"
            },
        ]

            for (var i = 0; i < gaodata.length; i++) {
                nameData.push(gaodata[i].name)
                const gaocolor = {
                    name: gaodata[i].name,
                    value: gaodata[i].value,
                    itemStyle: {
                        //   opacity: 0.5,
                        color: this.colors[i],
                    },
                }
                valueData.push(gaocolor)
            }
          
            const series = this.getPie3D(valueData, 0);// 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
            series.push({
                name: "pie2d",
                type: "pie",
                label: {
                    opacity: 1,
                    fontSize: 14,
                    lineHeight: 20,
                    textStyle: {
                        fontSize: 14,
                        color: "#fff",
                    },
                },
                labelLine: {
                    length: 30,
                    length2: 30,
                },
                startAngle: 0, //起始角度，支持范围[0, 360]。
                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                radius: ["40%", "60%"],
                center: ["50%", "50%"],
                data: valueData,
                itemStyle: {
                    opacity: 0,
                },
            });
            // 准备待返回的配置项，把准备好的 legendData、series 传入。
            let option = {
                legend: {
                    show: false,
                    tooltip: {
                        show: true,
                    },
                    orient: "horizontal",  // 设置为水平方向
                    data: nameData,
                    top: "center",
                    itemGap: 14,
                    itemHeight: 8,
                    itemWidth: 17,
                    right: "2%",
                    textStyle: {
                        color: "#fff",
                        fontSize: 12,
                    },
                },
                animation: true,
                tooltip: {
                    formatter: (params) => {
                        if (
                            params.seriesName !== "mouseoutSeries" &&
                            params.seriesName !== "pie2d"
                        ) {
                            return `${params.seriesName
                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
                                };"></span>${option.series[params.seriesIndex].pieData.value
                                }`;
                        }
                    },
                    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: 2,
                    //top: '30%',
                    left: '2%',
                    bottom: "50%",
                    // environment: "rgba(255,255,255,0)",
                    viewControl: {
                        distance: 320,
                        alpha: 45,
                        beta: 20,
                        autoRotate: false, // 自动旋转
                    },
                },
                series: series,
            };
            // let option = this.getPie3D(this.optionData, 0);
            this.chart.setOption(option)
        },

        getPie3D(pieData, internalDiameterRatio) {
            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);
            }

            // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
            // 向每个 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 = this.getParametricEquation(
                    series[i].pieData.startRatio,
                    series[i].pieData.endRatio,
                    false,
                    false,
                    k,
                    // 调整扇形高度
                    i === 0 ? 30 : 30,
                    i,
                    series[i].pieData.value
                );

                startValue = endValue;

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

        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;
            // let offsetZ = i == 1 ? 2 : 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;
                },
            };
        }
    }
};
</script>

运行结果：

在本文中，我在其中集成了 ECharts 3D 饼图。通过 ECharts 的强大功能和 Vue 的组件化开发方式，我们可以方便地创建和管理数据可视化组件。如果你对图表和数据可视化感兴趣，ECharts 是一个非常值得学习和使用的工具。

一般就是项目中遇到的会写出来，也在不断地探索中

希望这篇文章对你有所帮助！如果你有任何问题或建议，请在评论区留言。

刘 怼怼
关注
echarts的3D饼图
weixin_45859470的博客
12-01 3081
免费--echarts的3D饼图--附有代码文件
Echarts实现3D饼图
qq_45787691的博客
04-22 1707
echarts实现3D饼图
3d环形图开发（vue3+vite+ts）
Alone_Endeavor的博客
10-07 1694
【代码】3d环形图开发。
echarts实现3D饼图
weixin_35749440的博客
12-16 4825
echarts是一款强大的数据可视化工具，它可以帮助我们快速、简单地创建各种图表。 要在echarts中实现3D饼图，需要使用echarts的 series 系列中的 pie3D 组件。 下面是一个简单的例子，展示如何使用echarts创建3D饼图： var myChart = echarts.init(document.getElementById('main')); var option =...
【echarts】使用 ECharts 绘制3D饼图
九日的博客
04-16 1万+
一步步教你使用echarts绘制一个3D饼状图。
ehcarts示例
Go_South_的博客
03-02 235
【代码】ehcarts示例。
Echarts-3d饼图
weixin_43327235的博客
02-17 1万+
<template> <div :id="echartsId"></div> </template> <script> import 'echarts-gl' var echarts = require('echarts') export default { props: { echartsId: { type: String, default: 'chart-panel' }, k: {...
echarts3d饼图
no_one_but_you的博客
06-14 8881
echarts3d饼图
echarts 3D饼图组件
09-26
import PieChart3D from "@/components/PieChart3D" <PieChart3D values={[ { name: "整租", value: 3, color: [5, 140, 198, 1] }, { name: "散租", value: 2, color: [255, 137, 0, 1] } ]} />
通过Vue3 + TypeScript + echarts + echarts-gl 实现3D饼图
最新发布
郭宝的博客
08-07 117
首先需要通过npm 安装echarts 和 echarts-gl。绘制3D图的核心代码screenPie.ts。封装为Pie3D.vue组件。使用 Pie3D 组件。
echarts 3d饼图资源
05-12
echarts 3d饼图资源
ECharts 3 饼图 柱状图
05-17
ajax+json+ECharts 做出炫酷的效果
echarts实现3D环装饼图带引导线效果
01-25
在ECharts 4.x版本之后，ECharts引入了3D图表的支持，包括3D饼图。3D饼图可以通过设置`series.type`为`'pie'`并启用`viewControl`的`projection`属性为`'cylinder'`来实现。这将饼图转换为3D圆柱体形状，增加立体感...
3d饼图 vue_Vue+Echarts实现一个饼状图
weixin_39982568的博客
12-19 1568
原标题：Vue+Echarts实现一个饼状图在jQuery里面，实现一个折线图，【前端统计图】echarts实现单条折线图https://www.jianshu.com/p/0354a4f8c563。现在要实现,Vue+Echarts实现一个折线图,打开之前的mint项目:1:在项目里面安装echartscnpm install echarts --s 2：在需要用图表的地方引入import ec...
3d饼图(Vue3 + echarts + echarts-gl)
十七弦的博客
05-25 9599
1.下载依赖(echarts 和echarts-gl) npm install echarts npm install echarts-gl 2.引入echarts和echrts-gl, , import * as echarts form 'echarts' import 'echarts-gl' 2.1 也可以在App.vue中引入 import * as echarts from 'echarts' import { provide } from 'vue' export defaul
echarts 3D饼状图
weixin_43483746的博客
03-16 5755
echarts 3D饼状图。
echarts3d饼图，环形图（包含透明效果）
热门推荐
weixin_41326021的博客
09-09 8万+
先看效果图： 饼图： 环形图： 带透明度的环形图： 安装echarts "echarts":"^5.1.2" "echarts-gl":"^2.0.8" import Vue from 'vue' import * as echarts from 'echarts' import 'echarts-gl' // 3d图表库 Vue.prototype.$echarts = echarts .vue文件 <template> &l...
vue 绘制echarts 3D饼图
05-31
在 Vue 中绘制 echarts 3D 饼图，你需要先安装 echarts 和 echarts-gl 两个依赖，然后在 Vue 组件中引入它们，最后通过指定一个 dom 元素，来渲染出 3D 饼图。下面是一个简单的例子： 首先，安装 echarts 和 echarts-gl 依赖： ```bash npm install echarts echarts-gl --save ``` 然后在 Vue 组件中引入它们： ```vue <template> <div id="chart" style="width: 600px; height: 400px"></div> </template> <script> import echarts from 'echarts'; import 'echarts-gl'; export default { mounted() { const chartDom = document.getElementById('chart'); const myChart = echarts.init(chartDom); const option = { series: [ { type: 'pie3D', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 274, name: '联盟广告'}, {value: 235, name: '视频广告'}, {value: 400, name: '搜索引擎'} ] } ] }; myChart.setOption(option); } }; </script> ``` 在这个例子中，我们引入了 echarts 和 echarts-gl，然后在 mounted 钩子函数中，使用 `echarts.init()` 方法初始化一个 echarts 实例，并指定一个 dom 元素来渲染图表。最后，我们通过设置 `option` 来配置 3D 饼图的数据和样式。 注意：在使用 echarts-gl 绘制 3D 饼图时，需要将 `type` 属性设置为 `'pie3D'`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘 怼怼

你的鼓励将是我创作下去的动力哦

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值