vue3之echarts3D圆柱
vue3之echarts3D圆柱
效果:

版本
"echarts": "^5.1.2"
核心代码:
<template><div ref="charts" class="charts"></div><svg><linearGradient id="labColor" x1="0" y1="0" x2="0" y2="1"><stop offset="21%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#7FFFFF"></stop></linearGradient></svg>
</template><script lang="ts" setup>
import { reactive, onMounted, ref, onBeforeUnmount } from 'vue';
import * as echarts from "echarts";const data: any = reactive({"list": [104,86,210,135,72,180,180],"xAxis": ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
});
const charts = ref(null);
let myechart: any = null;
let timer: any = null;// 圆柱宽度
const barWidth = 40;const initChart = () => {if (charts.value && !myechart) {myechart = echarts.init(charts.value, '', { renderer: 'svg' });}const option = {tooltip: {show: false},xAxis: [{data: data.xAxis,axisTick: {show: false,},axisLine: {show: false,},axisLabel: {interval: 0,textStyle: {fontSize: 20,color: "#ffffff",fontFamily: "OPPOSans-R",},margin: 38, //刻度标签与轴线之间的距离。},}, {type: "category",axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},splitArea: {show: false,},splitLine: {show: false,},data: data.xAxis,}],yAxis: {splitLine: {show: false,},axisTick: {show: false,},axisLine: {show: false,},axisLabel: {show: false,},},grid: {left: "5%",right: "5%",bottom: "0%",top: '10%',containLabel: true,},series: [{name: '顶部渐变文字',type: 'pictorialBar',symbol: 'rect',symbolRepeat: false,symbolSize: [0, 0],symbolOffset: [0, -10],z: 200,symbolPosition: 'end',data: data.list.map((item: any) => {return {value: item,label: {show: true,position: 'top',formatter: (item: any) => {return `${item.value}次`;},fontSize: 24,fontFamily: 'OPPOSans',// 使用svg渐变颜色color: 'url(#labColor)',},};}),},{name: "顶部圆形",type: "pictorialBar",symbolSize: [barWidth, 15],symbolOffset: [0, -5],symbolPosition: 'end',z: 12,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(28, 135, 175, 0)",},{offset: 1,color: "rgba(28, 135, 175, 1)",},])}},data: data.list,},{name: "顶部圆环",type: "pictorialBar",symbolSize: [barWidth, 15],symbolOffset: [0, -5],symbolPosition: 'end',z: 100,itemStyle: {normal: {color: "transparent",borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(100, 207, 246, 0)",},{offset: 1,color: "rgba(100, 207, 246, 1)",},]),borderWidth: 1,},},data: data.list,},{name: "底部最小圆形",type: "pictorialBar",symbolSize: [barWidth, 15],symbolOffset: [0, 5],z: 12,itemStyle: {normal: {color: 'rgba(56, 132, 160, 1)',},},data: data.list,},{name: "底部最小圆环",type: "pictorialBar",symbolSize: [barWidth, 15],symbolOffset: [0, 5],z: 13,itemStyle: {normal: {color: "transparent",borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(15, 97, 127, 0)",},{offset: 1,color: "rgba(56, 132, 160, 1)",},]),borderWidth: 1,},},data: data.list,},{name: "底部第二层圆形",type: "pictorialBar",symbolSize: [barWidth + (barWidth / 2), 20],symbolOffset: [0, 12],z: 1,itemStyle: {normal: {color: "#3884A0",opacity: 0.45},},data: data.list,},{name: "底部最外层圆形",type: "pictorialBar",symbolSize: [barWidth * 2, 30],symbolOffset: [0, 20],z: 0,itemStyle: {normal: {color: "#3884A0",opacity: 0.2},},data: data.list,},{type: "bar",name: "最外层柱状渐变",itemStyle: {color: "transparent",borderWidth: 1,borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(96, 199, 237, 0)",},{offset: 1,color: "#3884A0",},]),},silent: true,barWidth,barGap: "-100%",data: data.list,},{type: "bar",name: "大的柱状图",z: 0,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(15, 97, 127, 0)",},{offset: 1,color: "rgba(15, 97, 127, 1)",},]),},},silent: true,barWidth,barGap: "-100%",data: data.list,},{type: "bar",z: 100,name: "小的柱状图",xAxisIndex: 1,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(15, 97, 127, 0)",},{offset: 0.85,color: "rgba(15, 97, 127, 1)",},{offset: 1,color: 'rgba(56, 132, 160, 1)'}]),opacity: 0.5,},},silent: true,barWidth: 10,barGap: "-100%",data: data.list.map((item: any) => item - item * 0.1),},],};myechart.setOption(option);
};onMounted(() => {initChart();
});onBeforeUnmount(() => {if (timer) {clearInterval(timer);timer = null;}if (myechart) {myechart.clear();myechart.dispose();myechart = null;}
});
</script>
<style scoped lang="scss">
.charts {width: 777px;height: 478px;background: url(@/assets/img/overview/coal-bg.png) no-repeat center bottom;
}
</style>相关文章:
vue3之echarts3D圆柱
vue3之echarts3D圆柱 效果: 版本 "echarts": "^5.1.2" 核心代码: <template><div ref"charts" class"charts"></div><svg><linearGradient id"labColor" x1"0&q…...
Redux中间件redux-thunk和redux-saga的具体区别是什么?
Redux 中间件是增强 Redux 功能的重要工具,redux-thunk 和 redux-saga 是两个常用的中间件,它们在处理异步操作和副作用时提供了不同的方式和理念。以下是两者的具体区别: 1. 概念与设计理念 redux-thunk 简洁:redux-thunk 是一…...
代码随想录算法训练营第四十三天| 动态规划06
322. 零钱兑换 如果求组合数就是外层for循环遍历物品,内层for遍历背包。 如果求排列数就是外层for遍历背包,内层for循环遍历物品。 这句话结合本题 大家要好好理解。 视频讲解:动态规划之完全背包,装满背包最少的物品件数是多少&…...
UI自动化教程 —— 元素定位技巧:精确找到你需要的页面元素
引言 在UI自动化测试中,准确地定位页面元素是至关重要的。无论是点击按钮、填写表单还是验证页面内容,都需要首先找到相应的页面元素。Playwright 提供了多种方法来实现这一点,包括使用CSS选择器和XPath进行元素定位,以及利用文本…...
MySQL六大日志的功能介绍。
前言 首先,MySQL的日志应该包括二进制日志(Binary Log)、错误日志(Error Log)、查询日志(General Query Log)、慢查询日志(Slow Query Log)、重做日志(Redo …...
二级指针略解【C语言】
以int** a为例 1.二级指针的声明 a 是一个指向 int*(指向整型的指针)的指针,即二级指针。 通俗的讲,a是一个指向指针的指针,对a解引用会是一个指针。 它可以用于操作动态分配的二维数组、指针数组或需要间接修改指针…...
鸿蒙状态管理概述
状态管理 状态管理之v1LocalStorageLocalStorageLink的框架行为LocalStorageProp的框架行为LocalStorage使用场景 AppStorageStorageLink的框架行为StorageProp的框架行为AppStorage的使用场景 PersistentStorageEnvironmentEnvironment内置参数 WatchWatch的使用场景 $$语法$$…...
【核心算法篇十三】《DeepSeek自监督学习:图像补全预训练方案》
引言:为什么自监督学习成为AI新宠? 在传统监督学习需要海量标注数据的困境下,自监督学习(Self-Supervised Learning)凭借无需人工标注的特性异军突起。想象一下,如果AI能像人类一样通过观察世界自我学习——这正是DeepSeek图像补全方案的技术哲学。根据,自监督学习通过…...
由浅入深学习大语言模型RLHF(PPO强化学习- v1浅浅的)
最近,随着DeepSeek的爆火,GRPO也走进了视野中。为了更好的学习GRPO,需要对PPO的强化学习有一个深入的理解,那么写一篇文章加深理解吧。纵观网上的文章,要么说PPO原理,各种复杂的公式看了就晕,要…...
网络安全三件套
一、在线安全的四个误解 Internet实际上是个有来有往的世界,你可以很轻松地连接到你喜爱的站点,而其他人,例如黑客也很方便地连接到你的机器。实际上,很多机器都因为自己很糟糕的在线安全设置无意间在机器和系统中留下了“…...
瑞芯微RV1126部署YOLOv8全流程:环境搭建、pt-onnx-rknn模型转换、C++推理代码、错误解决、优化、交叉编译第三方库
目录 1 环境搭建 2 交叉编译opencv 3 模型训练 4 模型转换 4.1 pt模型转onnx模型 4.2 onnx模型转rknn模型 4.2.1 安装rknn-toolkit 4.2.2 onn转成rknn模型 5 升级npu驱动 6 C++推理源码demo 6.1 原版demo 6.2 增加opencv读取图片的代码 7 交叉编译x264 ffmepg和op…...
【ISO 14229-1:2023 UDS诊断(会话控制0x10服务)测试用例CAPL代码全解析⑤】
ISO 14229-1:2023 UDS诊断【会话控制0x10服务】_TestCase05 作者:车端域控测试工程师 更新日期:2025年02月15日 关键词:UDS诊断、0x10服务、诊断会话控制、ECU测试、ISO 14229-1:2023 TC10-005测试用例 用例ID测试场景验证要点参考条款预期…...
python-leetcode 35.二叉树的中序遍历
给定一个二叉树的根节点root,返回它的中序遍历。 方法一:递归 二叉树的中序遍历:按照访问左子树——根节点——右子树的方式遍历这棵树,而在访问左子树或者右子树的时候我们按照同样的方式遍历,直到遍历完整棵树。因此整个遍历过…...
glob 用法技巧
目录 处理大量文件节省内存 匹配多个文件扩展名 遍历多种格式文件 遍历某一个文件: 查找当前目录和子目录 6. 排除特定文件 7. 大小写不敏感匹配 8. 获取绝对路径 9. 处理特殊字符 处理大量文件节省内存 技巧:用 iglob 替代 glob,逐…...
CodeGPT 使用教程(适用于 VSCode)
CodeGPT 使用教程(适用于 VSCode) CodeGPT 是一个 VSCode 插件,可以让你在代码编辑器中直接调用 GPT 进行代码补全、优化、调试等操作。以下是详细的安装和使用步骤: 1. 安装 CodeGPT 方式 1:从 VSCode 插件市场安装…...
以下是MySQL中常见的增删改查语句
以下是MySQL中常见的增删改查语句: 增加数据(INSERT) 基本语法: INSERT INTO table_name (column1, column2,...) VALUES (value1, value2,...); 示例:向名为 students 的表中插入一条学生记录, id 为1&am…...
Vue3 与 TypeScript 实战:核心细节与最佳实践
引言 Vue3 的 Composition API 与 TypeScript 的强类型支持完美契合,极大提升了代码的可维护性和开发体验。本文将深入探讨 Vue3 TypeScript 的关键细节,并通过实际代码示例展示如何高效结合二者。 一、组合式 API 与类型推导 Vue3 的 setup 函数与 T…...
23种设计模式 - 解释器模式
模式定义 解释器模式(Interpreter Pattern)是一种行为型设计模式,用于为特定语言(如数控系统的G代码)定义文法规则,并构建解释器来解析和执行该语言的语句。它通过将语法规则分解为多个类,实现…...
常用的 React Hooks 的介绍和示例
目录 1. useState2. useEffect3. useContext4. useReducer5. useCallback6. useMemo7. useRef8. useImperativeHandle9. useLayoutEffect10. useDebugValue 常用的 React Hooks 的介绍和示例: 1. useState useState 是一个用于在函数组件中添加状态的 Hook。 impo…...
ChatGLM-6B模型
ChatGLM-6B 是由 清华大学人工智能研究院(THU AI) 和 智源研究院(BAAI) 开发的一款中文对话生成大语言模型。它是ChatGLM系列的一个版本,其核心特点是基于GLM(General Language Model)架构&…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生,小白用户,想学习知识的 有点基础,想要通过项…...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC? WebRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音…...
python爬虫——气象数据爬取
一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用: 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests:发送 …...
水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关
在水泥厂的生产流程中,工业自动化网关起着至关重要的作用,尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关,为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多,其中不少设备采用Devicenet协议。Devicen…...
Modbus RTU与Modbus TCP详解指南
目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...
