echarts绘制三维柱状图

echarts

ECharts 是一个使用 JavaScript 实现的开源可视化库,主要用于数据的可视化展示。ECharts 支持丰富的图表类型,如折线图、柱状图、饼图、地图、K线图等,可以满足不同类型数据的展示需求。

文档地址:echarts

本次所绘制三维柱状图主要使用的是示例源代码,在此基础上做了些修改。

引入CDN

使用echarts需要导入echarts和echarts-gl。

免费的CDN服务可访问网址:Staticfile CDN

<!-- 引入 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
<script src="https://cdn.staticfile.net/echarts-gl/2.0.8/echarts-gl.js"></script>

HTML结构

设置一个container容器存放三维柱状图,设置一个下载png图片按钮。根据id选择器设置样式。

<!DOCTYPE html>
<html lang="">
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 ECharts 文件 --><script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script><script src="https://cdn.staticfile.net/echarts-gl/2.0.8/echarts-gl.js"></script><style>#container {width: 900px;height: 800px;margin-left: 300px;margin-top: -120px;}#download{margin-left: 300px;}</style>
</head>
<body>
<!-- 准备一个 DOM 容器 -->
<div id="container"></div>
<button id="download">Download as PNG</button>
<script type="text/javascript"...>
</body>
</html>

echarts属性设置

visualMap组件可以根据Z轴值的大小映射出不同的颜色。graphic组件可以添加文字说明。

const dom = document.getElementById('container');const myChart = echarts.init(dom, null, {renderer: 'canvas',useDirtyRect: false});let option;// prettier-ignoreconst hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a','7a', '8a', '9a', '10a', '11a','12p', '1p', '2p', '3p', '4p', '5p','6p', '7p', '8p', '9p', '10p', '11p'];// prettier-ignoreconst days = ['Saturday', 'Friday', 'Thursday','Wednesday', 'Tuesday', 'Monday', 'Sunday'];// prettier-ignoreconst data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];option = {tooltip: {},// visualMap组件根据Z轴值的大小映射不同的颜色visualMap: {min: 0,max: 20,text: ['20', '0'],bottom: '10%',inRange: {color: ['#313695','#4575b4','#74add1','#abd9e9','#e0f3f8','#ffffbf','#fee090','#fdae61','#f46d43','#d73027','#a50026']}},// graphic组件添加说明文本graphic: [{type: 'text',left: '5%',bottom: '21%',style: {text: 'value',fill: '#000',font: '14px Microsoft YaHei'}}],xAxis3D: {type: 'category',data: hours,name: 'test1'},yAxis3D: {type: 'category',data: days,name: 'test2',nameGap: 25,      // 设置Y轴名称与轴线之间的距离,单位是像素axisLabel: {// 设置标注与轴线之间的间距margin: 5  // 这里的20可以根据需要调整为其他值}},zAxis3D: {type: 'value',name: 'test3'},grid3D: {boxWidth: 200,boxDepth: 80,viewControl: {// projection: 'orthographic'},light: {main: {intensity: 1.2,shadow: true},ambient: {intensity: 0.3}}},series: [{type: 'bar3D',data: data.map(function (item) {return {value: [item[1], item[0], item[2]]};}),shading: 'lambert',label: {fontSize: 16,borderWidth: 1},emphasis: {label: {fontSize: 20,color: '#900'},itemStyle: {color: '#900'}}}]};
if (option && typeof option === 'object') {myChart.setOption(option);}window.addEventListener('resize', myChart.resize);

添加下载事件

通过添加下载事件可以将HTML中的图片转换成png格式。

// 添加下载事件
document.getElementById('download').addEventListener('click', function() {// 使用echarts的getDataURL方法获取图表的Base64编码const url = myChart.getDataURL({type: 'png',pixelRatio: 2, // 设置图像的分辨率backgroundColor: '#fff' // 设置背景色(可选)});// 创建一个下载链接const a = document.createElement('a');a.href = url;a.download = 'chart.png';document.body.appendChild(a);a.click();document.body.removeChild(a);
});

完整代码

