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>
相关推荐
渣哥2 分钟前
Java 集合框架详解:常见集合类及分类方式
java
yinke小琪13 分钟前
消息队列如何保证消息顺序性?从原理到代码手把手教你
java·后端·面试
土了个豆子的20 分钟前
03.缓存池
开发语言·前端·缓存·visualstudio·c#
考虑考虑29 分钟前
Java实现墨水屏点阵图
java·后端·java ee
_extraordinary_32 分钟前
Java 多线程(一)
java·开发语言
网安Ruler34 分钟前
第49天:Web开发-JavaEE应用&SpringBoot栈&模版注入&Thymeleaf&Freemarker&Velocity
java·spring boot·后端
爱喝水的鱼丶40 分钟前
SAP-ABAP: ABAP ASSIGN COMPONENT 语句详解:动态字段符号的利器作用用法示例详解
运维·开发语言·sap·abap·开发经验·动态字段符号
励志不掉头发的内向程序员1 小时前
C++进阶——多态
开发语言·c++·学习
毕设源码-郭学长1 小时前
【开题答辩全过程】以电商数据可视化系统为例,包含答辩的问题和答案
信息可视化
奔跑吧邓邓子1 小时前
【Java实战㉟】Spring Boot与MyBatis:数据库交互的进阶之旅
java·spring boot·实战·mybatis·数据库交互