echarts-gl 3D柱状图配置

 1. 源码

 此demo可以直接在echarts的编辑器中运行

option = {title: {text: '产量图',textStyle: {color: 'rgba(255, 255, 255, 1)',fontSize: 17},left: 'center'},tooltip: {},legend: {show: false,orient: 'vertical',x: 'left',top: 0,right: 20,textStyle: {fontSize: 12}},visualMap: {show: false,max: 1,inRange: {color: 'rgba(290, 206, 118, 1)' // 控制柱体颜色}},xAxis3D: {type: 'category',name: false,show: true,data: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun',],axisLine: {lineStyle: {color: '#fff'}},axisTick: {show: false,alignWithLabel: true},axisLabel: {interval: 0,margin: 12, // 标签与轴的距离textStyle: {color: '#fff',fontSize: 16}},splitLine: {show: false}},yAxis3D: {type: 'category',name: false,axisLabel: {show: false},axisLine: {lineStyle: {color: '#fff'}},axisTick: {show: false},splitArea: {show: true,areaStyle: {color: '#fff'}}},zAxis3D: {name: false,axisTick: {show: false},axisLine: {lineStyle: {color: '#fff'}},axisLabel: {margin: 12,textStyle: {color: '#fff',fontSize: 16}},splitLine: {show: false}},grid3D: {left: 0,top: 0,right: 20,bottom: 0,boxDepth: 8, // 深度,即y方向的长度containLabel: true,viewControl: {distance: 181, // 视距,用于柱状图控制大小,默认值200rotateSensitivity: 0, // 禁止鼠标旋转zoomSensitivity: 0, // 禁止鼠标缩放alpha: 20, // 视角绕 x 轴,即上下旋转的角度beta: 28 // 视角绕 z 轴,即左右旋转的角度}},series: [{name: '产量',data: [[0, 0, 20],[1, 0, 30],[2, 0, 18],[3, 0, 55],[4, 0, 35],[5, 0, 23],[6, 0, 15],],type: 'bar3D',barSize: 7, // 柱子的宽度shading: 'lambert', // 设置光照效果// bevelSmoothness: 100, // 柱子倒角的光滑度,圆柱相关设置// bevelSize: 0.8, // 柱子的倒角尺寸,设置为0更接近圆柱label: {show: true,distance: 2,textStyle: {fontSize: 14,color: '#fff',fontWeight: 300}}}]
};

 2. 效果图

3. 注意

  1. 使用3D柱状图需要引入echarts,和echarts-gl两个依赖。
  2. 三维柱状图区别于二维柱状图,无法直接设置宽度,可以通过设置视距来控制柱状图大小(grid3D.viewControl.distance),视距越大,则显示的越小。
  3. 二维柱状图的Y轴,在三维柱状图中叫Z轴,X轴不变;三维图中的Y轴类似于深度,设置grid3D.boxDepth可以控制深度。
  4. X轴刻度标签名称过长,导致显示重叠时,可以通过配置grid3D.viewControl.beta 旋转角度,以及xAxis3D.axisLabel.interval如果设置为 1,表示『隔一个标签显示一个标签』)控制坐标轴刻度标签的显示间隔来解决。注:三维柱状图不支持二维柱状图中的旋转刻度标签的方式。
  5. 想让柱体显示上趋近于圆柱体,可以放开上面demo中的两行注释
    // bevelSmoothness: 100, // 柱子倒角的光滑度,圆柱相关设置
    // bevelSize: 0.8, // 柱子的倒角尺寸,设置为0更接近圆柱

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/469408.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c语言数据结构与算法--简单实现栈和队列的出栈与入栈

(一)栈的基本概念 栈(Stack)是限定仅在表尾进行插入和删除操作的线性表,如铁路调度。如下 图: (二)栈的的表现形式 栈有两种表示形式:栈的表示和实现、栈的 链式表示。 1.栈的表示…

人工智能(AI)和机器学习(ML)技术学习流程

目录 人工智能(AI)和机器学习(ML)技术 自然语言处理(NLP): Word2Vec: Seq2Seq(Sequence-to-Sequence): Transformer: 范式、架构和自注意力: 多头注意力: 预训练、微调、提示工程和模型压缩: 上下文学习、思维链、全量微调、量化、剪枝: 思维树、思维…

C++初阶——vector

一、什么是vector vector是表示可变大小的数组的序列容器,就像数组一样,vector也采用连续空间来存储元素。也就是说它的访问和数组一样高效,但是它的大小是动态可变的,并且它的大小会被容器自动处理。 二、vector的构造 常用的构…

移远通信亮相骁龙AI PC生态科技日,以领先的5G及Wi-Fi产品革新PC用户体验

PC作为人们学习、办公、娱乐的重要工具,已经深度融入我们的工作和生活。随着物联网技术的快速发展,以及人们对PC性能要求的逐步提高,AI PC成为了行业发展的重要趋势。 11月7-8日,骁龙AI PC生态科技日在深圳举办。作为高通骁龙的重…

AIGC专栏17——EasyAnimate V5版本详解 应用MMDIT结构,拓展模型规模到12B 支持不同控制输入的控制模型

AIGC专栏17——EasyAnimate V5版本详解 应用MMDIT结构,拓展模型规模到12B 支持不同控制输入的控制模型 学习前言相关地址汇总源码下载地址HF测试链接 测试效果Image to VideoText to Video EasyAnimate详解技术储备Diffusion Transformer (DiT)Stable Diffusion 3Co…

Android Studio | 最新版本配置要求高,JDK运行环境不适配,导致无法启动App

Android Studio 的最新版本配置要求比较高,这时候需要降低插件的版本,才能正常启动项目 build.gradle 文件的 dependencies 部分中,使用 libs 作为一些常用库的别名。这些别名在项目的 gradle.properties 文件或者某个特定的 versions.prope…

ssm093基于Java Web的毕业生就业状况管理系统设计与实现+jsp(论文+源码)_kaic

毕 业 设 计(论 文) 题目:毕业生就业状况管理系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本毕业生就业…

el-dialog 设置 水平垂直居中 高度不固定

小记一下: 希望实现不管内容高度多少 el-dialog都能水平垂直居中 效果: css: .form-view-dialog{display: flex;align-items: center;justify-content: center;.el-dialog{margin: 0 auto; }.el-dialog__body{max-height: 75vh; // 可选择 设置一个最…

当AI遇上时尚:未来的衣橱会由机器人来打理吗?

内容概要 在当今这个快速发展的时代,人工智能与时尚的结合正在逐渐改写我们对衣橱管理的认知。传统的衣橱管理常常面临着空间不足、穿搭单调及库存过多等挑战,许多人在挑选服饰时难以做出决策。然而,随着技术的进步,智能推荐和自…

Ubuntu 20.04安装CUDA 11.0、cuDNN 8.0.5

不知道咋弄的ubuntu20.04电脑的cuda驱动丢了,无奈需装PyTorch环境,只有CUDA11.0以上版本才支持Ubuntu20.04,所以安装了CUDA11.0、cuDNN8.0.5 为防止频繁在浏览器检索对应的贴子,今天记录一下。 一. 驱动安装 为防止驱动安装后没…

高德地图通过经纬度查找位置和轨迹回放

1、完整代码自己高德申请key,其他文章有写的 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title><…

C++常用的特性-->day05

友元的拓展语法 声明一个类为另外一个类的友元时&#xff0c;不再需要使用class关键字&#xff0c;并且还可以使用类的别名&#xff08;使用 typedef 或者 using 定义&#xff09;。 #include <iostream> using namespace std;// 类声明 class Tom; // 定义别名 using …

使用docker形式部署jumpserver

文章目录 前言一、背景二、使用步骤1.基础环境准备2.拉取镜像3.进行部署4.备份记录启动命令 前言 记录一下使用docker形式部署jumpserver服务的 一、背景 搭建一个jumpserver的堡垒机&#xff0c;但是发现之前是二进制文件部署的&#xff0c;会在物理机上部署污染环境&#x…

产品经理如何使用项目管理软件推进复杂项目按时上线

前言 相信很多产品同学或多或少都有过这样的经历&#xff1a;平时没有听到任何项目延期风险&#xff0c;但到了计划时间却迟迟无法提测……评审时没有任何argue&#xff0c;提测后发现开发的功能不是自己想要的……费劲九牛二虎之力终于让项目上线了&#xff0c;然而发现成果达…

贪心算法-汽车加油

这道题目描述了一个汽车旅行场景&#xff0c;需要设计一个有效的算法来决定在哪几个加油站停车加油&#xff0c;以便最小化加油次数。题目给出了汽车加满油后的行驶距离n公里&#xff0c;以及沿途若干个加油站的位置。我们需要找出一个方案&#xff0c;使得汽车能够完成整个旅程…

【大数据学习 | HBASE】hbase的读数据流程与hbase读取数据

1. hbase的读数据流程 在解析读取流程之前我们还需要知道两个功能性的组件和HFIle的格式信息 HFILE 存储在hdfs中的hbase文件&#xff0c;这个文件中会存在hbase中的数据以kv类型显示&#xff0c;同时还会存在hbase的元数据信息&#xff0c;包括整个hfile文件的索引大小&…

2024AAAI | DiffRAW: 利用扩散模型从手机RAW图生成单反相机质量的RGB图像

文章标题&#xff1a;《DiffRAW: Leveraging Diffusion Model to Generate DSLR-Comparable Perceptual Quality sRGB from Smartphone RAW Images》 原文链接&#xff1a;DiffRAW 本文是清华大学深圳研究院联合华为发表在AAAI-2024上的论文&#xff08;小声bb&#xff1a;华…

【Linux系统编程】第四十五弹---线程互斥:从问题到解决,深入探索互斥量的原理与实现

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、线程互斥 1.1、见一见多线程访问问题 1.2、解决多线程访问问题 1.2.1、互斥量的接口 1.2.2、互斥量接口的使用 1.2.3、…

【GVN】AWZ算法

AWZ算法的例子依旧来自于RKS的这篇文章《Detecting Equalities of Variables: Combining Efficiency with Precision》。 上面两个图&#xff0c;进行的是如下图所示的循环结构的等价类计算。 为什么得到的结果不是上图而是下图呢&#xff1f;这里其实是因为用到的AWZ的算法…

HBuilder使用虚拟机

按文档的连接一直不成功 没找到Simulator&#xff0c;原来是因为我电脑之前没安装过虚拟机版本 安装模拟器Simulator | uni-app官网 找到settings,左下角安装需要的对应版本的虚拟机就好了&#xff0c;然后重启hb