node版本不兼容 2023-09-22 15:37 采纳率: 100%
浏览 15
已结题

前端的3d饼图不知道用啥框架做的

有人知道这个用啥做的吗，hecharts，还是antv之类的

img


hecharts只有这样的图

img

提供代码或者图片，可以加酬金

  • 写回答

15条回答 默认 最新

  • 2301_79941442 2023-09-24 12:07
    关注

    用hecharts吧，我做了一个类似的，你加个圆圈，倾斜一下角度应该就可以了。

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 月亮与山与草 2023-09-22 15:44
    关注

    用百度的echarts啊

    评论
  • IT工程师_二师兄 2023-09-22 15:52
    关注

    就是个饼图呀，很多方法

    评论
  • 音药 2023-09-22 15:53
    关注

    https://www.zhihu.com/pin/1543364090487320577?utm_id=0
    是不是要这种呀

    评论
  • 急速光粒 2023-09-22 15:53
    关注

    有前端代码吗？可以看一下前端代码就能看出来用什么框架写的。

    评论
  • Leodong. 2023-09-22 16:06
    关注

    echarts

    评论
  • honestman_ 2023-09-22 16:09
    关注
    
var myChart = echarts.init(document.getElementById('main'));  
  
var option = {  
    series: [  
        {  
            name: '访问来源',  
            type: 'pie',  
            radius: '50%',  
            data: [  
                {value: 1048, name: '搜索引擎'},  
                {value: 735, name: '直接访问'},  
                {value: 580, name: '邮件营销'},  
                {value: 484, name: '联盟广告'},  
                {value: 300, name: '视频广告'}  
            ],  
            label: {  
                show: true,  
                formatter: function(params) {  
                    if (params.value !== 0) {  
                        return params.name + ': ' + params.value;  
                    }  
                }  
            },  
            labelLine: {  
                show: false  
            },  
            padding: [20, 30, 20, 30] // 设置标签与扇区的距离  
        }  
    ]  
};  
  
myChart.setOption(option);
    评论
  • 发狂精灵 2023-09-22 16:43
    关注

    img


    有示例你可以参考一下
    echarts图表集 ECharts图表集,EChartsDemo集,echarts gallery,Make A Pie,分享你的可视化作品isqqw.com https://www.isqqw.com/viewer?id=36969

    评论
  • 数据大魔王 2023-09-22 18:46
    关注

    使用 Three.js 创建简单的3D饼图

    <!DOCTYPE html>