<!DOCTYPE html>
<html lang="">
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 ECharts 文件 --><script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script><script src="https://cdn.staticfile.net/echarts-gl/2.0.8/echarts-gl.js"></script><style>#container {width: 900px;height: 800px;margin-left: 300px;margin-top: -120px;}#download{margin-left: 300px;}</style>
</head>
<body>
<!-- 准备一个 DOM 容器 -->
<div id="container"></div>
<button id="download">Download as PNG</button>
<script type="text/javascript">const dom = document.getElementById('container');const myChart = echarts.init(dom, null, {renderer: 'canvas',useDirtyRect: false});let option;// prettier-ignoreconst hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a','7a', '8a', '9a', '10a', '11a','12p', '1p', '2p', '3p', '4p', '5p','6p', '7p', '8p', '9p', '10p', '11p'];// prettier-ignoreconst days = ['Saturday', 'Friday', 'Thursday','Wednesday', 'Tuesday', 'Monday', 'Sunday'];// prettier-ignoreconst data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];option = {tooltip: {},// visualMap组件根据Z轴值的大小映射不同的颜色visualMap: {min: 0,max: 20,text: ['20', '0'],bottom: '10%',inRange: {color: ['#313695','#4575b4','#74add1','#abd9e9','#e0f3f8','#ffffbf','#fee090','#fdae61','#f46d43','#d73027','#a50026']}},// graphic组件添加说明文本graphic: [{type: 'text',left: '5%',bottom: '21%',style: {text: 'value',fill: '#000',font: '14px Microsoft YaHei'}}],xAxis3D: {type: 'category',data: hours,name: 'test1'},yAxis3D: {type: 'category',data: days,name: 'test2',nameGap: 25,      // 设置Y轴名称与轴线之间的距离,单位是像素axisLabel: {// 设置标注与轴线之间的间距margin: 5  // 这里的20可以根据需要调整为其他值}},zAxis3D: {type: 'value',name: 'test3'},grid3D: {boxWidth: 200,boxDepth: 80,viewControl: {// projection: 'orthographic'},light: {main: {intensity: 1.2,shadow: true},ambient: {intensity: 0.3}}},series: [{type: 'bar3D',data: data.map(function (item) {return {value: [item[1], item[0], item[2]]};}),shading: 'lambert',label: {fontSize: 16,borderWidth: 1},emphasis: {label: {fontSize: 20,color: '#900'},itemStyle: {color: '#900'}}}]};// 添加下载事件document.getElementById('download').addEventListener('click', function() {// 使用echarts的getDataURL方法获取图表的Base64编码const url = myChart.getDataURL({type: 'png',pixelRatio: 2, // 设置图像的分辨率backgroundColor: '#fff' // 设置背景色(可选)});// 创建一个下载链接const a = document.createElement('a');a.href = url;a.download = 'chart.png';document.body.appendChild(a);a.click();document.body.removeChild(a);});if (option && typeof option === 'object') {myChart.setOption(option);}window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>

结果展示

点击下载按钮,即可保存为png格式。
在这里插入图片描述

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

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

相关文章

网络安全实战:反射型XSS攻击技术剖析与防御策略

反射型XSS攻击&#xff1a;技术解析与防范策略 在网络攻防演练中&#xff0c;跨站脚本攻击&#xff08;XSS&#xff09;是一个不可忽视的议题。反射型XSS作为其中一种攻击方式&#xff0c;通过诱使受害者点击一个恶意链接&#xff0c;间接地在受害者的浏览器中执行攻击者的脚本…

从零开始实现自己的串口调试助手(3) - 显示底部收发,优化串口打开/关闭

注意: 1. 我们要实现自发自收&#xff0c;要将tx&#xff0c;rx连起来 2.发送的 不能是中文符号&#xff0c;因为这可能导致&#xff0c;读取到的是英文符号 --> 导致接收到的size 和发送的size 大小不一致 3.注意同时定义两个槽函数的时候两个槽函数都会被调用&#xff0c;…

MySQL数据表的设计

实际工程中, 对于数据表的设计和创建, 我们遵循以下步骤: 首先确定实体, 找到关键名词, 提取关键信息, 设计表有哪些列, 每一列是什么. (有几个实体, 一般就创建几个表, 一般一个表对应一个实体) 实体之间的关系: 1. 一对一关系 例如: 一个学生, 只能有一个账号; 一个账号只…

【区分vue2和vue3下的element UI Select 选择器组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中&#xff0c;el-select 选择器组件是一个常用的表单控件&#xff0c;用于从一组选项中选择一个或多个值。以下是对这两个版本下 el-select 组件的属性、事件和方法的详细介绍&#xff0c;并附带示例。 Vue 2 的 Element UI…

Flutter 中的 SliverMainAxisGroup 小部件:全面指南

Flutter 中的 SliverMainAxisGroup 小部件&#xff1a;全面指南 Flutter 是一个由 Google 开发的跨平台 UI 框架&#xff0c;它提供了多种布局和控件来帮助开发者构建高性能、美观的移动和 web 应用。在 Flutter 的滚动和布局体系中&#xff0c;SliverMainAxisGroup 是一个较少…

基于单片机的病床呼叫系统设计研究

摘要&#xff1a;随着无线技术的快速发展&#xff0c;无线应用技术已经运用到人们生产生活中的多个领域&#xff0c;运用无线技术来设计病床呼叫系统能够实现无线信号的远距离传输&#xff0c;减少材料耗费&#xff0c;使医患之间的沟通更加便捷&#xff0c;该系统运用单片机作…

决定短视频打开率的要素:成都鼎茂宏升文化传媒公司

​ 在当下这个短视频盛行的时代&#xff0c;无论是个人创作者还是企业品牌&#xff0c;都希望通过短视频平台获得更多的曝光和关注。然而&#xff0c;如何让自己的短视频在众多内容中脱颖而出&#xff0c;吸引用户的点击和观看&#xff0c;成为了摆在我们面前的重要问题。成都…

nginx隐藏版本号、错误信息页面隐藏nginx软件、修改 HTTP 头信息中的connection 字段,防止回显具体版本号、curl命令

