码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-03-14 12:41:28      阅读:491      评论:0      收藏:0      [点我收藏+]

标签:sea   option   search   amt   json   cep   分析   end   基本   

    <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下动态渲染数据

标签:sea   option   search   amt   json   cep   分析   end   基本   

原文地址:https://www.cnblogs.com/code-klaus/p/8566339.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!