简单echarts数据库加载数据用例

最新推荐文章于 2024-06-03 23:02:52 发布

炫蓝蔷薇

最新推荐文章于 2024-06-03 23:02:52 发布

阅读量2.6k

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/aa_kl/article/details/81135452

版权

java 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

echarts的简单柱状图应用，数据库动态加载相应数据

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.js" ></script>
    <script src="/js/jquery.min.js"></script>

</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></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: []
        },{
            name: '单价',
            type: 'bar',
            data: []
        }]
    });

    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

    var pics=[];
    var names=[];    //类别数组（实际用来盛放X轴坐标值）
    var nums=[];    //销量数组（实际用来盛放Y坐标值）

    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url :"/echart/bar",    //请求发送到TestServlet处
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
                for(var i=0;i<result.length;i++){
                    names.push(result[i].commodityName);    //挨个取出类别并填入类别数组
                }
                for(var i=0;i<result.length;i++){
                    nums.push(result[i].inventoryNum);    //挨个取出库存并填入销量数组
                }
                for(var i=0;i<result.length;i++){
                    pics.push(result[i].unitprice);    //挨个取出单价并填入销量数组
                }
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis: {
                        name:'果蔬名',
                        data: names
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '库存',
                        data: nums
                    },{
                        // 根据名字对应到相应的系列
                        name: '单价',
                        data: pics
                    }]
                });

            }

        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })
</script>
</body>
</html>

cotroller

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fru.fruits.domain.CommodityDO;
import com.fru.fruits.service.CommodityService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/echart")
public class EchartsController {
        @Autowired
        private CommodityService commodityService;
    /**
     * 柱状图 图表option 的封装
     * 
     */
    @RequestMapping(value = "/bar",method = RequestMethod.POST)
    @ResponseBody()
    public String bar() throws JsonProcessingException {
        List<CommodityDO> commoditis = commodityService.list1();
        ObjectMapper mapper = new ObjectMapper();    //提供java-json相互转换功能的类
        String json = mapper.writeValueAsString(commoditis);    //将list中的对象转换为Json格            式的数组
        return json;
    }
}

业务层及dao和实体不再做赘述了

炫蓝蔷薇

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
简单echarts数据库加载数据用例

echarts的简单柱状图应用，数据库动态加载相应数据html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;ECharts&lt;/title&gt; &lt;!-- 引入 ech
复制链接

扫一扫