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);

            })
        }

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

时间: 2024-10-09 16:35:43

echarts在miniUI和ajax下动态渲染数据的相关文章

ASP.NET&amp;AJAX&amp;JSON - 动态读取数据

因为之前帮WM组做了一个delivery的dashboard,大概用了3周的时间,.net也忘了差不多了,ajax和highchart表也是现学的,蛮费劲!总算也搞出来了.发帖纪录一下. 1. 前台ASPX页面<Javascript>(下面ajax的代码可以存在与某个JS事件中触发,将其包含在事件代码里) $.getJSON("Handler4.ashx", {"param": a, "param1":b }, function (d

动态渲染数据到表格中

<script> //兼容方案 // var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP'); var xhr = new XMLHttpRequest(); xhr.open('GET', 'test.php'); xhr.send(); xhr.onreadystatechange = function () { if (this.readyState !== 4)

for 循环遍历数据动态渲染html

本案例通过ajax动态获取数据,然后遍历出数据渲染html小心踩坑:因为有时候不注意,渲染页面的时候只能输出最后一个数据所以正确写法为下:如果AJAX数据请求成功的情况下: html <div class="recommend-list"> <ul> <li> <div> <p class="recommend-h"></p> <p class="getTime">

使用selenium动态渲染爬取拉勾网上450个java职位的信息

开始这个小项目的时候要确保你的电脑中有装上selenium以及相应的浏览器驱动,还有别忘了Mongodb数据库 我们首先打开拉勾网的官网查看下基本的页面元素 当我在搜索框中输入java的时候,url如下,当我想用下面的url进行抓取的时候,我发现事情并不简单. 我点击下一页的时候发现,url并没有变化,所以并不能用最基本的抓取方法了,而改为ajax请求进行抓取 当我查看ajax请求的时候,发现事情又不简单的了,这个分页的请求带的参数时Form data,也就是表单形式的参数, 所以,拉勾网上的a

python--Selenium(动态渲染页面爬取)

上一节,学习了Ajax,Ajax 其实也是JS 动态渲染的页面的一种形式,通过直接分析Ajax,仍然可以借助requests  或者 urllib 来实现数据爬取. 但是JS动态渲染的页面不止Ajax 一种:还有就是像淘宝这种页面,即使是Ajax 获取的数据,但是其Ajax 接口含有很多加密参数,我们直接很难找出其规律,,也就很难直接分析Ajax 来抓取. 为了解决这些问题,可以直接使用模拟浏览器运行的方式来实现,这样就可以做到在浏览器中看到是什么样,抓取的源码就是什么样,也就是可见及可爬.这样

JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案

这是个小菜在实际工作中遇到的问题,相信很多EasyUI新手很可能也遇到这样的问题,因此小菜觉得有必要拿出来分享一下. 这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$("#id").val()这种形式,居然拿不到文本框的值! 经过度娘的帮助,发现可以用$("#id").datebox('getValue'),但是这是为什么捏? 经过一翻研究和探索,小菜发现,如果一个input加上class="easyui-datebox&q

使用MVVM框架时,如何处理在页面动态渲染完之后需要发生的事件呢?

在项目实践过程中,当我们使用如avalon这样的MVVM框架时,通常会发现一直会有个问题. 过往的经验告诉我们,想在页面加载完之后处理些事件我们可以绑定document的ready方法或者使用jquery的$(function{})去处理. 但是,如果在页面中数据有些时动态渲染的呢,这些数据不一定时在页面加载完之后就存在,而是页面加载完之后,由于业务需求,我们可能还需要去ajax后台重新渲染某些页面, 这个时候我们可以将页面需要动态渲染的元素绑定一个事件,如下: 1 $("变化的元素选择器&qu

Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容

在上一篇python使用xslt提取网页数据中,要提取的内容是直接从网页的source code里拿到的. 但是对于一些Ajax或动态html, 很多时候要提取的内容是在source code找不到的,这种情况就要想办法把异步或动态加载的内容提取出来. python中可以使用selenium执行javascript,selenium可以让浏览器自动加载页面,获取需要的数据.selenium自己不带浏览器,可以使用第三方浏览器如Firefox, Chrome等,也可以使用headless浏览器如P

Unity3d热更新全书-加载(二)如何在不用AssetBundle的前提下动态加载预设

Unity3D的主要构成大家都知道,首先是场景图,场景图上的节点构成一颗树. 每个节点对应一个GameObject对象 然后每个GameObject有若干个组件 有一些组件会与资源产生关系,比如MeshRenderer会关联材质,材质会关联shader和贴图 场景图的一部分可以被保存为一个预设,prefab. 有时候我们会需要用预设去复用,而预设的加载似乎只能通过AB去打包,其实不然,这里我们有一个开源的库就可以解决这个问题. 为什么不使用AB,可以见上一篇,加载(一),不使用AB一份资源全平台