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

Echarts 环形饼图_echart 环形3d饼图

作者：从前慢现在也慢 | 2024-02-18 05:54:49

赞

踩

echart 环形3d饼图

 

  1.    var myChart = echarts.init(document.getElementById('yt-bar'));
  2.     let selectedIndex = '';
  3.     let hoveredIndex = '';
  4.     const colorList = ['#37FFC9', '#31A1FF', '#FFF777']
  5.     const data = {
  6.         value: [20, 30, 40, 50],
  7.         title: ['11', '22', '33', '44'],
  8.         color: ['#37FFC9', '#31A1FF', '#FFF777']
  9.     }
  10.     const paramsList = data.value.map((item, index) => {
  11.         return {
  12.             value: item,
  13.             name: data.title[index],
  14.             shading: 'realistic',
  15.             itemStyle: {
  16.                 color: data.color[index]
  17.             },
  18.         }
  19.     })
  20.     option = getPie3D(paramsList, 0.59)
  21.     // 生成扇形的曲面参数方程
  22.     function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
  23.         // 计算
  24.         const midRatio = (startRatio + endRatio) / 2;
  25.         const startRadian = startRatio * Math.PI * 2;
  26.         const endRadian = endRatio * Math.PI * 2;
  27.         const midRadian = midRatio * Math.PI * 2;
  28.  
  29.         // 如果只有一个扇形，则不实现选中效果。
  30.         if (startRatio === 0 && endRatio === 1) {
  31.             isSelected = false;
  32.         }
  33.  
  34.         // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  35.         k = typeof k !== 'undefined' ? k : 1 / 3;
  36.  
  37.         // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  38.         const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  39.         const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  40.  
  41.         // 计算高亮效果的放大比例（未高亮，则比例为 1）
  42.         const hoverRate = isHovered ? 1 : 1;
  43.  
  44.         // 返回曲面参数方程
  45.         return {
  46.             u: {
  47.                 min: -Math.PI,
  48.                 max: Math.PI * 3,
  49.                 step: Math.PI / 32,
  50.             },
  51.  
  52.             v: {
  53.                 min: 0,
  54.                 max: Math.PI * 2,
  55.                 step: Math.PI / 20,
  56.             },
  57.  
  58.             x(u, v) {
  59.                 if (u < startRadian) {
  60.                     return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  61.                 }
  62.                 if (u > endRadian) {
  63.                     return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  64.                 }
  65.                 return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
  66.             },
  67.  
  68.             y(u, v) {
  69.                 if (u < startRadian) {
  70.                     return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  71.                 }
  72.                 if (u > endRadian) {
  73.                     return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  74.                 }
  75.                 return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
  76.             },
  77.  
  78.             z(u, v) {
  79.                 if (u < -Math.PI * 0.5) {
  80.                     return Math.sin(u);
  81.                 }
  82.                 if (u > Math.PI * 2.5) {
  83.                     return Math.sin(u) * h * 0.1;
  84.                 }
  85.                 // 当前图形的高度是Z根据h（每个value的值决定的）
  86.                 return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
  87.             },
  88.         };
  89.     }
  90.     // 生成模拟 3D 饼图的配置项
  91.     function getPie3D(pieData, internalDiameterRatio) {
  92.         const series = [];
  93.         // 总和
  94.         let sumValue = 0;
  95.         let startValue = 0;
  96.         let endValue = 0;
  97.         const legendData = [];
  98.         const k =
  99.             typeof internalDiameterRatio !== 'undefined'
  100.                 ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
  101.                 : 1 / 3;
  102.  
  103.         // 为每一个饼图数据，生成一个 series-surface 配置
  104.         for (let i = 0; i < pieData.length; i++) {
  105.             sumValue += pieData[i].value;
  106.             let seriesItem = {
  107.                 name:
  108.                     typeof pieData[i].name === "undefined"
  109.                         ? `series${i}`
  110.                         : pieData[i].name,
  111.                 type: "surface",
  112.                 parametric: true,
  113.                 wireframe: {
  114.                     show: false,
  115.                 },
  116.                 pieData: pieData[i],
  117.                 pieStatus: {
  118.                     selected: false,
  119.                     hovered: false,
  120.                     k
  121.                 },
  122.             };
  123.  
  124.             if (typeof pieData[i].itemStyle != "undefined") {
  125.                 let itemStyle = {};
  126.                 if (typeof pieData[i].itemStyle.color != "undefined") {
  127.                     itemStyle.color = pieData[i].itemStyle.color;
  128.                 }
  129.                 if (typeof pieData[i].itemStyle.opacity != "undefined") {
  130.                     itemStyle.opacity = pieData[i].itemStyle.opacity;
  131.                 }
  132.                 seriesItem.itemStyle = itemStyle;
  133.             }
  134.             series.push(seriesItem);
  135.         }
  136.         // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  137.         // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  138.         for (let i = 0; i < series.length; i++) {
  139.             endValue = startValue + series[i].pieData.value;
  140.             series[i].pieData.startRatio = startValue / sumValue;
  141.             series[i].pieData.endRatio = endValue / sumValue;
  142.             series[i].parametricEquation = getParametricEquation(
  143.                 series[i].pieData.startRatio,
  144.                 series[i].pieData.endRatio,
  145.                 false,
  146.                 false,
  147.                 k,
  148.                 series[i].pieData.value === series[0].pieData.value ? 1 : 1
  149.             );
  150.             startValue = endValue;
  151.             legendData.push(series[i].name);
  152.         }
  153.  
  154.         // 准备待返回的配置项，把准备好的 legendData、series 传入。
  155.         const option = {
  156.             tooltip: {
  157.                 formatter: (params) => {
  158.                     if (params.seriesName !== 'mouseoutSeries') {
  159.                         return `${params.seriesName
  160.                             }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
  161.                             };"></span>${option.series[params.seriesIndex].pieData.value}`;
  162.                     }
  163.                     return '';
  164.                 },
  165.             },
  166.             xAxis3D: {
  167.                 min: -1,
  168.                 max: 1,
  169.             },
  170.             yAxis3D: {
  171.                 min: -1,
  172.                 max: 1,
  173.             },
  174.             zAxis3D: {
  175.                 min: -1,
  176.                 max: 1,
  177.             },
  178.             grid3D: {
  179.                 show: false,
  180.                 boxHeight: 15,
  181.                 top: '-10%',
  182.                 viewControl: {
  183.                     // 3d效果可以放大、旋转等，请自己去查看官方配置
  184.                     alpha: 25,
  185.                     rotateSensitivity: 1,
  186.                     zoomSensitivity: 0,
  187.                     panSensitivity: 0,
  188.                     distance: 170,
  189.                 },
  190.                 // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
  191.                 postEffect: {
  192.                     // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
  193.                     enable: false,
  194.                     bloom: {
  195.                         enable: true,
  196.                         bloomIntensity: 0.1,
  197.                     },
  198.                     SSAO: {
  199.                         enable: true,
  200.                         quality: 'medium',
  201.                         radius: 2,
  202.                     },
  203.                 },
  204.             },
  205.             series,
  206.         };
  207.         return option;
  208.     }
  209.     //  修正取消高亮失败的 bug
  210.     // 监听 mouseover，近似实现高亮（放大）效果
  211.     // myChart.on('mouseover', function (params) {
  212.     //     // 准备重新渲染扇形所需的参数
  213.     //     let isSelected;
  214.     //     let isHovered;
  215.     //     let startRatio;
  216.     //     let endRatio;
  217.     //     let k;
  218.     //     let i;
  219.  
  220.     //     // 如果触发 mouseover 的扇形当前已高亮，则不做操作
  221.     //     if (hoveredIndex === params.seriesIndex) {
  222.     //         return;
  223.     //         // 否则进行高亮及必要的取消高亮操作
  224.     //     } else {
  225.     //         // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
  226.     //         if (hoveredIndex !== '') {
  227.     //             // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
  228.     //             isSelected = option.series[hoveredIndex].pieStatus.selected;
  229.     //             isHovered = false;
  230.     //             startRatio = option.series[hoveredIndex].pieData.startRatio;
  231.     //             endRatio = option.series[hoveredIndex].pieData.endRatio;
  232.     //             k = option.series[hoveredIndex].pieStatus.k;
  233.     //             i = option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 1 : 1;
  234.     //             // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
  235.     //             option.series[hoveredIndex].parametricEquation = getParametricEquation(
  236.     //                 startRatio,
  237.     //                 endRatio,
  238.     //                 isSelected,
  239.     //                 isHovered,
  240.     //                 k,
  241.     //                 i
  242.     //             );
  243.     //             option.series[hoveredIndex].pieStatus.hovered = isHovered;
  244.  
  245.     //             // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
  246.     //             hoveredIndex = '';
  247.     //         }
  248.  
  249.     //         // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
  250.     //         if (params.seriesName !== 'mouseoutSeries') {
  251.     //             // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
  252.     //             isSelected = option.series[params.seriesIndex].pieStatus.selected;
  253.     //             isHovered = true;
  254.     //             startRatio = option.series[params.seriesIndex].pieData.startRatio;
  255.     //             endRatio = option.series[params.seriesIndex].pieData.endRatio;
  256.     //             k = option.series[params.seriesIndex].pieStatus.k;
  257.  
  258.     //             // 对当前点击的扇形，执行高亮操作（对 option 更新）
  259.     //             option.series[params.seriesIndex].parametricEquation = getParametricEquation(
  260.     //                 startRatio,
  261.     //                 endRatio,
  262.     //                 isSelected,
  263.     //                 isHovered,
  264.     //                 k,
  265.     //                 option.series[params.seriesIndex].pieData.value + 5
  266.     //             );
  267.     //             option.series[params.seriesIndex].pieStatus.hovered = isHovered;
  268.  
  269.     //             // 记录上次高亮的扇形对应的系列号 seriesIndex
  270.     //             hoveredIndex = params.seriesIndex;
  271.     //         }
  272.  
  273.     //         // 使用更新后的 option，渲染图表
  274.     //         myChart.setOption(option);
  275.     //     }
  276.     // });
  277.     // // 修正取消高亮失败的 bug
  278.     myChart.on('globalout', function () {
  279.         if (hoveredIndex !== '') {
  280.             // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
  281.             isSelected = option.series[hoveredIndex].pieStatus.selected;
  282.             isHovered = false;
  283.             k = option.series[hoveredIndex].pieStatus.k;
  284.             startRatio = option.series[hoveredIndex].pieData.startRatio;
  285.             endRatio = option.series[hoveredIndex].pieData.endRatio;
  286.             // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
  287.             i = option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 35 : 10;
  288.             option.series[hoveredIndex].parametricEquation = getParametricEquation(
  289.                 startRatio,
  290.                 endRatio,
  291.                 isSelected,
  292.                 isHovered,
  293.                 k,
  294.                 i
  295.             );
  296.             option.series[hoveredIndex].pieStatus.hovered = isHovered;
  297.  
  298.             // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
  299.             hoveredIndex = '';
  300.         }
  301.  
  302.         // 使用更新后的 option，渲染图表
  303.         myChart.setOption(option);
  304.     });
  305.     myChart.setOption(option);

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/105404
推荐阅读

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