echarts bar3D画出圆角立方体模拟建筑

于 2024-11-12 14:17:02 发布
阅读量464 收藏 3
点赞数 4
文章标签： echarts 3d 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45234177/article/details/143712592
版权

结果展示

在这里插入图片描述

重点

 bar3D中圆角属性：
 		roundCap: true  //开启圆角（echarts官方文档中没有）
        bevelSize: .6   //圆角程度
        barSize: 12.5   //立方体大小

半球形使用 surface 类型,曲线方程如下

			parametricEquation: {
                  u: {
                      min: 0,
                      max: Math.PI,
                      step: Math.PI / 20
                  },
                  v: {
                      min: 0,
                      max: Math.PI,
                      step: Math.PI / 20
                  },
                  x: function (u, v) {
                      return that.locaX/2 * Math.sin(v) * Math.cos(u) + that.locaX/2;
                  },
                  y: function (u, v) {
                      return that.locaY/2 * Math.cos(v) + that.locaY/2;
                  },
                  z: function (u, v) {
                      return that.locaZ * Math.sin(v) * Math.sin(u);
                  }
              }

完整代码

body

<div id="chartDom"></div>

script

initChart() {
      const that = this
      var chartDom = document.getElementById("chartDom");
      this.chart = echarts.init(chartDom, "dark");

      let option = {
        xAxis3D: {
          name: "x", //x轴显示为x
          type: "value",
          min: 0,
          max: this.locaX,
          axisTick: {
            show: true, //显示每个值对应的刻度
          },
          axisLabel: {
            show: true, // 是否显示刻度(刻度上的数字，或者类目)， false为隐藏，true为显示
            distance: 0
          },
          itemStyle: {
            borderColor: "#e7e7e7",
            backgroundColor: "#e7e7e7",
          },
        },
        yAxis3D: {
          name: "y", //y轴显示为y
          type: "value",
          splitNumber: 5,
          axisTick: {
            show: true, //显示每个值对应的刻度
          },
          min: 0,
          max: this.locaY,
          axisLabel:{
            show: true, // 是否显示刻度(刻度上的数字，或者类目)， false为隐藏，true为显示
            distance: 0
          },
        },
        zAxis3D: {
          name: "z", //z轴显示为z
          type: "value",
          min: -12.5/50*this.locaZ,
          // min: 0,
          max: this.locaZ,
          axisTick: {
            show: false, //显示每个值对应的刻度
          },
        },
        grid3D: {
          axisLine: {
            lineStyle: {
              //坐标轴样式
              color: "#070707", //轴线颜色
              opacity: 0.8, //(单个刻度不会受影响)
              width: 1, //线条宽度
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#f56c6c", //坐标轴指示线
              width: 2,
            },
            show: true, //展示坐标轴指示线
          },
          viewControl: {
            // autoRotate: true,//旋转展示
            projection: "perspective",
            // beta:0,
            distance: 200, //与视角的距离，值越大，图离视角越远，图越小
            alpha: 15, //绕x轴旋转的角度（上下旋转），增大，视角顺时针增大（向上）
            beta: 120, //绕y轴旋转的角度（左右旋转），增大，视角逆时针增大（向右）
            center: [-15, -5, -10], //第一个参数：增大，视角沿x轴正方向水平右移动（图向左）；第二个参数：增大，视角沿y轴正方向垂直向上移动（图向下）；第三个参数：增大，视角向z轴正方向移动（图变小）
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#8f8f8f",
            },
          },
          boxWidth: 120,
          boxHeight: 70,
          boxDepth: -120,
          top: -100,
        },
        series: [
          {
            // 外壳
              type: 'surface',
              parametric: true,
              shading: 'lambert',
              silent: true,
              wireframe: {
                  show: false
              },
              itemStyle: {
                  color: '#fff',
                  opacity: 0.3
              },
              parametricEquation: {
                  u: {
                      min: 0,
                      max: Math.PI,
                      step: Math.PI / 20
                  },
                  v: {
                      min: 0,
                      max: Math.PI,
                      step: Math.PI / 20
                  },
                  x: function (u, v) {
                      return 10/2 * Math.sin(v) * Math.cos(u) + 10/2;
                  },
                  y: function (u, v) {
                      return 10/2 * Math.cos(v) + 10/2;
                  },
                  z: function (u, v) {
                      return 50 * Math.sin(v) * Math.sin(u);
                  }
              }
          },
          {
            // 1
            type: 'bar3D',
            data: [[ 15700 / 55400 * 10, 36200 / 55400 * 10, 16.5 / 50 * 10]],
            shape: 'cube',
            // 圆角
            roundCap: true,
            bevelSize: .6,
            barSize: 10,
            depth: 1,
            barGap: '-100%',
            shading: 'lambert',
            silent: true,
            label: {
                show: true,
                formatter: function (param) {
                    return '1';
                },
                position: 'insideTop',
                textStyle:{
                  color: '#000',
                  fontSize: 13
                }
            },
            itemStyle: {
              color: '#8c92b9',
              opacity: 0.9
            }
          },
          {
            // 2
            type: 'bar3D',
            data: [[ 14700 / 55400 * 10, 30000 / 55400 * 10, 22.5]],
            shape: 'cube',
            // 圆角
            roundCap: true,
            bevelSize: .6,
            barSize: 10,
            depth: 1,
            barGap: '-100%',
            shading: 'lambert',
            silent: true,
            label: {
                show: true,
                formatter: function (param) {
                    return '2';
                },
                position: 'insideTop',
                textStyle:{
                  color: '#000',
                  fontSize: 13
                }
            },
            itemStyle: {
              color: '#8c92b9',
              opacity: 0.9
            }
          },
          
          {
            // 3
            type: 'bar3D',
            data: [[ 15700 / 55400 * 10, 20700 / 55400 * 10, 22.5]],
            shape: 'cube',
            // 圆角
            roundCap: true,
            bevelSize: .6,
            barSize: 19,
            depth: 1,
            barGap: '-100%',
            shading: 'lambert',
            silent: true,
            label: {
                show: true,
                formatter: function (param) {
                    return '3';
                },
                position: 'insideTop',
                textStyle:{
                  color: '#000',
                  fontSize: 13
                }
            },
            itemStyle: {
              color: '#8c92b9',
              opacity: 0.9
            }
          },
          {
            // 4
            type: 'bar3D',
            data: [[5, 5, -8.8],[5, 5, 4.8]],
            shape: 'cube',
            // 圆角
            roundCap: true,
            bevelSize: 0.2,
            barSize: 25,
            shading: 'lambert',
            silent: true,
            label: {
                show: true,
                formatter: function (param) {
                    return '4';
                },
                position: 'insideTop',
                textStyle:{
                  color: '#000',
                  fontSize: 13
                }
            },
            itemStyle: {
              color: '#c9c9c9',
              opacity: 0.9
            }
          },
          {
            // 5
            type: 'bar3D',
            data: [[ 26700 / 55400 * 10, 14700 / 55400 * 10, 16.5]],
            shape: 'cube',
            // 圆角
            roundCap: true,
            bevelSize: .6,
            barSize: 12.5,
            depth: 1,
            barGap: '-100%',
            shading: 'lambert',
            silent: true,
            label: {
                show: true,
                formatter: function (param) {
                    return '5';
                },
                position: 'insideTop',
                textStyle:{
                  color: '#000',
                  fontSize: 13
                }
            },
            itemStyle: {
              color: '#8c92b9',
              opacity: 0.9
            }
          },
          {
            // 6
            type: 'bar3D',
            data: [[ 33700 / 55400 * 10, 15700 / 55400 * 10, 22.5]],
            shape: 'cube',
            // 圆角
            roundCap: true,
            bevelSize: .6,
            barSize: 12.5,
            depth: 1,
            shading: 'lambert',
            silent: true,
            label: {
                show: true,
                formatter: function (param) {
                    return '6';
                },
                position: 'insideTop',
                textStyle:{
                  color: '#000',
                  fontSize: 13
                }
            },
            itemStyle: {
              color: '#8c92b9',
              opacity: 0.9
            }
          },
          {
            // 7
            type: 'bar3D',
            data: [[ 35700 / 55400 * 10, 42700 / 55400 * 10, 22.5]],
            shape: 'cube',
            // 圆角
            roundCap: true,
            bevelSize: .6,
            barSize: 12.5,
            depth: 1,
            shading: 'lambert',
            silent: true,
            label: {
                show: true,
                formatter: function (param) {
                    return '7';
                },
                position: 'insideTop',
                textStyle:{
                  color: '#000',
                  fontSize: 13
                }
            },
            itemStyle: {
              color: '#8c92b9',
              opacity: 0.9
            }
          },
          {
            // 8
            type: 'bar3D',
            data: [[ 39700 / 55400 * 10, 33700 / 55400 * 10, 16.5]],
            shape: 'cube',
            // 圆角
            roundCap: true,
            bevelSize: .6,
            barSize: 12.5,
            depth: 1,
            shading: 'lambert',
            silent: true,
            label: {
                show: true,
                formatter: function (param) {
                    return '8';
                },
                position: 'insideTop',
                textStyle:{
                  color: '#000',
                  fontSize: 13
                }
            },
            itemStyle: {
              color: '#8c92b9',
              opacity: 0.9
            }
          },
          {
            // 平面
              type: 'surface',
              parametric: false,
              silent: true,
              wireframe: {
                  show: false
              },
              itemStyle: {
                  color: '#fff',
                  opacity: .3
              },
              data: [
                [0,0,0],[10,0,0],[0,10,0],[10,10,0]
              ]
          },
        ],
        backgroundColor: "#235d7e",
      };
      option && this.chart.setOption(option);
      window.addEventListener("resize", () => {
        this.chart.resize();
      });
    }
