zoukankan      html  css  js  c++  java
  • echarts在miniUI和ajax下动态渲染数据

        <script src="echarts.js"></script>
        <script src="jquery-3.3.1.min.js"></script>
    </head>
    <body>
    
        <div id="traceProvinceOrder" style=" 100%;height:400px;"></div>
        
        <script>
    function loadOneColumn() {
    
    
        var myChart = echarts.init(document.getElementById('traceProvinceOrder'));
        // 显示标题,图例和空的坐标轴
        myChart.setOption({
            title: {
                text: '月销售分析'
            },
            tooltip: {},
            legend: {
                data: ['销售分析']
            },
            xAxis: {
                data: []
            },
            yAxis: {
                splitLine: { show: false },//去除网格线
                name: ''
            },
            series: [{
                barWidth: "30px",
                name: '销售分析',
                type: 'bar',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#333'
                            }
                        }
                    }
                },
                //data: []
            }]
        });
    
    
        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
    
    
        var names = [];    //类别数组(实际用来盛放X轴坐标值)
        var nums = [];    //销量数组(实际用来盛放Y坐标值)
            
         $.ajax({
            type: 'get',
            url: '${base}/scripts/json.txt',//请求数据的地址
            //url: '${base}/bd/bd_branch_info!getAllBranch.action',//请求数据的地址
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容,result即为服务器返回的json对象
                $.each(result.list, function (index, item) {
                    names.push(item.department);    //挨个取出类别并填入类别数组                    
                    nums.push(item.num);    //挨个取出销量并填入销量数组
                });
    
    
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis: {
                        data: names
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '发布排行',  //显示在上部的标题
                        data: nums
                    }]
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    };
    loadOneColumn();    
    
    
        </script>

    以上是用ajax请求数据进行动态渲染,数据返回格式为json:

    {
        "list":[
            {
                "department":"和平区",
                "num":480
            },
            {
                "department":"河西区",
                "num":380
            },
            {
                "department":"河东区",
                "num":366
            },
    {
                "department":"河北区",
                "num":320
            },
    {
                "department":"南开区",
                "num":300
            }
        ]
    }

    ——————————————————分割线—————————————————分割线——————————————————————————————-————

    miniUI下的echarts

    因为这个项目里,所有引入文件都被写在header文件里了,在ftl文件引入无效,所有要找到控制header的文件,在里面改动,然后引入

      html.append("
    <script type="text/javascript" src="").append(base).append("/scripts/echarts.js"></script>");
        function search(){
                var data;
                var year = date.getText()
                if (year==""){
                    mini.alert("请选择时间")
                    return
                }
                grid.load({ //这里用miniUI提供的查询方法直接就可以查到值, 可以省去发送ajax的步骤,所以直接从官网搜来echarts的基本使用样例
                    year:year,
                    branch:mini.get("branchNo").getValue(),
                branchArea:mini.get("branchArea").getValue()
                },function(){ //要取到后台返回来的值 只能用这个写法, 且上一歌{}内是发送过去的,这里的是返回来的
    
                    data = grid.getData(); //取到data    
                    console.log(data[0].sumSaleAmt9);        
                    
                    //引入echarts
                    var myChart = echarts.init(document.getElementById('traceProvinceOrder'));
                    //console.log(myChart)
                    
            var option = {
                title: {
                    text: '月销售报表'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: { //这里是写死了x轴的数量
                    data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
                },
                yAxis: {}, 
                series: [{  //从返回来的数据中取到sumSaleAmt这个值,代表了从1-12个月的销售额
                    name: '销量',
                    type: 'bar',
                    data: [data[0].sumSaleAmt1,data[0].sumSaleAmt2,data[0].sumSaleAmt3,data[0].sumSaleAmt4,data[0].sumSaleAmt5,data[0].sumSaleAmt6,data[0].sumSaleAmt7,data[0].sumSaleAmt8,data[0].sumSaleAmt9,data[0].sumSaleAmt10,data[0].sumSaleAmt11,data[0].sumSaleAmt12]
                }]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
                    
                })
            }
  • 相关阅读:
    Spring基础知识
    Hibernate基础知识
    Struts2基础知识
    在eclipse里头用checkstyle检查项目出现 File contains tab characters (this is the first instance)原因
    java后台获取cookie里面值得方法
    ckplayer 中的style.swf 中的 style.xml 中的修改方法
    java hql case when 的用法
    Windows下Mongodb安装及配置
    Mongodb中经常出现的错误(汇总)child process failed, exited with error number
    Mac 安装mongodb
  • 原文地址:https://www.cnblogs.com/code-klaus/p/8566339.html
Copyright © 2011-2022 走看看