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

用echarts实现3d饼图_echarts 3d饼图

作者：小蓝xlanll | 2024-02-18 05:46:16

赞

踩

echarts 3d饼图

安装echarts和echarts-gl

npm install echarts

npm install echarts-gl

echarts版本5.x的话需要对应echarts-gl版本2.x

echarts版本4.x的话需要对应echarts-gl版本1.x

指定版本命令 npm install echarts-gl@1.1.2

1.关键函数，生成扇形的曲面参数方程，用于 series-surface

Documentation - Apache ECharts官网series-surface介绍 Documentation - Apache ECharts

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（默认值 1/3）

    k = 1;

    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）

    const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;

    const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

    // 计算高亮效果的放大比例（未高亮，则比例为 1）

    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: 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) * h * 0.1;

            }

            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;

        },

    };

  }

2.构建饼图函数，绘制3d图。internalDiameterRatio为透明的空心占比，0就是普通饼1就镂空

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;

    // 为每一个饼图数据，生成一个 series-surface 配置

    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: false,

                k: k,

            },

            itemStyle:{}

        };

        if (typeof pieData[i].itemStyle !== 'undefined') {

            const itemStyle :any= {};

            if (typeof pieData[i].itemStyle.color !== 'undefined') {

                itemStyle.color = pieData[i].itemStyle.color;

            }

            if (typeof pieData[i].itemStyle.opacity !== 'undefined') {

                itemStyle.opacity = pieData[i].itemStyle.opacity;

            }

            seriesItem.itemStyle = itemStyle;

        }

        series.push(seriesItem);

    }

    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，

    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。

    for (let i = 0; i < series.length; i += 1) {

        endValue = startValue + series[i].pieData.value;

        series[i].pieData.startRatio = startValue / sumValue;

        series[i].pieData.endRatio = endValue / sumValue;

        console.log(series[i].pieData.startRatio,

            series[i].pieData.endRatio,

            false,  

            false,

            k,

            series[i].pieData.value)

            series[i].parametricEquation = this.getParametricEquation(

            series[i].pieData.startRatio,

            series[i].pieData.endRatio,

            false,

            false,

            k,

            25//高度

        );

        startValue = endValue;

        legendData.push(series[i].name);

    }

    return series;

  }

3.绘制2d饼图，添加label指引线

series.push({

      name: 'pie2d',

      type: 'pie',

      label: {

          opacity: 1,

          fontSize: 14,

          lineHeight: 20,

      },

      labelLine: {

          length: 50,

          length2: 50,

      },

      startAngle: -50, //起始角度，支持范围[0, 360]。

      clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式

      radius: ['20%', '50%'],

      center: ['50%', '50%'],

      data: optionsData,

      itemStyle: {

          opacity: 0,

      },

    });

