• 用echarts在vue2中实现3d饼图

    先看效果，再看文章：

    一、安装插件

    3d的图不仅用到echarts，还用到了echarts-gl，因此都需要安装一下哦~

    1. npm install echarts 
    2. npm install echarts-gl@2.0.9 //可以指定版本，也可不指定

    二、在main.js中引入

    1. import * as echarts from "echarts";
    2. import 'echarts-gl';
    3. Vue.prototype.$echarts = echarts;

    三、在组件中使用

    直接复制粘贴吧，省事

    1. <template>
    2.     <div class="ybjgtzz">
    3.         <!-- 饼图 -->
    4.         <div class="container">
    5.             <div class="chartsGl" id="charts"></div>
    6.             <!-- 饼图下面的底座 -->
    7.             <div class="buttomCharts"></div>
    8.         </div>
    9.  
    10.     </div>
    11. </template>
    12.   
    13. <script>
    14. export default {
    15.     name: "Zysjg",
    16.     data() {
    17.         return {
    18.             optionData: [
    19.                 {
    20.                     name: '工业',//名称
    21.                     value: 19,//值
    22.                     itemStyle: {//颜色 
    23.                         color: 'rgba(3, 62, 209,0.5)'
    24.                     }
    25.                 }, {
    26.                     name: '生活',
    27.                     value: 13,
    28.                     itemStyle: {
    29.                         color: 'rgba(61, 222, 207,0.5)',
    30.                     }
    31.                 }, {
    32.                     name: '农业',
    33.                     value: 15,
    34.                     itemStyle: {
    35.                         color: 'rgba(193, 142, 34,0.3)'
    36.                     }
    37.                 },
    38.             ],
    39.             option: {}
    40.         };
    41.     },
    42.     mounted() {
    43.         this.$nextTick(() => {
    44.             this.init();
    45.         });
    46.     },
    47.     methods: {
    48.         //初始化构建
    49.         init() {
    50.             //构建3d饼状图
    51.             let myChart = this.$echarts.init(document.getElementById('charts'));
    52.             // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
    53.             this.option = this.getPie3D(this.optionData, 0.85);
    54.             //将配置项设置进去
    55.             myChart.setOption(this.option);
    56.             //鼠标移动上去特效效果
    57.             // this.bindListen(myChart);
    58.         },
    59.         //配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
    60.         getPie3D(pieData, internalDiameterRatio) {
    61.             let that = this;
    62.             let series = [];
    63.             let sumValue = 0;
    64.             let startValue = 0;
    65.             let endValue = 0;
    66.             let legendData = [];
    67.             let legendBfb = [];
    68.             let k = 1 - internalDiameterRatio;
    69.             pieData.sort((a, b) => {
    70.                 return (b.value - a.value);
    71.             });
    72.             // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
    73.             for (let i = 0; i < pieData.length; i++) {
    74.                 sumValue += pieData[i].value;
    75.                 let seriesItem = {
    76.                     //系统名称
    77.                     name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
    78.                     type: 'surface',
    79.                     //是否为参数曲面（是）
    80.                     parametric: true,
    81.                     //曲面图网格线（否）上面一根一根的
    82.                     wireframe: {
    83.                         show: false
    84.                     },
    85.                     pieData: pieData[i],
    86.                     pieStatus: {
    87.                         selected: false,
    88.                         hovered: false,
    89.                         k: k
    90.                     },
    91.                     //设置饼图在容器中的位置(目前没发现啥用)
    92.                     center: ['80%', '100%'],
    93.                     radius: '60%',
    94.  
    95.                 };
    96.  
    97.                 //曲面的颜色、不透明度等样式。
    98.                 if (typeof pieData[i].itemStyle != 'undefined') {
    99.                     let itemStyle = {};
    100.                     typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
    101.                     typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
    102.                     seriesItem.itemStyle = itemStyle;
    103.                 }
    104.                 series.push(seriesItem);
    105.             }
    106.  
    107.             // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
    108.             // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
    109.             legendData = [];
    110.             legendBfb = [];
    111.             for (let i = 0; i < series.length; i++) {
    112.                 endValue = startValue + series[i].pieData.value;
    113.                 series[i].pieData.startRatio = startValue / sumValue;
    114.                 series[i].pieData.endRatio = endValue / sumValue;
    115.                 series[i].parametricEquation = that.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
    116.                     false, false, k, series[i].pieData.value);
    117.                 startValue = endValue;
    118.                 let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
    119.                 legendData.push({
    120.                     name: series[i].name,
    121.                     value: bfb
    122.                 });
    123.                 legendBfb.push({
    124.                     name: series[i].name,
    125.                     value: bfb
    126.                 });
    127.  
    128.             }
    129.  
    130.             //(第二个参数可以设置你这个环形的高低程度)
    131.             let boxHeight = this.getHeight3D(series, 20);//通过传参设定3d饼/环的高度
    132.             // 准备待返回的配置项，把准备好的 legendData、series 传入。
    133.             let option = {
    134.                 //图例组件
    135.                 legend: {
    136.                     data: legendData,
    137.                     //图例列表的布局朝向。
    138.                     orient: 'horizontal',
    139.                     center: 0,
    140.                     bottom: 0,
    141.                     //图例文字每项之间的间隔
    142.                     itemGap: 15,
    143.                     textStyle: {
    144.                         color: '#A1E2FF',
    145.                         fontSize: '12px'
    146.                     },
    147.                     itemHeight: 10, // 修改icon图形大小
    148.                     itemWidth: 10, // 修改icon图形大小
    149.                     show: true,
    150.                     icon: 'circle',
    151.                     //格式化图例文本（我是数值什么显示什么）
    152.                     formatter: function (name) {
    153.                         var target;
    154.                         for (var i = 0, l = pieData.length; i < l; i++) {
    155.                             if (pieData[i].name == name) {
    156.                                 target = pieData[i].value;
    157.                             }
    158.                         }
    159.                         return `${name}: ${target}`;
    160.                     },
    161.                     // 这个可以显示百分比那种（可以根据你想要的来配置）
    162.                     formatter: function (param) {
    163.                         let item = legendBfb.filter(item => item.name == param)[0];
    164.                         let bfs = that.fomatFloat(item.value * 100, 2) + "%";
    165.                         console.log(item.name)
    166.                         return `${item.name} :${bfs}`;
    167.                     }
    168.                 },
    169.                 //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
    170.                 tooltip: {
    171.                     formatter: params => {
    172.                         if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
    173.                             let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
    174.                                 100).toFixed(2);
    175.                             return `${params.seriesName}<br/>` +
    176.                                 `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
    177.                                 `${bfb}`;
    178.                         }
    179.                     }
    180.                 },
    181.                 labelLine: {
    182.                     show: true,
    183.                     lineStyle: {
    184.                         color: '#7BC0CB',
    185.                     },
    186.                 },
    187.                 label: {
    188.                     show: true,
    189.                     position: 'outside',
    190.                     formatter: '{b} \n{c} {d}%',
    191.                 },
    192.                 //这个可以变形
    193.                 xAxis3D: {
    194.                     min: -1,
    195.                     max: 1
    196.                 },
    197.                 yAxis3D: {
    198.                     min: -1,
    199.                     max: 1
    200.                 },
    201.                 zAxis3D: {
    202.                     min: -1,
    203.                     max: 1
    204.                 },
    205.                 //此处是修改样式的重点
    206.                 grid3D: {
    207.                     show: false,
    208.                     boxHeight: boxHeight, //圆环的高度
    209.                     //这是饼图的位置
    210.                     top: '-20.5%',
    211.                     left: '-4%',
    212.                     viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
    213.                         alpha: 25, //角度(这个很重要 调节角度的)
    214.                         distance: 160,//调整视角到主体的距离，类似调整zoom(这是整体大小)
    215.                         rotateSensitivity: 0, //设置为0无法旋转
    216.                         zoomSensitivity: 0, //设置为0无法缩放
    217.                         panSensitivity: 0, //设置为0无法平移
    218.                         autoRotate: false //自动旋转
    219.                     }
    220.                 },
    221.                 series: series
    222.             };
    223.             return option;
    224.         },
    225.         //获取3d丙图的最高扇区的高度
    226.         getHeight3D(series, height) {
    227.             series.sort((a, b) => {
    228.                 return (b.pieData.value - a.pieData.value);
    229.             })
    230.             return height * 25 / series[0].pieData.value;
    231.         },
    232.         // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    233.         getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
    234.             // 计算
    235.             let midRatio = (startRatio + endRatio) / 2;
    236.             let startRadian = startRatio * Math.PI * 2;
    237.             let endRadian = endRatio * Math.PI * 2;
    238.             let midRadian = midRatio * Math.PI * 2;
    239.             // 如果只有一个扇形，则不实现选中效果。
    240.             if (startRatio === 0 && endRatio === 1) {
    241.                 isSelected = false;
    242.             }
    243.             // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
    244.             k = typeof k !== 'undefined' ? k : 1 / 3;
    245.             // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
    246.             let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
    247.             let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
    248.             // 计算高亮效果的放大比例（未高亮，则比例为 1）
    249.             let hoverRate = isHovered ? 1.05 : 1;
    250.             // 返回曲面参数方程
    251.             return {
    252.                 u: {
    253.                     min: -Math.PI,
    254.                     max: Math.PI * 3,
    255.                     step: Math.PI / 32
    256.                 },
    257.                 v: {
    258.                     min: 0,
    259.                     max: Math.PI * 2,
    260.                     step: Math.PI / 20
    261.                 },
    262.                 x: function (u, v) {
    263.                     if (u < startRadian) {
    264.                         return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
    265.                     }
    266.                     if (u > endRadian) {
    267.                         return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
    268.                     }
    269.                     return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
    270.                 },
    271.                 y: function (u, v) {
    272.                     if (u < startRadian) {
    273.                         return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
    274.                     }
    275.                     if (u > endRadian) {
    276.                         return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
    277.                     }
    278.                     return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
    279.                 },
    280.                 z: function (u, v) {
    281.                     if (u < -Math.PI * 0.5) {
    282.                         return Math.sin(u);
    283.                     }
    284.                     if (u > Math.PI * 2.5) {
    285.                         return Math.sin(u) * h * .1;
    286.                     }
    287.                     return Math.sin(v) > 0 ? 1 * h * .1 : -1;
    288.                 }
    289.             };
    290.         },
    291.         // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
    292.         bindListen(myChart) {
    293.             let that = this;
    294.             let selectedIndex = '';
    295.             let hoveredIndex = '';
    296.             // 监听点击事件，实现选中效果（单选）
    297.             myChart.on('click', function (params) {
    298.                 // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
    299.                 let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;
    300.                 let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;
    301.                 let k = that.option.series[params.seriesIndex].pieStatus.k;
    302.                 let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
    303.                 let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
    304.                 // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
    305.                 if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
    306.                     that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
    307.                         selectedIndex].pieData
    308.                         .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
    309.                             selectedIndex].pieData
    310.                         .value);
    311.                     that.option.series[selectedIndex].pieStatus.selected = false;
    312.                 }
    313.                 // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
    314.                 that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
    315.                     isSelected,
    316.                     isHovered, k, that.option.series[params.seriesIndex].pieData.value);
    317.                 that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
    318.                 // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
    319.                 isSelected ? selectedIndex = params.seriesIndex : null;
    320.                 // 使用更新后的 option，渲染图表
    321.                 myChart.setOption(that.option);
    322.             });
    323.             // 监听 mouseover，近似实现高亮（放大）效果
    324.             myChart.on('mouseover', function (params) {
    325.                 // 准备重新渲染扇形所需的参数
    326.                 let isSelected;
    327.                 let isHovered;
    328.                 let startRatio;
    329.                 let endRatio;
    330.                 let k;
    331.                 // 如果触发 mouseover 的扇形当前已高亮，则不做操作
    332.                 if (hoveredIndex === params.seriesIndex) {
    333.                     return;
    334.                     // 否则进行高亮及必要的取消高亮操作
    335.                 } else {
    336.                     // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
    337.                     if (hoveredIndex !== '') {
    338.                         // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
    339.                         isSelected = that.option.series[hoveredIndex].pieStatus.selected;
    340.                         isHovered = false;
    341.                         startRatio = that.option.series[hoveredIndex].pieData.startRatio;
    342.                         endRatio = that.option.series[hoveredIndex].pieData.endRatio;
    343.                         k = that.option.series[hoveredIndex].pieStatus.k;
    344.                         // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
    345.                         that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
    346.                             isSelected,
    347.                             isHovered, k, that.option.series[hoveredIndex].pieData.value);
    348.                         that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
    349.                         // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
    350.                         hoveredIndex = '';
    351.                     }
    352.                     // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
    353.                     if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
    354.                         // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
    355.                         isSelected = that.option.series[params.seriesIndex].pieStatus.selected;
    356.                         isHovered = true;
    357.                         startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
    358.                         endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
    359.                         k = that.option.series[params.seriesIndex].pieStatus.k;
    360.                         // 对当前点击的扇形，执行高亮操作（对 option 更新）
    361.                         that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
    362.                             isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);
    363.                         that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;
    364.                         // 记录上次高亮的扇形对应的系列号 seriesIndex
    365.                         hoveredIndex = params.seriesIndex;
    366.                     }
    367.                     // 使用更新后的 option，渲染图表
    368.                     myChart.setOption(that.option);
    369.                 }
    370.             });
    371.             // 修正取消高亮失败的 bug
    372.             myChart.on('globalout', function () {
    373.                 // 准备重新渲染扇形所需的参数
    374.                 let isSelected;
    375.                 let isHovered;
    376.                 let startRatio;
    377.                 let endRatio;
    378.                 let k;
    379.                 if (hoveredIndex !== '') {
    380.                     // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
    381.                     isSelected = that.option.series[hoveredIndex].pieStatus.selected;
    382.                     isHovered = false;
    383.                     k = that.option.series[hoveredIndex].pieStatus.k;
    384.                     startRatio = that.option.series[hoveredIndex].pieData.startRatio;
    385.                     endRatio = that.option.series[hoveredIndex].pieData.endRatio;
    386.                     // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
    387.                     that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
    388.                         isSelected,
    389.                         isHovered, k, that.option.series[hoveredIndex].pieData.value);
    390.                     that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
    391.                     // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
    392.                     hoveredIndex = '';
    393.                 }
    394.                 // 使用更新后的 option，渲染图表
    395.                 myChart.setOption(that.option);
    396.             });
    397.         },
    398.         //这是一个自定义计算的方法
    399.         fomatFloat(num, n) {
    400.             var f = parseFloat(num);
    401.             if (isNaN(f)) {
    402.                 return false;
    403.             }
    404.             f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   
    405.             var s = f.toString();
    406.             var rs = s.indexOf('.');
    407.             //判定如果是整数，增加小数点再补0
    408.             if (rs < 0) {
    409.                 rs = s.length;
    410.                 s += '.';
    411.             }
    412.             while (s.length <= rs + n) {
    413.                 s += '0';
    414.             }
    415.             return s;
    416.         },
    417.     },
    418.     // 准备待返回的配置项，把准备好的 legendData、series 传入。
    419. }
    420. </script>
    421. <style lang="scss" scoped>
    422. //饼图(外面的容器)
    423. .container {
    424.     width: 90%;
    425.     height: 100%;
    426.     padding-top: 15px;
    427. }
    428. //饼图的大小
    429. .chartsGl {
    430.     height: 200px;
    431.     width: 380px;
    432. }
    433. //饼图底座（我也想给你们底座图片 可是我不知道咋给）
    434. .buttomCharts {
    435.     background: center top url("../imgs/u111.png") no-repeat;
    436.     background-size: 100% 100%;
    437.     height: 95px;
    438.     width: 204px;
    439.     margin-top: -141px;
    440.     margin-left: 21%;
    441. }
    442.  
    443. .ybjgtzz {
    444.     overflow-y: auto;
    445.     padding: 10px;
    446.     height: 250px;
    447.     box-sizing: border-box;
    448. }
    449. </style>
    450.

    四、常修改的参数

    1、修改3d饼图大小，在大概244行的位置，grid3D的对象里面，修改distance属性，即可调整

    值越小，图越大 

     

    2、修改3d饼图视角高度，在大概161行的位置，修改函数的第二个参数

     

    3、修改3d饼图颜色，直接在data中的optionData里面修改就行了
     4、修改饼图位置，这个常用，也是在grid3D这个属性里面设置，在大概240行的位置

    在3d饼图中设置下面这两属性是没用的，所以这里请注意一下，记得去grid3D里面修改他的位置

     

     最后乘上官方文档例子：echarts图表集

  • 相关阅读:
    frp 反向隧道代理（内网穿透）之协议 “websocket”
    电脑重装系统后Win11用户名怎么更改
    【C++】STL入门—— 一张图带你了解常用的string类函数
    用帝国主义竞争算法（ICA）求解旅行商问题（TSP）（Matlab代码实现）
    Qt QtWidgets相关问题汇总
    浅谈分布式任务调度系统Celery的设计与实现
    构造函数原型prototype
    【Jmeter】二次开发
    core sound driver详解
    澳大利亚博士后招聘|国立大学—太阳能电池方向
  • 原文地址：https://blog.csdn.net/qq_41579104/article/details/133949902