一篇让你学会springboot用echarts实现柱状图和饼状图查询

最新推荐文章于 2024-04-28 10:55:39 发布

置顶

VIP文章逆风浪1

最新推荐文章于 2024-04-28 10:55:39 发布

阅读量4.5k

点赞数 7

分类专栏：显示文章标签： javascript echarts java

本文链接：https://blog.csdn.net/weixin_53855709/article/details/114634133

版权

1.业务说明
让数据库数据用柱状图或者饼状图显示出来
2.柱状图
引入js

<script src="echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>

2.2柱状图实现
在页面上加一个跳转的按钮

<input type="button" value="柱状图" onclick="location.href='/doColumner'">

页面跳转以Ajax方式

/*
      跳转到柱状图前端页面
     */
    @RequestMapping("/doColumnar")
    public String doColumnar() {
   

        return "merch-min";
    }

merch-min.html页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:700px;"></div>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
   
        title: {
   
            text: '商品库存实时柱状图'
        },
        tooltip: {
   },
        legend: {
   
            data: ['库存']
        },
        xAxis: {
   
            data: []
        },
        yAxis: {
   },
        series: [{
   
            name: '销量',
            type: 'bar',
            data

最低0.47元/天解锁文章

逆风浪1

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
14
评论
一篇让你学会springboot用echarts实现柱状图和饼状图查询

1.业务说明让数据库数据用柱状图或者饼状图显示出来2.柱状图引入js<script src="echarts.min.js"></script><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></s
复制链接

扫一扫