【大前端】ECharts 绘制立体柱状图

立体柱状图分为:

  1. 纯色立体柱状图
  2. 渐变立体柱状图

常用实现方式

纯色立体柱状图

纯色立体柱状图,使用MarkPoint和颜色渐变就实现,如下代码

在这里插入图片描述

import * as echarts from "echarts";var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom, "dark");
var option;const xAxisData = ['A', 'B', 'C', 'D', 'E'];
const yAxisData = [10, 20, 30, 50, 60];const markPointData = [];const barWidth = 30;const linearColor = {type: 'linear',x: 0,y: 0,x1: 0,y1: 1,colorStops: [{offset: 0,color: '#28A9A2' // 0% 处的颜色},{offset: 0.5,color: '#28A9A2' // 0% 处的颜色},{offset: 0.5,color: '#35FFF4' // 0% 处的颜色},{offset: 1,color: '#35FFF4' // 100% 处的颜色}],global: false // 缺省为 false
};yAxisData.forEach((v, i) => {//添加顶部渐变markPointData.push({xAxis: xAxisData[i],yAxis: v,symbol: 'path://M 0 5 L 15 10 L 30 5 L 15 0 L 0 5 Z', //菱形图标symbolSize: [barWidth, barWidth * 0.5],itemStyle: {color: 'rgba(126, 255, 248,1)'}});// //添加底部渐变markPointData.push({xAxis: xAxisData[i],y: 698,// 到左上角Y轴距离symbol: 'path://M 0 5 L 15 10 L 30 5 L 15 0 L 0 5 Z', //菱形图标symbolSize: [barWidth, barWidth * 0.5],symbolOffset: ['0%', '100%'],itemStyle: {color: linearColor}});
});option = {title: {text: '立体柱状图示例'},tooltip: {},xAxis: {data: xAxisData},yAxis: {},series: [{name: '销量',type: 'bar',data: yAxisData,barWidth: barWidth,markPoint: {data: markPointData,silent: true},itemStyle: {borderRadius: [0, 0, 30, 30],color: linearColor}}]
};option && myChart.setOption(option);

SVG

SVG适用于纯色立体柱状图和渐变立体柱状图

ECharts不能直接使用SVG字符串,须要转化为Base64格式的数据(可以使用网络SVG图片地址)

在这里插入图片描述

import * as echarts from "echarts";var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom, "dark");
var option;const xAxisData = ["A", "B", "C", "D", "E"];
const yAxisData = [10, 20, 30, 50, 60];const markPointData = [];const barWidth = 30;const svgStr ='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="105" viewBox="0 0 14 105"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg0_1_6290"><stop offset="0%" stop-color="#28A9A2" stop-opacity="1"/><stop offset="100%" stop-color="#28A9A2" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg1_1_6296"><stop offset="0%" stop-color="#35FFF4" stop-opacity="1"/><stop offset="100%" stop-color="#35FFF4" stop-opacity="0"/></linearGradient></defs><g><g><rect x="0" y="0" width="7" height="105" rx="0" fill="url(#master_svg0_1_6290)" fill-opacity="1"/></g><g><rect x="7" y="0" width="7" height="105" rx="0" fill="url(#master_svg1_1_6296)" fill-opacity="1"/></g></g></svg>';
// 转换为Base64格式
const svgDataURL = "data:image/svg+xml;base64," + btoa(svgStr);yAxisData.forEach((v, i) => {//添加顶部渐变markPointData.push({xAxis: xAxisData[i],yAxis: v,symbol: "path://M 0 5 L 15 10 L 30 5 L 15 0 L 0 5 Z", //菱形图标symbolSize: [barWidth, barWidth * 0.5],itemStyle: {color: "rgba(126, 255, 248,1)"}});
});option = {title: {text: "立体柱状图示例"},tooltip: {},xAxis: {data: xAxisData},yAxis: {},series: [{name: "销量",type: "pictorialBar",data: yAxisData,barWidth: barWidth,markPoint: {data: markPointData,silent: true},symbol:`image://${svgDataURL}`,}]
};option && myChart.setOption(option);

2. MarkPoint

MarkPoint 适用于多组图标组合展示

它和SVG不同的是绘制方式不一样,SVG是互联网通用绘制方式,MarkPoint是ECharts特有的绘制方式

在这里插入图片描述

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'dark');
var option;const xAxisData = ['A', 'B', 'C', 'D', 'E'];
const yAxisData = [10, 20, 30, 50, 60];const markPointData = [];const barWidth = 30;// 计算柱状图高度
function computedBarHeight(value, params) {// 左上角 到 Y轴 0 刻度的高度,如果x轴是数值轴,则例使用xAxisIndex标记const zeroHeight = myChart.convertToPixel({ yAxisIndex: 0 }, 0);// 左上角到Y轴目标数值的高度,如果x轴是数值轴,则例使用xAxisIndex标记const height = myChart.convertToPixel({ yAxisIndex: 0 }, params.data.yAxis);// 返回柱状图大小,高度等于0刻度距离-目标数值距离的差值return [barWidth / 2, zeroHeight - height];
}yAxisData.forEach((v, i) => {//添加左侧渐变markPointData.push({xAxis: xAxisData[i],yAxis: v,symbol: 'rect',symbolSize: computedBarHeight,symbolOffset: ['-50%', '50%'],itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(40, 169, 162,1)'},{offset: 1,color: 'rgba(40, 169, 162,0)'}],global: false}}});//添加右侧渐变markPointData.push({xAxis: xAxisData[i],yAxis: v,symbol: 'rect',symbolSize: computedBarHeight,symbolOffset: ['50%', '50%'],itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(53, 255, 244,1)'},{offset: 1,color: 'rgba(53, 255, 244,0)'}],global: false}}});//添加顶部渐变markPointData.push({xAxis: xAxisData[i],yAxis: v,symbol: 'path://M 0 5 L 15 10 L 30 5 L 15 0 L 0 5 Z',//菱形图标symbolSize: [barWidth, barWidth * 0.5],itemStyle: {color: 'rgba(126, 255, 248,1)'}});
});option = {title: {text: '立体柱状图示例'},tooltip: {},xAxis: {data: xAxisData},yAxis: {},series: [{name: '销量',type: 'bar',data: yAxisData,barWidth: barWidth,markPoint: {data: markPointData,silent: true},z: 3,itemStyle: {color: 'rgba(255, 53, 64,0)'}}]
};option && myChart.setOption(option);

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

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