js代码：

  1.   setPie(){
  2.     const optionsData = [
  3.       {      
  4.           name: 'aa',
  5.           value: 20,
  6.           itemStyle: {
  7.               color: '#38ACEC',
  8.               // opacity: 1,
  9.           },
  10.       },
  11.       {
  12.         name: 'bb',
  13.         value: 15,
  14.         itemStyle: {
  15.             color: '#6960EC',
  16.             // opacity: 1,
  17.         },
  18.       },
  19.       {
  20.           name: 'cc',
  21.           value: 25,
  22.           itemStyle: {
  23.               color: '#6CBB3C',
  24.               // opacity: 1,
  25.           },
  26.       },
  27.     ];
  28.     const series = this.getPie3D(optionsData, 0.5,);
  29.     series.push({
  30.       name: 'pie2d',
  31.       type: 'pie',
  32.       label: {
  33.           opacity: 1,
  34.           fontSize: 14,
  35.           lineHeight: 20,
  36.       },
  37.       labelLine: {
  38.           length: 50,
  39.           length2: 50,
  40.       },
  41.       startAngle: -50, //起始角度，支持范围[0, 360]。
  42.       clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
  43.       radius: ['20%', '50%'],
  44.       center: ['50%', '50%'],
  45.       data: optionsData,
  46.       itemStyle: {
  47.           opacity: 0,
  48.       },
  49.     });
  50.  
  51.     this.option1 = 
  52.     {
  53.       legend: {
  54.           tooltip: {
  55.               show: true,
  56.           },
  57.           data: ['aa', 'bb', 'cc'],
  58.           right: '2%',
  59.           textStyle: {
  60.               color: '#fff',
  61.               fontSize: 12,
  62.           },
  63.       },
  64.       tooltip: {
  65.           formatter: (params) => {
  66.               if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
  67.                   let bfb = (
  68.                       (this.option.series[params.seriesIndex].pieData.endRatio -
  69.                           this.option.series[params.seriesIndex].pieData.startRatio) *
  70.                       100
  71.                   ).toFixed(2);
  72.                   return (
  73.                       `${params.seriesName}<br/>` +
  74.                       `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>` +
  75.                       `${bfb}%`
  76.                   );
  77.               }
  78.           },
  79.       },
  80.       title: {
  81.           text: '3D 饼图',
  82.           x: 'center',
  83.           top: '5%',
  84.           textStyle: {
  85.               color: '#fff',
  86.               fontSize: 22,
  87.           },
  88.       },
  89.       labelLine: {
  90.           show: true,
  91.           lineStyle: {
  92.               color: '#7BC0CB',
  93.           },
  94.       },
  95.       label: {
  96.           show: true,
  97.           position: 'outside',
  98.           formatter: '{b} \n{c} {d}%',
  99.       },
  100.       xAxis3D: {
  101.           min: -1,
  102.           max: 1,
  103.       },
  104.       yAxis3D: {
  105.           min: -1,
  106.           max: 1,
  107.       },
  108.       zAxis3D: {
  109.           min: -1,
  110.           max: 1,
  111.       },
  112.       grid3D: {
  113.           show: false,
  114.           boxHeight: 25, // 三维笛卡尔坐标系在三维场景中的高度
  115.           viewControl: {
  116.               alpha: 45,
  117.               // beta: 1000,
  118.               distance: 300, //调整视角到主体的距离，类似调整zoom
  119.               // rotateSensitivity: 0, // 设置为0无法旋转
  120.               zoomSensitivity: 0, // 设置为0无法缩放
  121.               panSensitivity: 0, // 设置为0无法平移
  122.               autoRotate: false, // 自动旋转
  123.           },
  124.       },
  125.       series: series,
  126.     };
  127.   }
  128.    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
  129.   getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
  130.     // 计算
  131.     const midRatio = (startRatio + endRatio) / 2;
  132.     const startRadian = startRatio * Math.PI * 2;
  133.     const endRadian = endRatio * Math.PI * 2;
  134.     const midRadian = midRatio * Math.PI * 2;
  135.     // 如果只有一个扇形，则不实现选中效果。
  136.     if (startRatio === 0 && endRatio === 1) {
  137.         isSelected = false;
  138.     }
  139.     // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  140.     k = 1;
  141.     // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  142.     const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  143.     const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  144.     // 计算高亮效果的放大比例（未高亮，则比例为 1）
  145.     const hoverRate = isHovered ? 1.05 : 1;
  146.     // 返回曲面参数方程
  147.     return {
  148.         u: {
  149.             min: -Math.PI,
  150.             max: Math.PI * 3,
  151.             step: Math.PI / 32,
  152.         },
  153.         v: {
  154.             min: 0,
  155.             max: Math.PI * 2,
  156.             step: Math.PI / 20,
  157.         },
  158.         x: function (u, v) {
  159.             if (u < startRadian) {
  160.                 return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  161.             }
  162.             if (u > endRadian) {
  163.                 return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  164.             }
  165.             return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
  166.         },
  167.         y: function (u, v) {
  168.             if (u < startRadian) {
  169.                 return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  170.             }
  171.             if (u > endRadian) {
  172.                 return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  173.             }
  174.             return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
  175.         },
  176.         z: function (u, v) {
  177.             if (u < -Math.PI * 0.5) {
  178.                 return Math.sin(u);
  179.             }
  180.             if (u > Math.PI * 2.5) {
  181.                 return Math.sin(u) * h * 0.1;
  182.             }
  183.             return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
  184.         },
  185.     };
  186.   }
  187.   //构建饼图数据,绘制3d图  internalDiameterRatio:透明的空心占比
  188.   getPie3D(pieData, internalDiameterRatio) {
  189.     const series = [];
  190.     let sumValue = 0;
  191.     let startValue = 0;
  192.     let endValue = 0;
  193.     const legendData = [];
  194.     const k =
  195.         typeof internalDiameterRatio !== 'undefined'
  196.             ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
  197.             : 1 / 3;
  198.     // 为每一个饼图数据，生成一个 series-surface 配置
  199.     for (let i = 0; i < pieData.length; i += 1) {
  200.         sumValue += pieData[i].value;
  201.         const seriesItem = {
  202.             name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
  203.             type: 'surface',
  204.             parametric: true,
  205.             wireframe: {
  206.                 show: false,
  207.             },
  208.             pieData: pieData[i],
  209.             pieStatus: {
  210.                 selected: false,
  211.                 hovered: false,
  212.                 k: k,
  213.             },
  214.             itemStyle:{}
  215.         };
  216.         if (typeof pieData[i].itemStyle !== 'undefined') {
  217.             const itemStyle :any= {};
  218.             if (typeof pieData[i].itemStyle.color !== 'undefined') {
  219.                 itemStyle.color = pieData[i].itemStyle.color;
  220.             }
  221.             if (typeof pieData[i].itemStyle.opacity !== 'undefined') {
  222.                 itemStyle.opacity = pieData[i].itemStyle.opacity;
  223.             }
  224.             seriesItem.itemStyle = itemStyle;
  225.         }
  226.         series.push(seriesItem);
  227.     }
  228.     // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  229.     // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  230.     for (let i = 0; i < series.length; i += 1) {
  231.         endValue = startValue + series[i].pieData.value;
  232.         series[i].pieData.startRatio = startValue / sumValue;
  233.         series[i].pieData.endRatio = endValue / sumValue;
  234.         console.log(series[i].pieData.startRatio,
  235.             series[i].pieData.endRatio,
  236.             false,  
  237.             false,
  238.             k,
  239.             series[i].pieData.value)
  240.             series[i].parametricEquation = this.getParametricEquation(
  241.             series[i].pieData.startRatio,
  242.             series[i].pieData.endRatio,
  243.             false,
  244.             false,
  245.             k,
  246.             25//高度
  247.         );
  248.         startValue = endValue;
  249.         legendData.push(series[i].name);
  250.     }
  251.     return series;
  252.   }

html代码：

<div  id="option" echarts [options]="option1"  style="width:100%;height:100%"></div>

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

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