echart require js callback

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

// add a maximize button to the panel
$(".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+');/>');
});

//call this when initializing
    //the whole network running graph
//this directory is the project The echart directory is omitted. This will automatically add

require([' echarts','echarts/chart/map'],DrawEChart);
    // Resource statistics
        require(['echarts','echarts/chart/bar'],sourceArea);
    // alarm statistics
        require(['echarts','echarts/chart/bar'],alarmArea);
    // user node statistics
    require([ 'echarts','echarts/chart/force'],userArea);
    // Event Ticket
require(['echarts','echarts/chart/pie'],eventArea);
});

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

//This paragraph specifies the key path in the js callback

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



//Here is the function body of the callback

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

//ec directly uses the value of require as the context parameter

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

//The path here is generic and may be      
require('echarts/util/mapData/params').params.Shanghai = {
    getGeoJson: function (callback) {
       $. getJSON('${ctx}/resources/scripts/echarts/build/sh.jsonp', callback);
    }

//The path here is generic and may be 
var ecConfig = require('echarts/config') in the framework ;

//Register listening events, so that all other graphics functions are rendered at one click, and other area parameters use the global variables of the script, public

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

    areaName = param.target;
    areaTitle = param.target;
    // whole network running map
require(['echarts','echarts/chart/map'],DrawEChart);
    // resource statistics
        require(['echarts','echarts/chart/bar'] ,sourceArea);
    // Alarm statistics
        require(['echarts','echarts/chart/bar'],alarmArea);

//Overload work order summary
require(['echarts','echarts/chart/pie'], eventArea);
require(['echarts','echarts/chart/pie'],faultArea);
//Reload user node alarm
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);
    // alarm statistics
require(['echarts','echarts/chart/bar'],alarmArea);
    //Reload user node alarm
getAreaData(areaName);
    // Event ticket
require(['echarts','echarts/chart/pie' ],eventArea);
                }
            },
            saveAsImage : {show: true}
          
        }
    },
    calculable : true,
    series : [
        {
            name: 'full network operation map',
            type: 'map',
            mapType: 'Shanghai',
            selectedMode : ' single',
            itemStyle:{
                normal:{label:{show:true},areaStyle:{color:'lightgreen'}},
                emphasis:{label:{show:true}}
            },
            data:errorCountData
        }
    ]
};
            myChart.setOption(option);
        }
    </script>

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=327079071&siteId=291194637