<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. C# 将 HTML 转换为图片或 PDF

    首先是把 HTML 转换为图片. public partial class Form1 : Form { public Form1() { InitializeComponent(); } WebBr ...

  2. [笔记] Ubuntu 18.04源码编译安装OpenCV 4.0流程

    标准常规安装方法安装的OpenCV版本比较低,想尝鲜使用4.0版本,只好源码安装. 安装环境 OS:Ubuntu 18.04 64 bit 显卡:NVidia GTX 1080 CUDA:10.0 c ...

  3. [笔记]Delphi 2007写DLL供VC调用实例

    考虑如下几种常用情况: - VC传入int,返回int- VC传入char *,返回int- VC传入char *,返回char *及int 为简化问题,传递的字符串参数只考虑ANSI格式,不考虑UN ...

  4. APP移动端开发html模板

    移动端开发模板: 750的稿子除以75: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  5. Selenium（Webdriver）自动化测试常问到的问题解答（转自：潜龙0318）

    今天朋友问我了几个关于Selenium自动化测试的问题,我看了一下感觉还比较典型.结合我以往自动化测试的经验,给出了一些儿粗浅的答案,希望能帮大家,如果大家有什么好的看法,希望相互交流,相互学习! ( ...

  6. nginx添加新模块

    1.下载模块 git clone https://github.com/agentzh/echo-nginx-module 2.放入指定位置 mv echo-nginx-module-master / ...

  7. docker issue-Cannot connect to the Docker daemon. Is 'docker -d' running on this host?

    Here is my docker version when i run docker version : Client: Version: 1.8.1 API version: 1.20 Go ve ...

  8. Poi读取Excle报错 java.util.zip.ZipException: invalid stored block lengths

    一:Poi读取Excle报错  java.util.zip.ZipException: invalid stored block lengths 系统中需要导出excle签收单,excle模板是预设好 ...

  9. 基于tomcat集群做session共享

    前端代理服务器nginx:192.168.223.136 tomcat服务器:采用的一台多实例192.168.223.146:8081,192.168.223.146:8082(如何构建多实例tomc ...

  10. 20145328 《Java程序设计》实验五实验报告

    20145328 <Java程序设计>实验五实验报告 实验名称 Java网络编程 实验内容 用书上的TCP代码,实现服务器与客户端. 客户端与服务器连接 客户端中输入明文,利用DES算法加 ...