Echart实现柱状图，折线图（附java后台代码）

最新推荐文章于 2023-06-13 16:56:18 发布

一元一次方程

最新推荐文章于 2023-06-13 16:56:18 发布

阅读量2.2k

点赞数 1

分类专栏： Echarts

本文链接：https://blog.csdn.net/qq_37779271/article/details/84772324

版权

这篇博客分享了作者的实际工作经验，通过Echarts创建柱状图和折线图，并提供了Java后台的实现代码。包括js源码、jsp展示以及Echarts.java、Series.java两个工具类和controller层的部分代码。

摘要由CSDN通过智能技术生成

此篇博客内容主要是本人实际工作经验。话不多说，直接附上具体实现图

在这里插入图片描述

1. 因js原图太长，所以直接附上js源码（getData方法中的一些参数可以对应原图效果查看其作用）

<script type="text/javascript">
    $(function () {
        getData();
        dateFormat();
    });

        function getData() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('line'));
            // 指定图表的配置项和数据
            var option = {
                title : {
                    text : '集群统计折线图'
                },
                tooltip : {
                    show : true,
                    trigger : 'axis'
                },
                legend : {
                    data : [ "内存M" ]
                    //图例
                },
                dataZoom : [ {
                    type : 'inside', //支持鼠标滚动缩放
                    start : 0, //默认数据初始缩放范围为10%到90%
                    end : 100
                } ],
                toolbox : {
                    show : true,
                    feature : {
                        mark : {
                            show : true
                        },
                        dataView : {
                            show : true,
                            readOnly : false
                        },
                        magicType : {
                            show : true,
                            type : [ 'bar', 'line' ]
                        },
                        restore : {
                            show : true
                        },
                        saveAsImage : {
                            show : true
                        }
                    }
                },
                calculable : true,
                xAxis : [ {
                    name : '日期/天',//X轴提示
                    type : 'category',