相关文章

AI大模型探索之路-训练篇9:大语言模型Transformer库-Pipeline组件实践

系列篇章&#x1f4a5; AI大模型探索之路-训练篇1&#xff1a;大语言模型微调基础认知 AI大模型探索之路-训练篇2&#xff1a;大语言模型预训练基础认知 AI大模型探索之路-训练篇3&#xff1a;大语言模型全景解读 AI大模型探索之路-训练篇4&#xff1a;大语言模型训练数据集概…

Android View事件分发面试问题及回答

问题 1: 请简述Android中View的事件分发机制是如何工作的&#xff1f; 答案: 在Android中&#xff0c;事件分发机制主要涉及到三个主要方法&#xff1a;dispatchTouchEvent(), onInterceptTouchEvent(), 和 onTouchEvent(). 当一个触摸事件发生时&#xff0c;首先被Activity的…

展会资讯 | 现场精彩回顾 阿尔泰科技参展2024第23届中国国际(西部)光电产业!

2024第23届中国国际&#xff08;西部&#xff09;光电产业博览会&#xff0c;在成都世纪城新国际会展中心圆满落幕&#xff01;来自各地的光电领域设备及材料厂商汇聚一堂&#xff0c;展示前沿技术及创新成果。 展会现场&#xff0c;来自全国各地的500余家企业就精密光学、信息…

ChatGPT 网络安全秘籍(四)

原文&#xff1a;zh.annas-archive.org/md5/6b2705e0d6d24d8c113752f67b42d7d8 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第八章&#xff1a;事故响应 事故响应是任何网络安全策略的关键组成部分&#xff0c;涉及确定、分析和缓解安全漏洞或攻击。 及时和有效地…

Linux深入学习内核 - 中断与异常(下)

软中断&#xff0c;Tasklet和Work Queue 由内核执行的几个任务之间有一些不是紧急的&#xff0c;他们可以被延缓一段时间&#xff01;把可延迟的中断从中断处理程序中抽出来&#xff0c;有利于使得内核保持较短的响应时间&#xff0c;所以我们现在使用以下面的这些结构&#x…

通用漏洞评估系统CVSS4.0简介

文章目录 什么是CVSS&#xff1f;CVSS 漏洞等级分类历史版本的 CVSS 存在哪些问题&#xff1f;CVSS 4.0改进的“命名法”改进的“基本指标”考虑“OT/IOT”新增的“其他指标”CVSS 4.0存在的问题 Reference: 什么是CVSS&#xff1f; 在信息安全评估领域&#xff0c;CVSS为我们…

2024五一数学建模C题Python代码+结果表数据教学

2024五一数学建模竞赛&#xff08;五一赛&#xff09;C题保姆级分析完整思路代码数据教学 C题 煤矿深部开采冲击地压危险预测 第一问 导入数据 以下仅展示部分&#xff0c;完整版看文末的文章 import numpy as np import pandas as pd import matplotlib.pyplot as plt imp…