目录 安装之后隐藏 配置文件 源代码配置安装之前隐藏 修改nginx.h文件中的 13、14行 修改 HTTP 头信息中的connection 字段&#xff0c;防止回显具体版本号 配置文件49行 错误页面程序返回版本号、nginx隐藏 配置文件36行 ​编辑 安装nginx 相关选项说明 curl命令测试…

更新详情 | Flutter 3.22 与 Dart 3.4

作者 / Michael Thomsen 过去几个月&#xff0c;Dart & Flutter 部门可谓忙碌非凡&#xff0c;但我们很高兴地宣布&#xff0c;Flutter 3.22 和 Dart 3.4 已经在今年的 Google I/O 大会上精彩亮相&#xff01; Google I/Ohttps://io.google/2024/intl/zh/ 我们始终致力于提…

记一次mysql索引优化

生产日志告警出现一条慢 sql 告警, 通过 sql 监控平台拿到 这条sql 语句是 : SELECTid,report_id,report_detail_id,item_code,report_type,photo FROM**** 表 WHEREdel_flag 0 AND (report_type 1 AND report_detail_id IN ( 1742 )) 之后用 explain 分析这条 sql 的命中…

FPGA新起点V1开发板(九)——流水灯

文章目录 一、模块框图二、代码编写三、注意点四、总结 一、模块框图 二、代码编写 endmodule下面需要敲出一个回车代码拼接是大括号 led < {led[2:0],led[3]}注意二进制和十进制 module flow_led(input sys_clk50,input rst_n,output reg [3:0] le…

Java开发分析工具:JProfiler 14 for Mac/win 激活版下载

JProfiler是一款功能强大的Java应用程序性能分析工具&#xff0c;适用于Java开发人员和企业用户&#xff0c;可帮助他们识别和解决Java应用程序中的性能问题&#xff0c;提高应用程序的性能和稳定性。使用JProfiler&#xff0c;开发人员可以实时查看Java应用程序的性能数据&…

项目的各个阶段如何编写标准的Git commit消息

标准提交消息格式 一个标准的提交消息应包括三部分&#xff1a;标题&#xff08;summary&#xff09;、正文&#xff08;description&#xff09;和脚注&#xff08;footer&#xff09;。 1. 标题&#xff08;Summary&#xff09; 简洁明了&#xff0c;不超过50个字符。使用…

Redis数据类型(下篇)

5.Redis有序集合zset(sorted set) 本质就是在set的基础上&#xff0c;每个val值前面加了一个score分数值。 &#xff08;1&#xff09;向有序集合中添加多个&#xff08;或者一个&#xff09;元素和其对应的分数 127.0.0.1:6379> zadd zset1 100 a 90 b 80 c 70 d 60 e (…

【VMware虚拟机中ubuntu系列】—— 在虚拟机中使用本机摄像头的详细教程与常见问题分析及解决

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、虚拟机调用本机摄像头(1) 启动VMware USB 服务(2) 连接本机摄像头(3) 测试摄像头的连接 二、安装usb驱动二、运行usb_cam.launch时出现select timeout的报错…

vulhub中Nexus Repository Manager 3 未授权目录穿越漏洞(CVE-2024-4956)

Nexus Repository Manager 3 是一款软件仓库&#xff0c;可以用来存储和分发Maven、NuGET等软件源仓库。 其3.68.0及之前版本中&#xff0c;存在一处目录穿越漏洞。攻击者可以利用该漏洞读取服务器上任意文件。 环境启动后&#xff0c;访问http://your-ip:8081即可看到Nexus的…

web前端三大典型应用框架

以下是Web前端三大主流框架的作者、使用情况、典型客户。 框架名称 作者/主要开发者 使用情况 典型客户 Angular Google Angular是一个功能强大的前端框架&#xff0c;适用于开发大型和复杂的Web应用。它提供了一套完整的工具和生态系统&#xff0c;使得开发者可以高效地…

Java 虚拟机详解——Java虚拟机、垃圾回收、内存分配策略

文章目录 一、运行时数据区域程序计数器Java 虚拟机栈本地方法栈堆方法区运行时常量池直接内存 二、垃圾收集判断一个对象是否可被回收1. 引用计数算法2. 可达性分析算法3. 方法区的回收4. finalize() 引用类型1. 强引用2. 软引用3. 弱引用4. 虚引用 垃圾收集算法1. 标记 - 清除…

npm发布、更新、删除包

如何将自己开发的依赖包发布到npmjs上供别人使用&#xff1f;五个步骤搞定&#xff01; 实现步骤&#xff1a; 创建自己的工具包项目&#xff0c;进行开发。注册npmjs账号。执行npm login在控制台登录&#xff0c;填写用户信息。执行npm publish发布包。更新及删除。 步骤一…

MongoDB~俩大特点管道聚合和数据压缩(snappy)

场景 在MySQL中&#xff0c;通常会涉及多个表的一些操作&#xff0c;MongoDB也类似&#xff0c;有时需要将多个文档甚至是多个集合汇总到一起计算分析&#xff08;比如求和、取最大值&#xff09;并返回计算后的结果&#xff0c;这个过程被称为 聚合操作 。 根据官方文档介绍&…