zoukankan      html  css  js  c++  java
  • ECharts展示后台数据

    /**
    * Created by Administrator on 2015/11/10 010.
    */

    var home = function () {

    //项目预警分析
    var getProAlarmData = function (type) {
    var postData = {"dictKey":"statistics_type"};
    $.ajax({
    "url":basicPath + "/admin/sys/report/getChartData",
    "type":"post",
    "contentType": "application/json",
    "data" : JSON.stringify(postData),
    "success":function(json){
    if(json.status = "SUCCESS") {

    var legend = [] ,
    xAxis = [] ,
    series = [] ;

    $(json.responseData).each(function(i ,e){
    if($.inArray(this.xAxis, xAxis) < 0 ) xAxis.push(this.xAxis);
    if($.inArray(this.series, legend) < 0 ) {
    legend.push(this.series);
    var indexs = series.length;
    series[indexs] = {};
    series[indexs].name = this.series;
    series[indexs].type = type;
    series[indexs].data = [];
    series[indexs].data.push(this.value);

    } else {
    var indexs = $.inArray(this.series, legend);
    if($.isEmptyObject(series[indexs])) {
    series[indexs] = {};
    series[indexs].data = [];
    }
    series[indexs].name = this.series;
    series[indexs].type = type;
    series[indexs].data.push(this.value);
    }
    });
    handleProAlarm(legend, xAxis, series);
    } else {}


    }
    });
    };


    //模块报警
    var getModuleAlarmData = function (type) {
    var postData = {"dictKey":"statistics_type"};
    $.ajax({
    "url":basicPath + "/admin/sys/report/getChartDataSeries",
    "type":"post",
    "contentType": "application/json",
    "data" : JSON.stringify(postData),
    "success":function(json){
    if(json.status = "SUCCESS") {

    var xAxis = [] ,
    series = [] ;

    $(json.responseData).each(function(i ,e){
    if($.inArray(this.xAxis, xAxis) < 0 ) xAxis.push(this.series);
    if($.inArray(this.series, series) < 0 ) series.push(this.value);

    });
    handleModuleAlarm(xAxis, series);
    } else {}


    }
    });
    };

    //项目报警
    var getAlarmData = function (type) {
    var postData = {"dictKey":"statistics_type"};
    $.ajax({
    "url":basicPath + "/admin/sys/report/getChartDataXaxisTop5",
    "type":"post",
    "contentType": "application/json",
    "data" : JSON.stringify(postData),
    "success":function(json){
    if(json.status = "SUCCESS") {

    var legend = [] ,
    series = [] ;

    $(json.responseData).each(function(i ,e){
    if($.inArray(this.xAxis, legend) < 0 ) legend.push(this.xAxis);
    series.push({"name":this.xAxis, "value": this.value});

    });
    handleAlarm(legend, series);
    } else {}


    }
    });
    };

    //地图数据
    var getMapData = function (type) {
    var postData = {"dictKey":"statistics_type"};
    $.ajax({
    "url":basicPath + "/admin/sys/report/getChartDataXaxis",
    "type":"post",
    "contentType": "application/json",
    "data" : JSON.stringify(postData),
    "success":function(json){
    if(json.status = "SUCCESS") {

    var geoCoord = {} ,
    series = [] ;

    $(json.responseData).each(function(i ,e){
    //geoCoord.push(this.xAxis+":"+this.value);
    var xy = String(this.xy).split(','),
    location = [];
    location[0] = xy[0];
    location[1] = xy[1];
    geoCoord[this.xAxis] = location;
    series.push({"name":this.xAxis, "value": this.value});

    });
    //console.log(geoCoord);
    //console.log(series);
    handleMap(geoCoord, series);
    } else {}


    }
    });
    };

    //初始化地图数据
    var handleMap = function (geoCoord, series) {

    var option = {
    title : {
    text: '全国项目分布图',
    x:'center'
    },
    tooltip : {
    trigger: 'item',
    formatter: "{b} : {c}"
    },

    dataRange: {
    min : 0,
    max : 100,
    calculable : true,
    color: ['maroon','purple','red','orange','yellow','lightgreen']
    },

    series : [
    {
    name: '项目',
    type: 'map',
    mapType: 'china',
    hoverable: false,
    roam:true,
    data : [],
    markPoint : {
    symbolSize: 5, // 标注大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
    itemStyle: {
    normal: {
    borderColor: '#87cefa',
    borderWidth: 1, // 标注边线线宽,单位px,默认为1
    label: {
    show: false
    }
    },
    emphasis: {
    borderColor: '#1e90ff',
    borderWidth: 5,
    label: {
    show: false
    }
    }
    },
    data : series
    },
    geoCoord: geoCoord
    }
    ]
    };

    myChart = echarts.init($("#site_project")[0]);
    window.onresize = myChart.resize;
    myChart.setOption(option, true)

    };


    //初始化
    var handleAlarm = function (legend, series) {

    var option = {
    title : {
    text: '项目设备报警分析TOP5',
    x:'center'
    },
    tooltip : {
    trigger: 'item',
    formatter: "{a} : {c}"
    },
    legend: {
    //orient : 'horizontal',
    orient : 'vertical',
    x : 'right',
    //y : 'bottom',
    data:legend
    },

    series : [
    {
    name:'报警数',
    type:'pie',
    radius : '55%',
    center: ['50%', '60%'],
    data:series
    }
    ]
    };


    myChart = echarts.init($("#site_alarm")[0]);
    window.onresize = myChart.resize;
    myChart.setOption(option, true)
    };


    //初始化模块报警分析
    var handleModuleAlarm = function (xAxis, series) {
    var option = {
    title : {
    text: '模块报警分析',
    x:'center'
    },
    tooltip : {
    trigger: 'axis'
    },
    xAxis : [
    {
    type : 'category',
    data : xAxis
    }
    ],
    yAxis : [
    {
    type : 'value'
    }
    ],
    series : [
    {
    name:'报警量',
    type:'bar',
    data:series

    }
    ]
    };


    myChart = echarts.init($("#site_modalalarm")[0]);
    window.onresize = myChart.resize;
    myChart.setOption(option, true)

    };

    //初始化项目报警分析
    var handleProAlarm = function (legend, xAxis, series) {
    var option = {
    title : {
    text: '项目报警分析',
    x:'center'
    },
    tooltip : {
    trigger: 'axis'
    },
    legend: {
    y: 'bottom',
    data:legend
    },

    xAxis : [
    {
    type : 'category',
    boundaryGap : false,
    data : xAxis
    }
    ],
    yAxis : [
    {
    type : 'value'
    }
    ],
    series : series
    };

    myChart = echarts.init($("#site_proalarm")[0]);
    window.onresize = myChart.resize;
    myChart.setOption(option, true)

    };


    return {
    init:function(){
    //handleMap();
    getMapData();
    //handleAlarm();
    getAlarmData();
    //handleModuleAlarm();
    getModuleAlarmData('bar');
    //handleProAlarm();
    getProAlarmData('line');
    }
    }
    }();

  • 相关阅读:
    邮票面值设计(codevs 1047) 题解
    练习 : 生成器和模块
    练习 : 数据类型之字符串
    练习 : 函数基础
    练习 : 高阶函数
    练习 : 数据类型之列表
    练习 : 数据类型之元组
    练习 : 数据类型之字典
    练习 : 分支结构和循环结构
    练习 : 变量和运算符
  • 原文地址:https://www.cnblogs.com/JaxYoun/p/5760479.html
Copyright © 2011-2022 走看看