JSP使用eharts实现数据可视化图表

目录

1.引入echarts.min.js

[2.在 JSP 页面中创建一个具有指定 id 的](#2.在 JSP 页面中创建一个具有指定 id 的)[元素,用于容纳 Echarts 图表。](#元素,用于容纳 Echarts 图表。)
[3.在 JSP 页面的 JavaScript 部分,编写具体的 Echarts 图表代码。(柱状图)](#3.在 JSP 页面的 JavaScript 部分,编写具体的 Echarts 图表代码。(柱状图))


1.引入echarts.min.js
复制代码
<head>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
2.在 JSP 页面中创建一个具有指定 id 的 <div> 元素,用于容纳 Echarts 图表。
复制代码
    <div id="chart1" style="width: 500px; height: 300px;display: inline-block;"></div>
3.在 JSP 页面的 JavaScript 部分,编写具体的 Echarts 图表代码。(柱状图)
复制代码
<script>
    // 获取 chartContainer 元素并创建 Echarts 实例
    var myChart1 = echarts.init(document.getElementById('chart1'));

    // 定义图表配置项和数据
        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: '当日销售数量', // 标题内容
                left: 'center' // 标题水平居中
            },
            xAxis: {
                type: 'category',
                data: group1,//后端传回来的数组集合
                axisLabel: {
                    rotate: -45
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: group2,//后端传回来的数组集合
                type: 'bar',
                label: {
                    show: true,
                    position: 'top'
                }
            }]
        };

    // 使用刚指定的配置项和数据显示图表
     myChart1.setOption(option1);
</script>
相关推荐
长风破浪会有时呀1 分钟前
记一次接口优化历程 CountDownLatch
java
云朵大王26 分钟前
SQL 视图与事务知识点详解及练习题
java·大数据·数据库
nightunderblackcat33 分钟前
新手向:使用Python将多种图像格式统一转换为JPG
开发语言·python
我爱Jack1 小时前
深入解析 LinkedList
java·开发语言
engchina1 小时前
Python PDF处理库深度对比:PyMuPDF、pypdfium2、pdfplumber、pdfminer的关系与区别
开发语言·python·pdf
拓端研究室1 小时前
专题:2025供应链数智化与效率提升报告|附100+份报告PDF、原数据表汇总下载
开发语言·php
一百天成为python专家1 小时前
python库之jieba 库
开发语言·人工智能·python·深度学习·机器学习·pycharm·python3.11
Go Dgg2 小时前
【Go + Gin 实现「双 Token」管理员登录】
开发语言·golang·gin
27669582922 小时前
tiktok 弹幕 逆向分析
java·python·tiktok·tiktok弹幕·tiktok弹幕逆向分析·a-bogus·x-gnarly
十五年专注C++开发2 小时前
hiredis: 一个轻量级、高性能的 C 语言 Redis 客户端库
开发语言·数据库·c++·redis·缓存