<html>
<head>
    <title>3D Pie Chart with Three.js</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
    <!-- 引入 Three.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    
    <script>
        // 创建场景
        var scene = new THREE.Scene();

        // 创建相机
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

        // 创建渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 创建3D饼图的几何体
        var geometry = new THREE.PieGeometry(1, 1, 0, Math.PI * 2, 0, Math.PI * 2);
        var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

        var pieChart = new THREE.Mesh(geometry, material);
        scene.add(pieChart);

        // 渲染循环
        var animate = function () {
            requestAnimationFrame(animate);

            // 旋转3D饼图
            pieChart.rotation.x += 0.005;
            pieChart.rotation.y += 0.005;

            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>
</html>
    评论
  • 呈两面包夹芝士 2023-09-22 20:00
    关注

    highcharts可以实现

    img

     getChart(echartData) {
      let _width = parseInt($('#jclxChart').width());
      let _pieWidth = (_width * 40) / 100;

      var each = Highcharts.each,
        round = Math.round,
        cos = Math.cos,
        sin = Math.sin,
        deg2rad = Math.deg2rad;
      Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function (proceed) {
        proceed.apply(this, [].slice.call(arguments, 1));
        // Do not do this if the chart is not 3D
        if (!this.chart.is3d()) {
          return;
        }
        var series = this,
          chart = series.chart,
          options = chart.options,
          seriesOptions = series.options,
          depth = seriesOptions.depth || 0,
          options3d = options.chart.options3d,
          alpha = options3d.alpha,
          beta = options3d.beta,
          z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
        z += depth / 2;
        if (seriesOptions.grouping !== false) {
          z = 0;
        }
        each(series.data, function (point) {
          var shapeArgs = point.shapeArgs,
            angle;
          point.shapeType = 'arc3d';
          var ran = point.options.h;
          shapeArgs.z = z;
          shapeArgs.depth = depth * 0.75 + ran;
          shapeArgs.alpha = alpha;
          shapeArgs.beta = beta;
          shapeArgs.center = series.center;
          shapeArgs.ran = ran;
          angle = (shapeArgs.end + shapeArgs.start) / 2;
          point.slicedTranslation = {
            translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
            translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
          };
        });
      });
      (function (H) {
        H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function (proceed) {
          // Run original proceed method
          var ret = proceed.apply(this, [].slice.call(arguments, 1));
          ret.zTop = (ret.zOut + 0.5) / 100;
          return ret;
        });
      })(Highcharts);
      let highOption = {
        lang: {
          noData: '暂无数据' // 这是会显示在页面上的问题。默认样式是垂直居中
        },
        noData: {
          // 下面写的是有默认值的数据，详情见官网
          attr: {}, //Object,没有数据标签的 SVG 属性集合
          position: {
            x: 0,
            y: 0,
            align: 'center',
            verticalAlign: 'middle'
          },
          style: {
            fontSize: '14px',
            fontWeight: 'bold',
            color: '#fff'
          },
          useHTML: false
        },
        chart: {
          animation: false,
          backgroundColor: 'none',
          type: 'pie', //饼图
          // plotBackgroundImage: highchartBg,
          options3d: {
            enabled: true, //使用3d功能
            alpha: 65, //延y轴向内的倾斜角度
            beta: 0
          },
          events: {
            load: function () {
              var each = Highcharts.each,
                points = this.series[0].points;
              each(points, function (p, i) {
                p.graphic.attr({
                  translateY: -p.shapeArgs.ran
                });
                p.graphic.side1.attr({
                  translateY: -p.shapeArgs.ran
                });
                p.graphic.side2.attr({
                  translateY: -p.shapeArgs.ran
                });
              });
            }
          }
        },
        legend: {
          enabled: false,
          useHTML: true,
          labelFormatter: function () {
            return '<div style="width: 60px;display: inline-block;font-size: 12px">' + this.name + '</div><div style="width: 35px;font-size: 12px">' + this.bfb + '%</div>';
          },
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'middle',
          itemMarginTop: 5,
          itemStyle: {
            color: '#fff',
            fontSize: 12
          },
          itemHoverStyle: {
            color: '#fff'
          }
        },
        title: {
          text: ''
        },
        colors: ['#00d7e9', '#00a8ff', 'rgb(19,220,182)'],
        plotOptions: {
          pie: {
            size: _pieWidth,
            innerSize: 0,
            depth: 5,
            startAngle: 90,
            dataLabels: {
              useHTML: true,
              enabled: true, //是否显示饼图的线形tip
              distance: 3,
              padding: 0,
              borderColor: '#007acc',
              align: 'center',
              // verticalAlign: 'top',
              position: 'right',
              color: '#ffffff',
              style: {
                textOutline: 'none',
                fontSize: 12
              },
              formatter: function () {

                return '<div style="width: auto;">' + '<div style="width: auto;font-size: 12px;color:#7dedff">' + this.key + "<div style='margin-left:10px'>" + this.y + '亩</div>' + "<div style='margin-left:10px'>" + this.percentage.toFixed(2) + '%</div>' + '</div></div>';
              }
            },
            showInLegend: true,
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            enableMouseTracking: false,
            opacity: 1,
            point: {
              events: {
                legendItemClick: function (e) {
                  return false; // 直接 return false 即可禁用图例点击事件（实现点击图例后，不能再默认地显示隐藏当前图例在图表里的对应数据）
                }
              }
            }
          }
        },
        credits: {
          enabled: false // 禁用版权信息
        },
        series: [
          {
            type: 'pie',
            name: '申报状态',
            borderWidth: 0,
            data: echartData
          }
        ]
      };
      Highcharts.chart('jclxChart', highOption);
    }
    评论
  • 朱友斌 2023-09-22 21:06
    关注

    看下百度的ECharts。

    评论
  • 小明说Java 2023-09-22 23:11
    关注

    可以用ECharts生成啊，ECharts 是一个使用 JavaScript 开发的，开源的可视化库，它可以生成多种图形，包括 3D 饼图。

    评论
  • 心梓知识 2023-09-23 01:40
    关注

    结合GPT给出回答如下请题主参考
    针对您的需求，我给出以下建议：

    1. 如果您需要在前端实现3D饼图，可以考虑使用Three.js这个JavaScript库来实现。Three.js是一个基于WebGL的JavaScript 3D图形库，可以用来创建和渲染各种类型的3D场景，包括3D饼图。

    以下是一个简单的Three.js 3D饼图案例：

    代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Three.js Pie Chart</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
   <script>
      // Set up the scene, camera, and renderer
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      // Create the pie chart data
      const pieData = [
         { value: 30, color: 0xff0000 },
         { value: 20, color: 0x00ff00 },
         { value: 50, color: 0x0000ff },
      ];

      // Create the pie chart
      let startAngle = 0;
      const center = new THREE.Vector3(0, 0, 0);
      const radius = 5;
      for (let i = 0; i < pieData.length; i++) {
         const segment = createPieSegment(center, radius, startAngle, startAngle + pieData[i].value * Math.PI / 50, pieData[i].color);
         scene.add(segment);
         startAngle += pieData[i].value * Math.PI / 50;
      }

      // Create a single pie chart segment
      function createPieSegment(center, radius, startAngle, endAngle, color) {
         const geometry = new THREE.ShapeGeometry(createPieShape(radius, startAngle, endAngle));
         const material = new THREE.MeshBasicMaterial( { color: color } );
         const mesh = new THREE.Mesh( geometry, material );
         mesh.position.copy(center);
         mesh.rotation.x = Math.PI / 2;
         return mesh;
      }

      // Create a single pie chart segment shape
      function createPieShape(radius, startAngle, endAngle) {
         const shape = new THREE.Shape();
         shape.moveTo(0, 0);
         shape.arc(0, 0, radius, startAngle, endAngle);
         shape.lineTo(0, 0);
         return shape;
      }

      // Set up the camera position
      camera.position.z = 10;

      // Render the scene
      function animate() {
         requestAnimationFrame( animate );
         renderer.render( scene, camera );
      }
      animate();
   </script>