基于Springboot的音乐翻唱与分享平台

基于SpringbootVue的音乐翻唱与分享平台设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringbootMybatis工具&#xff1a;IDEA、Maven、Navicat 系统展示 用户登录 首页 音乐资讯 音乐翻唱 在线听歌 后台登录 后台首页 用户管理 音乐资讯管理…

labview强制转换的一个坑

32位整形强制转换成枚举的结果如何&#xff1f; 你以为的结果是 实际上的结果是 仔细看&#xff0c;枚举的数据类型是U16&#xff0c;"1"的数据类型是U32&#xff0c;所以转换产生了不可预期的结果。所以使用强制转换时一定要保证两个数据类型一致&#xff0c;否则…

CentOS7安装MySQL8.3(最新版)踩坑教程

安装环境说明 项值系统版本CentOS7 &#xff08;具体是7.9&#xff0c;其他7系列版本均可&#xff09;位数X86_64&#xff0c;64位操作系统MySQL版本mysql-8.3.0-1.el7.x86_64.rpm-bundle.tar 实际操作 官网下载安装包 具体操作不记录&#xff0c;相关教程很多。 mkdir /o…

锂电池SOH预测 | 基于BP神经网络的锂电池SOH预测(附matlab完整源码)

锂电池SOH预测 锂电池SOH预测完整代码锂电池SOH预测 锂电池的SOH(状态健康度)预测是一项重要的任务,它可以帮助确定电池的健康状况和剩余寿命,从而优化电池的使用和维护策略。 SOH预测可以通过多种方法实现,其中一些常用的方法包括: 容量衰减法:通过监测电池的容量衰减…

QT5制做两个独立窗口

目录 增加第二个窗口 主窗口文件添加一个私有成员为子窗口 定义两个槽函数和 关联按钮和子窗口和主窗口 添加子窗口成员 子窗口处理函数 补充回顾 增加第二个窗口 1、 2、 3 主窗口文件添加一个私有成员为子窗口 在mainwidget.h文件 同时添加两个槽&#xff1b;来处理…

Docker: 如何不新建容器 修改运行容器的端口

目录 一、修改容器的映射端口 二、解决方案 三、方案 一、修改容器的映射端口 项目需求修改容器的映射端口 二、解决方案 停止需要修改的容器 修改hostconfig.json文件 重启docker 服务 启动修改容器 三、方案 目前正在运行的容器 宿主机的3000 端口 映射 容器…

【综述】多核处理器芯片

文章目录 前言 Infineon处理器 AURIX™系列 TC399XX-256F300S 典型应用 开发工具 参考资料 前言 见《【综述】DSP处理器芯片》 Infineon处理器 AURIX™系列&#xff0c;基于TriCore内核&#xff0c;用于汽车和工业领域。 XMC™系列&#xff0c;基于ARM Cortex-M内核&…

test4282

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

2024五一杯数学建模A题思路分析-钢板最优切割路径问题

文章目录 1 赛题选题分析 2 解题思路3 最新思路更新 1 赛题 A题 钢板最优切割路径问题 提高钢板下料切割过程中的工作效率&#xff0c;是模具加工企业降低成本和增加经济效益的重要途径&#xff0c;其中钢板切割的路径规划是钢板切割过程的一个关键环节。 钢板切割就是使用特殊…

2024 五一杯高校数学建模邀请赛(C题)| 煤矿深部开采冲击地压危险预测 |建模秘籍文章代码思路大全

铛铛&#xff01;小秘籍来咯&#xff01; 小秘籍团队独辟蹊径&#xff0c;构建了这一题的详细解答哦&#xff01; 为大家量身打造创新解决方案。小秘籍团队&#xff0c;始终引领着建模问题求解的风潮。 抓紧小秘籍&#xff0c;我们出发吧~ 让我们看看五一杯的C题&#xff01; 完…

ChatGPT 网络安全秘籍(一)

原文&#xff1a;zh.annas-archive.org/md5/6b2705e0d6d24d8c113752f67b42d7d8 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 前言 在不断发展的网络安全领域中&#xff0c;由 OpenAI 推出的 ChatGPT 所代表的生成式人工智能和大型语言模型&#xff08;LLMs&#xf…

【软件开发规范篇】JAVA后端开发编码格式规范

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过大学刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0…

公共 IP 地址与私有 IP 地址区别有哪些?

​  IP 地址是分配给互联网上每个设备的唯一数字 ID。 IP 地址可以在 Internet 上公开使用&#xff0c;也可以在局域网 (LAN)上私有使用。本文&#xff0c;我们主要探讨公共 IP 地址和私有 IP 地址之间的区别。 公共IP地址&#xff1a;公共IP地址是用于访问Internet的向外的I…