<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下动态渲染数据的更多相关文章

  1. ajax获取动态列表数据后的分页问题

    ajax获取动态列表数据后的分页问题 这是我在写前台网站时遇到的一个分页问题,由于数据是通过ajax的方式来请求得到的,如果引入相应的js文件来做分页,假如只是静态的填放数据到列表各项内容中(列表条数 ...

  2. vue 动态渲染数据很慢或不渲染

    vue 动态渲染数据很慢或不渲染 原因是因为vue检测速度很慢,因为多层循环了,在VUE 2.x的时候还能渲染出来,1.x的时候压根渲染不出来.解决方式:在动态改变数据的方法,第一行加上 this.$ ...

  3. ListView实现下拉动态渲染数据

    欢迎讨论欢迎一起学习:微信jkxx123321 这是一篇关于LIstView实现动态数据渲染的文章![RN] 首先我们讲讲数据是如何来规划的 一般情况下我们有两种规划方案前提比如我们数据是100条+ ...

  4. Vue电商后台管理系统项目第2天-首页添加表格动态渲染数据&分页

    0x01.使用Github学习的姿势 基于昨天的内容,今天的内容需要添加几个单文件组件,路由文件也需要做相应的增加,今天重点记录使用Element-UI中的表格组件实现数据动态渲染的实现流程和分页功能 ...

  5. Echarts Binning on map 根据真实经纬度渲染数据

    要渲染的数据:[经度,维度,值] 例如: var data = [[116.420691626, 39.4574061868, 63],[116.423620497, 39.4574061868, 2 ...

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

    因为之前帮WM组做了一个delivery的dashboard,大概用了3周的时间,.net也忘了差不多了,ajax和highchart表也是现学的,蛮费劲!总算也搞出来了.发帖纪录一下. 1. 前台A ...

  7. 基于JS正则实现模板数据动态渲染

    最近业务上需要动态渲染模板数据: 一.业务需求: 1.前端后端定义好模板以及变量名,根据打印机类型转换成对应sdk需要的标签模板,保存数据库 2.订单数据是前端根据支付结果获取的,最终渲染完的数据模板 ...

  8. echarts通过ajax动态获取数据的方法

    echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...

  9. 使用Python的Flask框架，结合Highchart，动态渲染图表(Ajax 请求数据接口)

    参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...

随机推荐

  1. 手写ArrayList、LinkedList

    ArrayList package com.hjp.labs; import org.omg.CORBA.PRIVATE_MEMBER; /* 一.ArrayList的底层是Object类的数组,默认 ...

  2. Unity状态机的实现，以《塔防》为例

    什么是有限状态机? 通俗点讲,有限状态机是:将对象的状态(攻击.闲置.晕眩)的实现代码,提取出来,封装成状态.由状态机负责在各个状态之间调度. 对象持有状态管理类(状态机)的引用,与具体的状态解耦. ...

  3. MVP架构学习

    MVP架构学习 M:数据层(数据库,文件,网络等...) V:UI层(Activity,Fragment,View以及子类,Adapter以及子类) P:中介,关联UI层和数据层,因为V和M是相互看不 ...

  4. Linux 日志分析工具（logwatch）安装及使用

    Linux 日志分析工具(logwatch)安装及使用 日志是非常重要的系统文件,管理员每天的重要工作就是分析和查看服务器的日志,判断服务器的健康状态.但是日志管理又是一项非常枯燥的工作,如果需要管理 ...

  5. ABP官方文档翻译 1.6 OWIN集成

    OWIN集成 安装 使用 如果在应用程序里既使用ASP.NET MVC也使用ASP.NET Web API,需要在工程里安装Abp.Owin包. 安装 添加Abp.Owin包到主工程里(一般是web工 ...

  6. OpenStack之Glance模块

    一.Glance服务 1.Glance架构 Glance架构是一个典型的CS架构,提供的也是标准的Rest接口,各个layer分层也是很清楚的. 2.Glance服务 Glance是OpenStack ...

  7. oracle中的异常处理方法

    异常处理create or replace procedure prc_get_sex (stuname student.name%type) as stusex student.sex%type; ...

  8. JavScript 日期格式化

    JavScript 日期格式化 //日期格式化 function formatDate(date,fmt) { if(date == null || typeof (date) == undefine ...

  9. 20145303 《Java程序设计》第7周学习总结

    20145303 <Java程序设计>第7周学习总结 教材学习内容总结 时间的度量 格林威治标准时间(GMT),现已不作为标准时间使用,即使标注为GMT(格林威治时间),实际上谈到的的是U ...

  10. 20145322《Java程序设计》第十周学习总结

    20145322<Java程序设计>第十周学习总结 教材学习内容总结 网络概述 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或 ...