Echarts使用平面方法绘制三维立体柱状图表

目录

一、准备工作

1.下载引入ECharts库

2.创建容器

二、绘制基本柱状

三、绘制立体柱状方法一

1.定义立方体形状

2.注册立方体形状

3.配置custom系列

4.设置数据

5.渲染图表

四、绘制立体柱状方法二

1.画前知识

2.计算坐标renderItem 函数

（1）type: "custom"

（2）renderItem 函数

（3）坐标转换

（4）自定义图形

（5）多边形polygon

（6）绘制点形成图形

一、准备工作

1.下载引入ECharts库

npm install echarts

import * as echarts from "echarts";

2.创建容器

在HTML中创建一个用于容纳图表的容器，例如一个div元素。

<div id="barchart"></div>

二、绘制基本柱状

绘制基本柱状图，样式修改成想要的。

xAxis 对象定义了 X 轴的配置，包括轴标签（axisLabel）、轴线（axisLine）、轴刻度（axisTick）等。这里设置了标签颜色、标签旋转角度、轴线颜色，并隐藏了轴刻度。

yAxis 对象定义了 Y 轴的配置，与 X 轴类似，包括轴标签、轴线、轴刻度以及分割线（splitLine）的配置。

直接上代码：

mounted() {this.getbarchart();
},  
 getbarchart() {let barchartDom = document.getElementById("barchart");this.barchart = echarts.init(barchartDom);let option = {color: ["#3398DB"],xAxis: {data: ["两卡人员","前科人员","地方摸排","机场拦截","边境拦截","限制出境","缅北人员"],axisLabel: {color: "#8CBAEE",rotate: -60},axisLine: {lineStyle: {color: "#8CBAEE"}},axisTick: {show: false}},yAxis: {axisLabel: {color: "#8CBAEE"},axisLine: {lineStyle: {color: "#8CBAEE"}},axisTick: {show: false},splitLine: {lineStyle: {color: "#0B0842"}}},// 基础柱状图series: [{type: 'bar',// type: 'custom',barWidth: "30%",data: [120, 100, 199, 311, 400, 238, 140],itemStyle: {// 设置渐变色color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: '#387BFE' },{ offset: 1, color: '#7CB1FD' }])},},]};option && this.barchart.setOption(option);},

三、绘制立体柱状方法一

使用echarts.graphic.extendShape|registerShape大概步骤如下：

1.定义立方体形状

使用echarts.graphic.extendShape方法来定义一个新的立方体形状。在这个方法中，传入一个对象，该对象包含shape属性和buildPath方法。shape属性用于定义立方体的形状属性（如坐标、大小等），而buildPath方法则用于定义绘制立方体路径的逻辑。

2.注册立方体形状

使用echarts.graphic.registerShape方法来注册你定义的立方体形状，就可以在custom系列中使用这个形状了。

3.配置custom系列

在ECharts的配置项中，添加一个custom系列的配置。在renderItem函数中，你可以使用你注册的立方体形状来绘制每个数据项对应的立方体。

4.设置数据

为custom系列设置数据，每个数据项将对应一个立方体。

5.渲染图表

调用ECharts实例的setOption方法来应用配置，并渲染图表。

我觉得这位大大写的很nice，可参考博客：03-echarts如何画立体柱状图_echarts立体柱状图-CSDN博客

四、绘制立体柱状方法二

自定义type: "custom"及多边形polygon

1.画前知识

可查看博客第二部分：03-echarts如何画立体柱状图_echarts立体柱状图-CSDN博客

2.计算坐标renderItem 函数

（1）type: "custom"

因为我们要自定义形状，所以用type: 'bar'已不合适，用custom自定义系列

（2）renderItem 函数

renderItem 是一个函数，它接收两个参数：params 和 api。

params: 通常包含当前渲染的数据项的信息，但在自定义系列中，它的使用可能不频繁。

api: 提供了一系列的方法和属性，用于访问当前数据点的信息、坐标转换、绘制图形等。

（3）坐标转换

使用api.coord方法将当前数据点的数值坐标转换为屏幕坐标

api.value(0)通常是X轴的值

api.value(1)是Y轴的值

api.coord([api.value(0), 0])[1]; 获取Y轴为0时的屏幕坐标（即X轴上的点），用于绘制图形的底部。

（4）自定义图形

返回一个对象，指定了要渲染的图形类型type: "group"和子元素children。type: "group": 表示这是一个图形组，可以包含多个子图形。children: 是一个数组，包含了要渲染的子图形多边形polygon。

（5）多边形polygon

type: "polygon": 指定这是一个多边形。

shape: 定义了多边形的形状，通过points数组给出多边形的顶点坐标。顶点坐标是通过之前计算的屏幕坐标加减一些偏移量来确定的。

style: 定义了多边形的样式。fill: 使用线性渐变填充多边形。new echarts.graphic.LinearGradient(...)创建了一个线性渐变对象，指定了渐变的方向、起始颜色和结束颜色。

（6）绘制点形成图形

左侧：

左上点: [基础X轴坐标点-侧面宽度，顶部Y轴坐标点-斜角高度]

左下点：[基础X轴坐标点-侧面宽度，底部Y轴坐标点]

右下点：[基础X轴坐标点，底部Y轴坐标点]

右下点：[基础X轴坐标点，顶部Y轴坐标点]

右侧：

左上点: [基础X轴坐标点，顶部Y轴坐标点]

左下点：[基础X轴坐标点，底部Y轴坐标点]

右下点：[基础X轴坐标点 +侧面宽度 ，底部Y轴坐标点]

右下点：[基础X轴坐标点 +侧面宽度，顶部Y轴坐标点 - 斜角高度]

顶部菱形：

中下点: [基础X轴坐标点，顶部Y轴坐标点]

右点：[基础X轴坐标点+侧面宽度，顶部Y轴坐标点- 斜角高度]

中上点：[基础X轴坐标点 ，顶部Y轴坐标点- 斜角高度*2]

左点：[基础X轴坐标点 -侧面宽度，顶部Y轴坐标点 - 斜角高度]

完成代码如下：

        getbarchart() {let barchartDom = document.getElementById("barchart");this.barchart = echarts.init(barchartDom);let option = {color: ["#3398DB"],xAxis: {data: ["两卡人员","前科人员","地方摸排","机场拦截","边境拦截","缅北人员"],axisLabel: {color: "#8CBAEE",rotate: -60},axisLine: {lineStyle: {color: "#8CBAEE"}},axisTick: {show: false}},yAxis: {axisLabel: {color: "#8CBAEE"},axisLine: {lineStyle: {color: "#8CBAEE"}},axisTick: {show: false},splitLine: {lineStyle: {color: "#0B0842"}}},// 立方体柱状series: [{type: "custom",data: [120, 24, 90, 311, 400, 238, 100],renderItem: (params, api) => {const basicsCoord = api.coord([api.value(0), api.value(1)]);const topBasicsYAxis = basicsCoord[1];const basicsXAxis = basicsCoord[0];const bottomYAxis = api.coord([api.value(0), 0])[1];return {type: "group",children: [// 左侧{type: "polygon",shape: { points: [[basicsXAxis-10, topBasicsYAxis-4], [basicsXAxis-10, bottomYAxis], [basicsXAxis, bottomYAxis], [basicsXAxis, topBasicsYAxis]]},style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#387BFE' },{ offset: 1, color: '#7CB1FD' }])}},// 右侧{type: "polygon",shape: {points: [[basicsXAxis, topBasicsYAxis],[basicsXAxis, bottomYAxis],[basicsXAxis+10, bottomYAxis],[basicsXAxis+10, topBasicsYAxis-4]]},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#387BFE' },{ offset: 1, color: '#7CB1FD' }])}},// 顶部{type: "polygon",shape: {points: [[basicsXAxis, topBasicsYAxis],[basicsXAxis-10, topBasicsYAxis - 4],[basicsXAxis, topBasicsYAxis - 8],[basicsXAxis+10, topBasicsYAxis - 4]]},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#387BFE' },{ offset: 1, color: '#7CB1FD' }])}}]};}}]};option && this.barchart.setOption(option);},

若文章对你有帮助，点个赞吧！

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

考研信息查询系统｜Java｜SSM｜VUE｜ 前后端分离

考研信息查询系统｜Java｜SSM｜VUE｜ 前后端分离

【重要1⃣️】前后端源码万字文档部署文档 【包含内容】 【一】项目提供非常完整的源码注释 【二】相关技术栈文档 【三】源码讲解视频 【其它服务】 【一】可以提供远程部署安装&#xff0c;包扩环境 【二】提供软件相关的安装包 【…
阅读更多...
[高阶数据结构八] B+树和索引原理深度解析

[高阶数据结构八] B+树和索引原理深度解析

1.前言 B树并不常用,就是因为有B树的存在. MySQL的索引底层其实就是使用了B树,但是B树和索引都是在了解了B树之后才深度学习的&#xff0c;如果你对于B树海一无所知的话&#xff0c;请阅读下面这篇文章。 [高阶数据结构三] B-树详解_b-树csdn-CSDN博客 本章重点&#xff1a; …
阅读更多...
Gitee配置以及如何将本地项目提交到远程仓库

Gitee配置以及如何将本地项目提交到远程仓库

文章目录 准备远程仓库配置注册新建仓库 配置git 生成ssh&#xff0c;输入以下命令&#xff0c;然后连敲三次回车键配置公钥本地代码上传 准备 1.本地下载git 2.注册远程仓库账号 远程仓库配置 注册 官网&#xff1a;https://gitee.com 完成注册 新建仓库 头像->设置-…
阅读更多...
圣桥ERP queryForString.dwr SQL注入漏洞复现

圣桥ERP queryForString.dwr SQL注入漏洞复现

0x01 产品描述： 杭州圣乔科技有限公司主要研发全套工业企业ERP系列软件产品，现在公司已经形成ERP 软件、OA办公管理、等四大系列二十小类软件产品。致力于为政府、教育、医疗卫生、文化事业、公共事业（电、水、气等）、交通、住建、应急、金融、电信运营商、企业等用户提供专…
阅读更多...
基于MFC框架用C++做一个记账本

基于MFC框架用C++做一个记账本

目录 一、前言 二、主要功能和技术点 1.主要功能 2.主要技术点 三、准备工作 1.SQLite数据库操作工具 2.SqLiteCpp第三方库 3.安装office导入Excel需要的接口 3.1具体步骤 四、主界面 1.自定义窗口背景 1.1消息映射 1.2选择背景图片 1.3绘制背景 1.4静态控件透明…
阅读更多...
qemu搭建aarch64

qemu搭建aarch64

qemu工具搭建aarch64系统 下载准备 下载qemu: https://qemu.weilnetz.de/w64/2022/qemu-w64-setup-20220831.exe 下载固件&#xff1a;https://publishing-ie-linaro-org.s3.amazonaws.com/releases/components/kernel/uefi-linaro/16.02/release/qemu64/QEMU_EFI.fd?Signat…
阅读更多...
Zookeeper3.6.3集群安装

Zookeeper3.6.3集群安装

Zookeeper3.6.3三节点集群安装 为保证集群高可用&#xff0c;Zookeeper 集群的节点数最好是奇数&#xff0c;最少有三个节点&#xff0c;所以这里搭建一个三个节点的集群。(在一个节点模拟三节点&#xff0c;真实的三节点把ip替换一下即可&#xff0c;按照hadoop案件把网络打通…
阅读更多...
下一代 RAG 技术来了！微软正式开源 GraphRAG

下一代 RAG 技术来了！微软正式开源 GraphRAG

省流总结 优点&#xff1a;检索准确度高 缺点&#xff1a;单个19w字构建用时4分30s、gpt4 token花费12美元 概述 7 月 2 日&#xff0c;微软开源了 GraphRAG&#xff0c;一种基于图的检索增强生成 (RAG) 方法&#xff0c;可以对私有或以前未见过的数据集进行问答。在 GitHub…
阅读更多...
MySQL索引（四）：字符串索引

MySQL索引（四）：字符串索引

前缀索引 MySQL是支持前缀索引的&#xff0c; 也就是说&#xff0c; 你可以定义字符串的一部分作为索引。 默认地&#xff0c;如果你创建索引的语句不指定前缀长度&#xff0c; 那么索引就会包含整个字符串。 使用前缀索引的优缺点&#xff1a; 1&#xff09;优点&#xff1a…
阅读更多...
获取剪切板的图片 -＞ File -＞ Base64 -＞ Blob -＞ url -＞ Image，以及它们之间的各种相互转换

获取剪切板的图片 -＞ File -＞ Base64 -＞ Blob -＞ url -＞ Image，以及它们之间的各种相互转换

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 一、获取剪切板的图片&#xff08;拿到 File 对象&#xff09; js粘贴事件paste简单解析及遇到的坑 - 云社区 - 腾讯云 (tencent.com) document.addEventListener(paste, f…
阅读更多...
实战八：模拟京东购物流程

实战八：模拟京东购物流程

问题描述&#xff1a; 从键盘录入5个商品信息&#xff08;1001手机&#xff09;添加到商品列表中&#xff0c;展示商品信息,提示用户选择商品&#xff0c;用户选中的商品添加到购物车中&#xff08;购物车中的商品要逆序)&#xff0c;用户选中的商品不存在需要有相应提示&#…
阅读更多...
Selenium安装WebDriver最新Chrome驱动(含116/117/118/119)

Selenium安装WebDriver最新Chrome驱动(含116/117/118/119)

目录 1、确认浏览器的版本 2、找到对应的chromedriver版本 3、解压chromedriver文件&#xff0c;放置chrome的安装目录下 4、设置系统属性 5、确认chromedriver是否安装成功及解决方式 1、确认浏览器的版本 在浏览器的地址栏&#xff0c;输入chrome://version/&#x…
阅读更多...
攻防世界cat-题解

攻防世界cat-题解

1.打开题目很想是一个命令执行&#xff0c;但是使用命令之心的语句&#xff0c;无法执行命令&#xff0c;看了wp&#xff0c;是在命令执行的时候&#xff1b;被编码了&#xff0c;我们把url%80使它溢出&#xff0c;把显示出来的代码下载到本地分析 分析代码我们可以知道这个是一…
阅读更多...
SSM框架

SSM框架

目录 一. Maven入门和进阶 1.Maven简介和快速入门 (1) Maven介绍 (2) Maven的主要作用理解 ①场景概念 ②依赖管理 ③构建管理 (3)Maven安装和配置 ①软件安装 ②环境变量 ③命令测试 ④配置文件&#xff1a; ⑤idea配置本地maven 2.基于IDEA的Maven工程创建 (1…
阅读更多...
AI 名人堂：李飞飞

AI 名人堂：李飞飞

Fei-Fei Li&#xff08;李飞飞&#xff09;&#xff0c;斯坦福大学计算机科学系教授&#xff0c;斯坦福人工智能实验室前主任&#xff0c;以其在人工智能领域的开创性工作而闻名。 人工智能教育的倡导者 计算机视觉领域的领军人物 ImageNet的创造者 2AGI.NET AI 教程 2025最…
阅读更多...
基于JavaScript实现的操作系统页面置换算法程序

基于JavaScript实现的操作系统页面置换算法程序

基于JavaScript的操作系统页面置换算法程序 1. 实验目的 页面置换算法是虚拟存储管理实现的关键&#xff0c;通过本次实验理解内存页面调度的机制&#xff0c;在模拟实现FIFO、LRU等页面置换算法的基础上&#xff0c;比较它们的效率及优缺点&#xff0c;从而了解虚拟存储实现…
阅读更多...
JAVA-初始JAVA模块化开发

JAVA-初始JAVA模块化开发

菜鸟为了巩固所写 目录 菜鸟为了巩固所写 一、概述 二、创建步骤 1、打开Intellij IDEA,创建一个名为MyJavaModuleApp的Java项目。 2、向示例项目中添加”模块描述符“文件 3、创建多模块的IntelliJ 项目 4、IntelliJ项目添加“新模块”对话框 解释1&#xff1a;模块声…
阅读更多...
Java 中tableaw 实战教程

Java 中tableaw 实战教程

java中tableaw库通过简单的API实现过滤、连接、绘制和操作表格数据。支持CSV&#xff0c;数据库&#xff0c;Excel等数据源。 安装依赖 tableaw是用于分析表格数据的开源Java库&#xff0c;构建在Java 8流之上。它可以从GitHub下载&#xff0c;也可以作为Maven或Gradle项目的…
阅读更多...
力扣206. 反转链表题解

力扣206. 反转链表题解

文章目录 题目描述&#xff1a;试析&#xff1a;1.迭代法2.递归法3.双指针法4.数组法 力扣206. 反转链表 题目描述&#xff1a; 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] …
阅读更多...
Jdk21引入jsoup运行报错：java.lang.NoClassDefFoundError

Jdk21引入jsoup运行报错：java.lang.NoClassDefFoundError

文章目录 背景抽象类中代码问题分析尝试最终解决 背景 在富文本编译内容中&#xff0c;有些文件是存储到阿里云 oss 中的&#xff0c;所以链接做 STS 临时访问有时效性&#xff0c;每次返回的时候&#xff0c;需要通过STS来签名替换掉其中的链接访问&#xff0c;所以用到 jsoup…
阅读更多...
最新文章

Copyright @ 2022~2023