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

2023-12-27 09:36:28

目录

1.引入echarts.min.js

2.在 JSP 页面中创建一个具有指定 id 的元素，用于容纳 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>

文章来源:https://blog.csdn.net/qq_55946937/article/details/135235894
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。