devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：不正经 | 2024-04-09 16:38:40

赞

踩

echarts 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图表集

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/393989
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号