echarts 3d柱状图(bar3D)默认缩放大小

关键代码:

projection: 'perspective',

distance: 400

        grid3D: {
            boxWidth: 400,
            boxDepth: 160,
            viewControl: {
              projection: 'perspective', // 先设置为这个perspective
              distance: 400              //默认缩放比例
            },
            light: {
                main: {
                    intensity: 1.2,
                    shadow: true
                },
                ambient: {
                    intensity: 0.3
                }
            }
        },

官方GL配置连接:https://echarts.apache.org/zh/option-gl.html#grid3D.viewControl.distance

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts 是一个由百度开发的数据可视化库,它提供了丰富而强大的图表功能,包括 3D 柱状图。要绘制一个 ECharts 3D 柱状图,你可以按照以下步骤进行操作: 1. 首先,确保你已经引入了 ECharts 库。你可以在 HTML 文件中使用以下代码来引入 ECharts: ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> ``` 2. 创建一个具有指定宽度和高度的 DOM 元素,用于容纳图表。例如: ```html <div id="chart" style="width: 600px; height: 400px;"></div> ``` 3. 使用 JavaScript 代码初始化并配置图表。以下是一个简单的示例: ```javascript // 获取容器元素 var chartContainer = document.getElementById('chart'); // 初始化图表 var chart = echarts.init(chartContainer); // 配置项 var options = { grid3D: {}, // 开启 3D 网格 xAxis3D: {}, // x 轴配置 yAxis3D: {}, // y 轴配置 zAxis3D: {}, // z 轴配置 series: [{ type: 'bar3D', // 使用 3D 柱状图类型 data: [[0, 0, 0, 1]], // 数据数组,每个数据项格式为 [x, y, z, value] shading: 'lambert', // 光照渲染模式 label: { show: true, // 显示柱状图上的标签 textStyle: { fontSize: 16, // 标签字体大小 } }, itemStyle: { opacity: 0.8, // 柱状图透明度 color: '#ff0000' // 柱状图颜色 } }] }; // 使用配置项生成图表 chart.setOption(options); ``` 这是一个简单的示例,你可以根据你的需求进行进一步的配置和样式调整。通过修改 `data` 数组中的数据,你可以绘制更多的柱状图

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值