echarts在miniUI和ajax下动态渲染数据

Posted krank

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts在miniUI和ajax下动态渲染数据相关的知识,希望对你有一定的参考价值。

    <script src="echarts.js"></script>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="traceProvinceOrder" style="width: 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("\\n<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);
                
            })
        }

 

以上是关于echarts在miniUI和ajax下动态渲染数据的主要内容,如果未能解决你的问题,请参考以下文章

echarts怎么配合ajax渲染数据

JQuery MiNiUI 多选多列下拉列表如何动态赋值。

jquery miniui新增表单时,某一项值是动态增加的怎么实现

java和python结合项目,实现ajax+echarts显示端口占用数监控

vue2+echarts:使用后台传输的json数据去动态渲染echarts图表

vue2+echarts:使用后台传输的json数据去动态渲染echarts图表