ECharts动态数据加载

番茄西红柿发布于2019-04-23 13:26 / 2250人阅读

摘要：最近有用到做可视化报表，小结一下一准备数据官网下载引入请求用的数据和平区河西区河东区河北区南开区二整体代码为准备一个具备大小宽高的单文件引入显示标题，图例和空的坐标轴异步数据加载示例

　　最近有用到ECharts做可视化报表，小结一下

一、准备数据

　　1.官网下载echarts.min.js

　　2.引入jquery.js

　　3.请求用的json数据

{
    "list":[
        {
            "department":"和平区",
            "num":480,
            "ber":200
        },
        {
            "department":"河西区",
            "num":380,
            "ber":460
        },
        {
            "department":"河东区",
            "num":366,
            "ber":223
        },
{
            "department":"河北区",
            "num":320,
            "ber":210
        },
{
            "department":"南开区",
            "num":300,
            "ber":200
        }
    ]
}

二、整体代码

DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>EChartstitle>
head>

<body>
    
    <div id="traceProvinceOrder" style="width:400px; height:400px;">div>
    
    <script src="echarts.min.js">script>
    <script src="../webapp/js/jquery.js">script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById(traceProvinceOrder));
        // 显示标题，图例和空的坐标轴
        myChart.setOption({
            title: {
                text: 异步数据加载示例
            },
            color: ["pink", red],
            tooltip: {},
            legend: {
                data: [发布排行, 牵手排行],
                x:70%
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                    barWidth: "20px",
                    name: 发布排行,
                    type: bar,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: top,
                                textStyle: {
                                    color: #333
                                }
                            }
                        }
                    },
                    data: []
                },
                {
                    barWidth: "20px",
                    name: 牵手排行,
                    type: bar,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: top,
                                textStyle: {
                                    color: #333
                                }
                            }
                        }
                    },
                    data: []
                }
            ]
        });
        myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
        var names = []; //类别数组（实际用来盛放X轴坐标值）
        var nums = []; //销量数组（实际用来盛放Y坐标值）
        var bers = []; //销量数组（实际用来盛放Y坐标值）
        $.ajax({
            type: get,
            url: city.json, //请求数据的地址
            dataType: "json", //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $.each(result.list, function (index, item) {
                    names.push(item.department); //挨个取出类别并填入类别数组                    
                    nums.push(item.num); //挨个取出销量并填入销量数组
                    bers.push(item.ber); //挨个取出销量并填入销量数组
                });
                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({ //加载数据图表
                    xAxis: {
                        data: names
                    },
                    series: [{
                            // 根据名字对应到相应的系列
                            name: 发布排行, //显示在上部的标题
                            data: nums
                        },
                        {
                            // 根据名字对应到相应的系列
                            name: 牵手排行, //显示在上部的标题
                            data: bers
                        }
                    ]
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    script>
body>

　　一个简单的柱状图表展示

行动才是最具有价值，即使做错。——送给努力的你

GPU云服务器云服务器动态加载数据 js动态加载数据 ajax动态加载数据 js 动态加载数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1874.html

echarts动态获取数据实例

摘要：动态获取数据库的实时数据的简单实例。实例演示跳转引入文件。引入的文件方式有多种，比较推荐模块化的引入方式。小拽的简单是直接引入文件，提供一个下载地址点击下载部分代码一块用于的展现。 echarts动态获取数据库的实时数据的简单实例。实例演示：跳转demo 引入echarts 文件。引入echarts的文件方式有多种，比较推荐模块化的引入方式。小拽的简单demo是直接引入文件，提...

张宪坤 2019-06-27 11:47 评论0 收藏0
手拉手，用Vue开发动态刷新Echarts组件

摘要：静态组件开发因为被编程思想这篇文章毒害太深，所以笔者开发组件也习惯从基础到高级逐步迭代。静态组件要实现的目的很简单，就是把图表，渲染到页面上。实现动态刷新下一步我想大家都知道了，就是定时从后台拉取数据，然后更新父组件的就好。从几年前流行的jQuery插件，到现在React和Vue的组件，在业务需求的开发中抽象通用出通用的模块，一直都是一个对个人技术提高非常有帮助的事情。本文从一个真实...

justCoding 2019-08-22 15:36 评论0 收藏0
echarts图表显示隐藏 Can't get dom width or height

摘要：项目有一个需求，定时显示隐藏图标，刚开始是图表显示正常。原因可能是读取不到隐藏的高宽。在可视区域变化时重新调整，这时候如果处于隐藏状态，那么在时就读取不到节点的宽高，图表就无法显示。项目有一个需求，定时显示隐藏echarts图标，刚开始dom是display:block;图表显示正常。等到dom隐藏再显示的时候图表还是正常，很好没有bug。可是当我在dom处于display:none...

I_Am 2019-08-26 13:48 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

zgbgx 2019-08-29 12:46 评论0 收藏0