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-ignore
    const 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-ignore
    const days = ['Saturday', 'Friday', 'Thursday',
        'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
    // prettier-ignore
    const 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-ignore
    const 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-ignore
    const days = ['Saturday', 'Friday', 'Thursday',
        'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
    // prettier-ignore
    const 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格式。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Django request.POST获取提交的表单数据

在Django中&#xff0c;request.POST 是一个特殊的属性&#xff0c;它是一个类似于字典的对象&#xff0c;用于访问通过POST方法提交的表单数据。如果你在视图中使用 print(request.POST.get(username))&#xff0c;这通常意味着你正在尝试从一个HTML表单中获取一个名为 userna…

数学建模之MATLAB入门教程(上)

前言&#xff1a; • MATLAB是美国Math Works公司出品的商业数学软件&#xff0c;用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理、量化金融与风险管理、机器人&#xff0c;控制系统等领域。 • MATLAB将数值分析、矩阵计算、科学数据可视化以及非线性动…

Ubuntu server 24 (Linux) 普通用户不能sudo 也不能使用root登录 忘记root密码 修复解决方案

一 普通用户无法sudo&#xff0c;同时也没有其他用户可用 #test用户使用sudo报错&#xff0c;没有权限 testtest:~$ sudo vi /etc/sudoers [sudo] password for test: test is not in the sudoers file. 二 关闭ubuntu 服务器&#xff0c;重新开机 按下ESC 键 1 出现GRUB…

【工具】探索 MOU:每用户通话时长

缘分让我们相遇乱世以外 命运却要我们危难中相爱 也许未来遥远在光年之外 我愿守候未知里为你等待 我没想到为了你我能疯狂到 山崩海啸没有你根本不想逃 我的大脑为了你已经疯狂到 脉搏心跳没有你根本不重要 &#x1f3b5; 邓紫棋《光年之外》 什么是 MOU…

RunLoop小白入门

核心概念 什么是 RunLoop ? RunLoop 是 iOS 和 macOS 应用程序框架中的一个核心概念&#xff0c;用于管理线程的事件处理。它可以看作是一个循环&#xff0c;用于持续接收和处理各种事件&#xff0c;如用户输入、定时器、网络事件等。RunLoop 在保持应用程序响应用户交互和系…

【再探】设计模式—备忘录模式与解释器模式

备忘录模式是用于保存对象在某个时刻的状态&#xff0c;来实现撤销操作。而解释器模式则是将文本按照定义的文法规则解析成对应的命令。 1 备忘录模式 需求&#xff1a;保存对象在某个时刻的状态&#xff0c;后面可以对该对象实行撤销操作。 1.1 备忘录模式介绍 提供一种状…

Anaconda创建python环境默认C盘,如何修改路径

文章目录 前言解决方案1.找到Anaconda的根目录2. 找到根目录文件夹&#xff0c;右键-属性-安全 测试-重新创建新的python环境 前言 使用 Anaconda创建python环境&#xff0c;默认在C盘。 如何修改到别的路径呢&#xff1f; base环境 是安装 Anaconda是安装的默认环境&#x…

YOLOv8_obb训练流程-原理解析[旋转目标检测理论篇]

在旋转目标检测网络中,换了个顺序,先把训练流程捋一遍,然后再取捋一下测试的流程。由下图的YOLOv8l_obb网络结构图可以看到相对于目标检测网络,旋转目标检测网络只是在Head层不相同,在每个尺度特征层中增加了Angle分支(浅蓝色),通过两个卷积组和一个Conv卷积得到得到通…

隐马尔可夫链

1 马尔可夫链 马尔科夫链&#xff08;Markov Chain&#xff09;是一种数学模型&#xff0c;它描述了一系列可能事件的概率&#xff0c;其中每个事件的发生仅依赖于前一个事件的状态。这一特性称为“无记忆性”或“马尔可夫性质”。我将用一个简单的天气预测模型作为例子来解释马…

Docker的网络管理

文章目录 一、Docker容器之间的通信1、直接互联&#xff08;默认Bridge网络&#xff09;1.1、Docker安装后默认的网络配置1.2、创建容器后的网络配置1.2.1、首先创建一个容器1.2.2、ip a 列出网卡变化信息1.2.3、查看新建容器后的桥接状态 1.3、容器内安装常见的工具1.4、容器间…

记一次线上数据库连接超时异常问题

最近其他团队的开发人员告知我&#xff0c;我们项目有个feign接口调用失败了。我查看日志发现&#xff0c;其原因是尝试数据库连接超时&#xff0c;30秒内都没有连接成功。 我首先判断可能是网络不稳定&#xff0c;在一定时间内连接不上数据库。我登录到服务器环境看&#xff0…

内网域中NTLM中继那些事儿

0x01 初识NTLM协议 基本概念&#xff1a;NTLM(NT LAN Manager)认证是一种早期的Windows网络身份认证协议。它在Windows系统中用于验证用户的身份&#xff0c;并提供对网络资源的访问控制&#xff0c;它是一种基于Challenge/Response的认证机制。 认证流程 NTLM协议Challenge…

如何使用 DANN 改进神经网络

文章目录 一、说明二、语言模型真的理解语言吗&#xff1f;三、了解分配转变3.1 样本选择偏差3.2 非静止环境3.3 领域适配挑战3.4 概念漂移 四、对领域对抗训练的介绍 一、说明 由于其多功能性&#xff0c;神经网络是大多数现代机器学习管道的主要内容。他们处理非结构化数据的…

mathtype7最新产品密钥激活2024最新

MathType是一款专业的数学公式编辑器&#xff0c;广泛应用于教育、科研和出版等领域。随着在线教育和远程工作的兴起&#xff0c;MathType的使用场景更加广泛&#xff0c;成为教师、学生、研究人员和专业作家必不可少的工具之一。本文将详细介绍MathType的功能特点、操作步骤以…

HTML 总结

HTML 简介 HTML(HyperText MarkupLanguage): 超文本标记语言 超文本 : 普通文本指的是只有文字没有图片 ,视频, 音乐,而超文本就有 标记语言 : 由标签构成的语言 HTML的标签都是预定好的, 如<a> </a> 为超链接 HTML代码直接在浏览器中运行,由浏览器内核进行解…

C++自定义String类

自定义一个String类型,该类包含一个指向字符串的指针和一个统计对象数量的计数器. 代码如下: //string.h #pragma once //String类型 #include <iostream> using namespace std;class String { private:char* m_str;//保存字符串的地址static int num_strings;//创建的对…

Nginx服务的主配置文件及配置举例

Nginx服务的主配置文件 安装Nginx认识Nginx服务全局配置I/O 事件配置HTTP 配置日志格式设定 访问状态统计配置查看Nginx已安装模块修改 nginx.conf 配置文件重启服务&#xff0c;访问测试 基于授权的访问控制准备用户密码认证文件修改 nginx.conf 配置文件重启服务&#xff0c;…

Xcode下载安装

1.Xcode可用版本判断&#xff1a; 2.Xcode下载安装&#xff1a; 方案1:AppStore 下载更新 若方案1失败则 方案2:指定版本Xcode包下载解压安装 苹果下载 3.Xcode命令行工具插件安装 xcode-select --install 备注&#xff1a; xcode_x.x.x.xip(压缩包存在时效性(使用前24h/…

【目录扫描】feroxbuster v2.10.2 字典整合版

# 简介 Feroxbuster是一款强大的目录扫描工具&#xff0c;Feroxbuster的主要功能是基于字典的目录扫描&#xff0c;并且默认使用Seclists字典进行使用&#xff01;并且具有快速和高效的特点&#xff0c;采用了多线程的技术来加快扫描速度。还支持暂停交互式设置等&#xff01;…

从一个猜数游戏开始

标题 一、从源码中学习1.1 源码1.2 运行结果 二、 导入一个trait三、重要源码分析 一、从源码中学习 1.1 源码 一个简单的猜数大小游戏&#xff0c;不集的输入&#xff0c;直到猜测正确时退出。 use rand::Rng; use std::cmp::Ordering; use std::io;fn main() {let secret_…