ECharts之类型3D(map，bar3D,scatter3D)
01-22 3518
ECharts之类型3D(3D地图) 相关js源码下载： 1.世界地图.js，中国地图.js，中国各省份地图.js 地址：https://github.com/ecomfe/echarts/tree/master/map/js 2.echarts基础报表js源文件（echarts.min.js） 地址：https://github.com/ecomfe/echarts/tree...
echarts 3.8.5 含 bar3d控件
01-02
echarts 3.8.5 含 bar3d控件,官方只发布到3.8.4，我从官网例子里抠出的3.8.5的包
116Echarts - 热力图（Heatmap on Cartesian）
阿甘兄
05-05 3342
效果图 源代码 app.title = '笛卡尔坐标系上的热力图'; var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a','10a','11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p'...
239Echarts - 3D 柱状图（Stacked Bar3D）
阿甘兄
05-06 2279
效果图 源代码 $.getScript('vendors/simplex.js').done(function () { function generateData() { var data = []; var noise = new SimplexNoise(Math.random); for (var i = 0; i <= 10; i++) { ...
234Echarts - 3D 柱状图（Bar3D - Simplex Noise）
阿甘兄
05-06 1601
效果图 源代码 $.getScript('vendors/simplex.js').done(function () { var noise = new SimplexNoise(Math.random); function generateData(theta, min, max) { var data = []; for (var i = 0; i <= 50; i...
229Echarts - 3D 柱状图（Bar3D - Global Population）
阿甘兄
05-06 1076
效果图 源代码 $.getJSON('data-gl/asset/data/population.json', function (data) { data = data.filter(function (dataItem) { return dataItem[2] > 0; }).map(function (dataItem) { re...
echarts 3d柱状图(bar3D)默认缩放大小
梁诗傑的博客
05-23 3376
关键代码： projection:'perspective', distance:400 grid3D: { boxWidth: 400, boxDepth: 160, viewControl: { projection: 'perspective', // 先设置为这个perspective distance: 400 /..
前端笔记-StackedBar3D的初步修改（添加legend等）
IT1995的博客
08-14 5715
目录 为什么会有这个笔记 官方实例 修改后的实例 为什么会有这个笔记 因为官方实例感觉有点不全，缺少tilte和一系列的东西，在此补全下，并且全部简单处理，在此记录下，方便以后查阅。 官方实例 运行截图如下 代码如下： $.getScript('vendors/simplex.js').done(function () { function gener...
Echarts实现3D柱状图
qq_45787691的博客
04-22 2029
echarts实现3D柱状图。
echarts实现3d柱状效果
weixin_59017683的博客
07-19 1182
代码如下，单个的调第一个方法，多个柱状的调第二个方法，具体情况修改参数或者二次开发即可。
echarts实现3D饼图
Xiang_Gong_Ya_的博客
04-02 4766
一定先要下载扩展插件 下载： npm i echarts-gl import "echarts-gl"; echarts1() { const myChart = this.$echarts.init(document.getElementById("echarts1")); // data数据 var data = [ { name: "本科", value: 40, number: .
pyecharts图表库学习:Bar（柱状图/条形图）、Bar3D（3D 柱状图）
热门推荐
错位的梦寐的博客
11-17 1万+
柱状/条形图，通过柱形的高度/条形的宽度来表现数据的大小。 Bar.add() 方法签名 add(name, x_axis, y_axis, is_stack=False, bar_category_gap='20%', **kwargs) name -> str 图例名称 x_axis -> list x 坐标轴数据 y_axis -> list y 坐标...
echarts 设置3D柱状图
JunJiu0420的博客
12-10 1765
<!DOCTYPE html> <html> <head> <title>电</title> <meta charset="utf-8" /> <style> ::-webkit-scrollbar { display: none; } @font-face { font-family: SketchRockwell; .
echarts实现平面3D柱状图
qq_40011214的博客
02-15 2318
参考文档https://www.jb51.net/article/221784.htm 注意实现版本 代码如下 <!-- 3D柱状图 --> <template> <div id="bar" style="width:800px;height:800px"></div> </template> <script> import * as echarts from 'echarts/core'; import { L..
使用 ECharts 构建定制化的3D条形图
最新发布
Cwuji_wusi的博客
10-29 920
为了构建这个图表，示例代码首先定义了customData{ name: '数据1', value: [0, 0, 10], itemStyle: { color: '#25b8d2' } },{ name: '数据2', value: [0, 4, 78], itemStyle: { color: '#00e086' } },...接着，通过双层循环结构生成了一个10x10的网格数据结构，这个结构通过寻找customData中的项来决定每个单位是否使用自定义的zx < 6;
Echarts-实现3D柱状图显示，并单个柱子变色
随心所欲的便笺
11-24 1531
实现3D柱状图显示，并单个柱子变色
Echarts自定义样式实现3D柱状图-长方体-圆柱体，两种样式
徊忆羽菲
12-18 2444
Echarts自定义样式实现3D柱状图-长方体-圆柱体，两种样式
Pyecharts教程(五)：使用pyecharts绘制3D柱状图——Bar3D基本示例
安静到无声
08-27 1034
通过本文，我们学习了如何使用pyecharts库中的Bar3D类创建一个简单的3D柱状图。我们还了解了如何准备数据、设置图表选项以及将图表渲染为HTML文件。希望本文能帮助您更好地理解和使用pyecharts库。
echarts bar3d
10-22
在ECharts中，`bar3d`图表示三维柱状图，可以用于展示数据的立体效果，比如销售数据、产品分布等。使用条形图的三维版本，你可以设置每个条形的高度、宽度和深度，并可以调整视角和光照效果，以提供更直观的数据呈现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

格格不入ち

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值