</body>
</html>
    1. 如果您希望使用图表库来创建3D饼图，可以考虑使用ECharts或AntV G2。这两个图表库都支持3D效果，可以满足您的需求。

    以下是一个ECharts 3D饼图案例：

    代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>ECharts 3D Pie Chart</title>
   <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
   <div id="chart" style="width: 600px; height: 400px;"></div>
   <script>
      // Initialize the chart
      const chart = echarts.init(document.getElementById('chart'));

      // Set the chart options
      const options = {
         tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
         },
         series: [
            {
               type: 'pie',
               data: [
                  { value: 30, name: 'Red' },
                  { value: 20, name: 'Green' },
                  { value: 50, name: 'Blue' },
               ],
               label: {
                  show: true,
                  position: 'outside',
                  formatter: '{b}: {d}%'
               },
               itemStyle: {
                  emphasis: {
                     shadowBlur: 10,
                     shadowOffsetX: 0,
                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                  normal: {
                     opacity: 0.7,
                     width: 10,
                     height: 10,
                     shadowBlur: 10,
                     shadowOffsetX: 0,
                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
               },
               animationType: 'scale',
               animationEasing: 'elasticOut',
               animationDelay: function(idx) {
                  return Math.random() * 200;
               },
            }
         ]
      };

      // Render the chart
      chart.setOption(options);
   </script>
</body>
</html>

    以上两个案例都可以满足您的需求，具体选择哪种方式取决于您的具体需求和技能水平。

    评论
  • ATWLee 2023-09-23 06:44
    关注

    【分享个轮播的3D饼图，分别用Echarts和HighCharts实现 - CSDN App】http://t.csdn.cn/ZUeZU

    评论
  • 专家-赤兔[在线] 2023-09-22 15:49
    关注

    引用 皆我百晓生 小程序回应内容作答：
    有许多技术可以实现前端的3D饼图。以下是国内常用的一些技术和框架：

    1. Three.js：Three.js作为一个流行的JavaScript 3D图形库，在国内也非常常见。它具有强大的渲染能力和丰富的图形效果选项。

    2. echarts-gl：echarts-gl是国内著名的数据可视化库 echarts 的扩展，专注于3D图形和地理信息可视化。它可以用来创建各种类型的3D图表，包括饼图。

    3. LayaAir：LayaAir是国内知名的HTML5游戏引擎，也用于其他图形应用程序。它提供了完整的2D和3D渲染能力，适用于创建各种类型的3D图形，包括饼图。

    4. AntV：AntV是蚂蚁金服推出的数据可视化解决方案之一，提供了一整套可视化组件和工具。G2Plot 是 AntV 的一个图表库，支持诸多图表类型，包括3D饼图。

    以上这些技术和框架，能够帮助您实现前端的3D饼图。根据您的具体需求和技术偏好，选择适合的技术，并查阅其官方文档和示例代码来学习如何创建3D饼图。

    评论
查看更多回答(14条)

报告相同问题？

问题事件

  • 系统已结题 10月2日
  • 已采纳回答 9月24日
  • 修改了问题 9月22日
  • 赞助了问题酬金15元 9月22日
  • 展开全部

悬赏问题

  • ¥15 深海控制器DSE7320MKII和博世ECU间can通讯知识
  • ¥15 Ru的复折射率用于FDTD 200nm到1200nm
  • ¥15 使用Fiddler抓包，textview的乱码如何解决
  • ¥50 trio连接驱动器报错
  • ¥15 有谁懂nhanes的权重计算啊
  • ¥15 欧姆龙PLC 电机控制 限位
  • ¥30 如何处理shell命令接收到的视频流并实时播放出来
  • ¥15 虚心请教C#的代码优化问题
  • ¥15 有偿求做台风过境全过程模拟仿真
  • ¥50 求！AutomationDesk 如何自动导入Variant数据