$(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>
echart require js callback
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=327079071&siteId=291194637
Recommended
Ranking