`
y806839048
  • 浏览: 1121103 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

echart require js 回调

 
阅读更多
$(function(){
$('#portal').portal({
fit: true,
border: false,
fixheight: 9
});

// 为面板添加最大化按钮
$(".maximizable").each(function(i,n){
var node = $(n).find("div.portal-content");
var param = '"'+node.attr("id")+'","'+node.attr("type")+'"';
$(n).prev("div.panel-header")
.find("div.panel-tool")
.append('<a class="panel-tool-max" href="javascript:void(0);" onclick=maxPanel('+param+');/>');
});

//初始化的时候就调用这个
    // 全网运行图
//这个目录是项目中echart目录,省去了.这个自动会加上

require(['echarts','echarts/chart/map'],DrawEChart);
    // 资源统计
        require(['echarts','echarts/chart/bar'],sourceArea);
    // 告警统计
        require(['echarts','echarts/chart/bar'],alarmArea);
    // 用户节点统计
    require(['echarts','echarts/chart/force'],userArea);
    // 事件工单
require(['echarts','echarts/chart/pie'],eventArea);
});

<script src="${ctx}/resources/scripts/echarts/build/dist/echarts.js"></script>

//这段指定了js回调中的关键路径

<script type="text/javascript">
require.config({
            paths: {
                echarts: '${ctx}/resources/scripts/echarts/build/dist'
            }
        });
        var areaName = "all";
     var areaTitle = "";
    </script>



//这里是回调的函数体

<script type="text/javascript">
var myChart;

//ec直接用require的值做为上下文的参数

        function DrawEChart(ec) {
        myChart = ec.init(document.getElementById('mainMap'));

//这里的路径是通用的可能是框架中的      
require('echarts/util/mapData/params').params.上海 = {
    getGeoJson: function (callback) {
       $.getJSON('${ctx}/resources/scripts/echarts/build/sh.jsonp', callback);
    }

//这里的路径是通用的可能是框架中的 
var ecConfig = require('echarts/config');

//注册监听事件,达到一点击其他的图形函数都渲染,其他的区域参数用脚本的全局变量,公用

myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){

    areaName = param.target;
    areaTitle = param.target;
    // 全网运行图
require(['echarts','echarts/chart/map'],DrawEChart);
    // 资源统计
        require(['echarts','echarts/chart/bar'],sourceArea);
    // 告警统计
        require(['echarts','echarts/chart/bar'],alarmArea);

//重载工单汇总
require(['echarts','echarts/chart/pie'],eventArea);
require(['echarts','echarts/chart/pie'],faultArea);
//重载用户节点告警
getAreaData(areaName);

});
var errorCountData = [];
$.ajax({
url:'${ctx}/current-alarm!netMapControl.json',
type:'POST',
async:false,
success:function(result){
errorCountData = result.data;
}
});

option = {
    title: {
        text : '全网运行图',
        subtext : areaTitle
    },
    tooltip : {
        trigger: 'item',
        formatter: '{b}:{c}个'
    },
    dataRange: {
        x : 'right',
        orient : 'vertical' ,
        min: 1,
        max: 20,
        color: ['red','yellow'],
        calculable : true
    },
    roamController: {
        show: true,
        x: 'right',
        mapTypeControl: {
            '上海': true
        }
    },
    toolbox: {
        show : true,
        orient: 'horizontal',
        x: 'left',
        y: 'bottom',
        feature : {
            dataView : {show: true, readOnly: false},
            myTool : {
                show : true,
                title : '刷新',
                icon : 'refresh.png',
                onclick : function (){
    areaName = "all";
    areaTitle = "";
// 全网运行图
require(['echarts','echarts/chart/map'],DrawEChart);
    // 资源统计
require(['echarts','echarts/chart/bar'],sourceArea);
    // 告警统计
require(['echarts','echarts/chart/bar'],alarmArea);
    //重载用户节点告警
getAreaData(areaName);
    // 事件工单
require(['echarts','echarts/chart/pie'],eventArea);
                }
            },
            saveAsImage : {show: true}
          
        }
    },
    calculable : true,
    series : [
        {
            name: '全网运行图',
            type: 'map',
            mapType: '上海',
            selectedMode : 'single',
            itemStyle:{
                normal:{label:{show:true},areaStyle:{color:'lightgreen'}},
                emphasis:{label:{show:true}}
            },
            data:errorCountData
        }
    ]
};
            myChart.setOption(option);
        }
    </script>
分享到:
评论

相关推荐

    require.js.rar

    `require(['module'], function(module) {...})`表示加载'module'模块并在回调函数中使用。`define('moduleName', ['dependency1', 'dependency2'], function() {...})`则定义了一个名为'modulesName'的模块,并列出...

    Javascript模块化编程(Require.js)

    6. **模块加载**:使用`require`函数加载模块并执行回调函数,通常在DOM加载完成后进行。 ```javascript require(['module1', 'module2'], function(module1, module2) { module1.method(); module2.method(); })...

    require.js插件-text.js使用

    加载完成后,回调函数会接收到文件内容。 text.js插件还支持动态加载,例如,根据用户的选择加载不同的模板: ```javascript var templateName = 'template1.html'; require(['text!' + templateName], function...

    require.js最新版2.3.5

    RequireJS不仅提供了模块化管理和异步加载,还支持插件系统,可以通过插件扩展其功能,如优化(r.js)、数据绑定(require-bind-dom)、CSS加载等。这些特性使RequireJS成为构建复杂前端应用的强大工具。 总之,...

    CallBack回调

    例如,在Node.js中,许多内置的API都采用回调函数来处理异步操作。以下是一个简单的例子,展示了如何使用回调处理文件读取: ```javascript const fs = require('fs'); // 定义回调函数 function readData(err, ...

    javascript高级模块化require.js的具体使用方法

    接下来,需要在HTML页面中引入Require.js库,并通过require函数指定需要加载的模块列表,以及成功加载后的回调函数: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/require.js"&gt; require([...

    echart百度地图全国所有省份的js

    在“echart百度地图全国所有省份的js”这个主题中,我们可以深入探讨以下几个知识点: 1. **ECharts集成百度地图**: ECharts自身并不内置地图数据,但可以通过扩展插件与百度地图API结合,实现地图的可视化。百度...

    require.js教程

    require()函数用于加载模块,可以在其参数中指定要加载的模块列表和一个回调函数,当所有指定模块加载完成后,回调函数将被执行。require.config()用于配置模块加载的参数,如模块的根目录(baseUrl)、模块路径...

    使用回调方式查询数据库记录

    总结来说,使用回调方式查询数据库记录是异步编程中的常见做法,尤其在Node.js和JavaScript中。虽然回调函数能有效地处理异步操作,但随着代码复杂性的增加,可能会导致代码难以维护。因此,学习和理解现代异步编程...

    require.js文件

    require.js用于模块化管理javascript的管理工具,非常实用

    require.js学习指南

    require.jsrequire.jsrequire.jsrequire.jsrequire.jsrequire.js

    如何将Node.js中的回调转换为Promise

    本文将探讨如何将Node.js中的回调函数转换为Promise,以便更好地利用现代JavaScript的特性。 首先,让我们理解回调函数的基本概念。回调函数是一个作为参数传递给其他函数的函数,尤其常用于异步操作。例如,Node....

    Javascript模块化编程(三)require.js的

    require.js会跟踪这些依赖,并在所有依赖加载完成后执行回调函数。 **模块加载:** 使用`require`函数可以加载模块。`require`接受一个配置对象,其中包含`deps`(依赖)和`callback`(回调函数)属性。例如: ```...

    require.js的用法详解

    require.js会按照指定顺序加载这些模块,然后执行回调函数,其中`$`、`_`和`Backbone`分别是对应模块的引用。 **五、模块定义** require.js支持两种模块定义方式:`define()`和`require.config()`。`define()`用于...

    require-css.js

    在非专业前端开发的工作中(比如使用vuejs开发),免不了要进行模块化,js的加载使用require.js就可以了,但是对于.css文件的加载需要使用插件,在试用了github上提供的require.js后发现不太好用(报错,还得改人家...

    require封装JS弹窗

    在`requireWidget`这个文件或目录中,可能包含了实现上述功能的各个模块,比如`popup.js`(弹窗主逻辑)、`styles.css`(样式文件)、`templates.js`(模板生成)、`callbacks.js`(回调处理)等。通过`require`将...

    require.js教程.模块化

    require.js教程.模块化 大家都知道js代码的面向对象鸡助得没话说 所以将js代码模块化是个很重要的技能 我们使用require.js来将我们写的代码封闭成模块 今天写个教程 requirejs教程,最后自动打包发布js模块文件

    require+r.js打包

    Require.js是一个流行的AMD(Asynchronous Module Definition)模块加载器,它允许我们在浏览器环境中按需加载JavaScript模块。而r.js是Require.js的一个配套工具,专门用于构建和优化项目,包括合并、打包和压缩JS...

    Node.js 回调函数实例详解

    Node.js 回调函数 阻塞与非阻塞 node.js 异步编程的直接体现就是回调。 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了。 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数,Node ...

Global site tag (gtag.js) - Google Analytics