E-chart图表显示单位

Posted 2020-11-26 wanlige

 

红色代码为单位数据代码，代码示例：

 

//自评与考核柱状图

checkoption = {

/*

 * title: { text: ‘自评与考核‘ },

 */

legend : {

left : 300,

top : -5

},

tooltip : {

trigger : ‘axis‘,

formatter : function(params) { // 自定义函数修改折线图给数据加单位

var str = ‘‘;// 声明一个变量用来存储数据

str += ‘<div>‘ + params[0].name + ‘</div>‘; // 显示日期的函数

for (var i = 0; i < params.length; i++) { // 图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位

if (i === 0) {

str += ‘<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>‘

+ params[i].seriesName

+ ‘</span> : <span>‘

+ (params[i].data ? params[i].data

+ ‘分‘

: ‘暂无‘) + ‘</br>‘;

} else {

str += ‘<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>‘

+ params[i].seriesName

+ ‘</span> : <span>‘

+ (params[i].data ? params[i].data

+ ‘分‘

: ‘暂无‘) + ‘</br>‘;
}

}


return str;

},

axisPointer : {

type : ‘cross‘,

crossStyle : {

color : ‘#999‘

}

}

},

// 调试图表距离边框位置

grid : {

x : ‘1%‘, // 相当于距离左边效果:padding-left

y : ‘12%‘, // 相当于距离上边效果:padding-top

right :‘3%‘,

bottom : ‘10%‘,

containLabel : true

},

xAxis : [ {

type : ‘category‘,

data : [ ‘1月‘, ‘2月‘, ‘3月‘, ‘4月‘, ‘5月‘, ‘6月‘, ‘7月‘,

‘8月‘, ‘9月‘, ‘10月‘, ‘11月‘, ‘12月‘ ],

axisLabel : {

show : true,

textStyle : {

color : ‘black‘,

fontSize : ‘13‘

}

}

} ],

yAxis : [ {

type : ‘value‘,

axisLabel : {

show : true,

textStyle : {

color : ‘black‘,

fontSize : ‘13‘

}

}

} ],

series : [

{

name : ‘自评‘,

type : ‘bar‘,

data : [ EvScores[0], EvScores[1], EvScores[2], EvScores[3], EvScores[4],

EvScores[5], EvScores[6], EvScores[7], EvScores[8], EvScores[9], EvScores[10],

EvScores[11]],

itemStyle : {

normal : {

color : ‘#62B62F‘,

barBorderRadius : 5,

borderWidth : 0

}

},

barWidth : ‘20%‘

},

{

name : ‘考核‘,

type : ‘bar‘,

data : [ ChScores[0], ChScores[1],

ChScores[2], ChScores[3], ChScores[4], ChScores[5],

ChScores[6], ChScores[7], ChScores[8],ChScores[9], ChScores[10], ChScores[11]],

itemStyle : {

normal : {

color : ‘#058088‘,

barBorderRadius : 5,

borderWidth : 0

}

},

barWidth : ‘20%‘

} ]

};//ehcart

checkChart.setOption(checkoption);


监管系统代码示例:

$(function() {

 

//环形设备统计图

initEqipmentCase();

//展厅统计初始化

initReception();

//时间选择框初始化

inittime();

// 信息总览图表echart初始化

initchart();

})

//环形设备统计图

function initEqipmentCase(){

 

var equipmentChart = echarts.init(document.getElementById(‘equipment‘));

// 设备使用情况圆形图

$.ajax({

url : ftpIp+"/supervise/getEquipmentCase.do?", // 请求的url地址

dataType : "json", // 返回格式为json

async : true,// 请求是否异步，默认为异步，这也是ajax重要特性

type : "GET", // 请求方式

success : function(req) {

//设备总数

debugger;

var count =req.count;

//设备使用状态

var online = req.online;                   

var outline = req.outline;                  

var storage = req.storage;                  

var damage = req.damage;  

//设备使用百分比

var onPercentage = online/count*100;

var onstr = onPercentage.toString();

if(onstr.length>2){

onstr = onstr.substring(0,2);

}

var outPercentage = outline/count*100;

var outstr = outPercentage.toString();

if(outstr.length>2){

outstr = outstr.substring(0,2);

}

var stPercentage = storage/count*100;

var ststr = stPercentage.toString();

if( ststr.length>2){

ststr = ststr.substring(0,2);

}

var daPercentage = damage/count*100;

var dastr = daPercentage.toString();

if(dastr.length>2){

dastr = dastr.substring(0,2);

}

var equipmentoption = {

/*

 * title: { text: ‘设备使用情况‘ },

 */

tooltip : {

trigger : ‘item‘,

formatter :‘{a} <br/>{b}: {c}台 ({d}%)‘

},

legend : {

orient : ‘vertical‘,

left : 250,

top : 75,

data : [ ‘在线   ‘+online+‘台   ‘+onstr+"%", ‘离线   ‘+outline+‘台   ‘+outstr+"%", ‘损坏   ‘+damage+‘台   ‘+dastr+"%" , ‘存储   ‘+storage+‘台   ‘+ ststr+"%"]

},

series : [ {

name : ‘‘,

type : ‘pie‘,

radius : [ ‘50%‘, ‘65%‘ ],// 圆的大小

center : [ ‘25%‘, ‘50%‘ ],// 圆的位置，中心点设置

avoidLabelOverlap : false,

label : {

normal : {

show : true,

position : ‘center‘,

formatter :  count+‘主机(台)‘,

textStyle : {

fontSize : 15,

color : ‘black‘

}

},

emphasis : {

show : true,

textStyle : {

fontSize : ‘10‘,

fontWeight : ‘bold‘

}

}

},

labelLine : {

normal : {

show : false

}

},

data : [ {

value : 335,

name : ‘在线   ‘+online+‘台   ‘+onstr+"%",

itemStyle : {

color : ‘#FFD39B‘

}

}, {

value : 310,

name : ‘离线   ‘+outline+‘台   ‘+outstr+"%",

itemStyle : {

color : ‘#FF7256‘

}

}, {

value : 234,

name : ‘损坏   ‘+damage+‘台   ‘+dastr+"%",

itemStyle : {

color : ‘#9AFF9A‘

}

}, {

value : 135,

name : ‘存储   ‘+storage+‘台   ‘+ ststr+"%",

itemStyle : {

color : ‘#63B8FF‘

}

} ]

} ]

};

// 使用刚指定的配置项和数据显示图表。

equipmentChart.setOption(equipmentoption);

 

}

})

}


function initReception(){

$.ajax({

url : ftpIp+"/supervise/getLevelPerson.do?", // 请求的url地址

dataType : "json", // 返回格式为json

async : true,// 请求是否异步，默认为异步，这也是ajax重要特性

type : "GET", // 请求方式

success : function(req) {

debugger;

//一级接待人数

var aa = req.one;

//二级接待人数

var bb = req.two;

//三级接待人数

var cc = req.three;

//所有接待人数

var all = req.all;

//接待场次

var rccount = req.rccount;

//展厅设备

var eqcount = req.eqcount;

 

$("#onelevel").html(aa);

$("#twolevel").html(bb);

$("#threelevel").html(cc);

$("#allrecept").html(all);

$("#receptnum").html(rccount);

$("#allequipment").html(eqcount);

}

})

}


//时间选择框初始化方法

function inittime(){

$("#selfKHDate").combobox({

   panelHeight: ‘auto‘,

       valueField:‘selfKHDate‘,

       textField:‘selfKHDate‘,

       onSelect:selfKHDateSelect,

       data:[{khId:"1",selfKHDate:"2018"},{khId:"2",selfKHDate:"2019"},{khId:"3",selfKHDate:"2020"},{khId:"4",selfKHDate:"2021"},{khId:"5",selfKHDate:"2022"}]

     });

 $("#selfKHDate").combobox(‘select‘,"2020");

 $("#showRoomDate").combobox({

   panelHeight: ‘auto‘,

       valueField:‘showRoomDate‘,

       textField:‘showRoomDate‘,

       onSelect:showRoomDateSelect,

       data:[{srId:"1",showRoomDate:"2018"},{srId:"2",showRoomDate:"2019"},{srId:"3",showRoomDate:"2020"},{khId:"4",showRoomDate:"2021"},{khId:"5",showRoomDate:"2022"}]

     });

 $("#showRoomDate").combobox(‘select‘,"2020");

}

//时间选择框改动判断方法，刷新e-chart数据

function selfKHDateSelect(data){

initchart();

}

 

function showRoomDateSelect(data){

initchart();

}

 

function initchart() {

 

// 基于准备好的dom，初始化echarts实例

var checkChart = echarts.init(document.getElementById(‘selfKH‘));

var showroomChart = echarts.init(document.getElementById(‘showRoom‘));

 

//获取自评与考核年份

var chdate = $("input[name=‘selfKHDate‘]").val();

var evdate = $("input[name=‘selfKHDate‘]").val();

//获取接待年份

var rcdate = $("input[name=‘showRoomHDate‘]").val();

 

if(rcdate==""){

rcdate = "2020";

}

//自评与考核年份处理，改成年月日格式，查询数据库里大于此日期数据，并按日期排序

chdate = chdate+"-01-01";

evdate = evdate+"-01-01";

//接待年份处理

rcdate = rcdate+"-01-01";

debugger;

// 定义一个数组将考核分数放入

var ChScores = new Array();

//定义一个数组将自评分数放入

var EvScores = new Array();

//定义三个数组放入不同级别接待人数

var RcPersonsOne = new Array();

var RcPersonsTwo = new Array();

var RcPersonsThree = new Array();

// 获取不同月份考核分数

$.ajax({

url : ftpIp+"/supervise/getChScoreByDate.do?chdate="+chdate, // 请求的url地址

dataType : "json", // 返回格式为json

async : true,// 请求是否异步，默认为异步，这也是ajax重要特性

type : "GET", // 请求方式

success : function(req) {

// 请求成功时处理

debugger;

// 获得一月到12月考核分数

chdate = chdate.substring(0,4);

var strchdate;

for (var i = 0; i < req.length; i++) {

strchdate = req[i].chdate.substring(0,4);

if(chdate==strchdate){

ChScores.push(req[i].chscore);

}

}

 

$.ajax({

url : ftpIp+"/supervise/getEvScoreByDate.do?evdate="+evdate, // 请求的url地址

dataType : "json", // 返回格式为json

async : true,// 请求是否异步，默认为异步，这也是ajax重要特性

type : "GET", // 请求方式

success : function(req) {

// 请求成功时处理

debugger;

// 获得一月到12月考核分数

evdate = evdate.substring(0,4);

var strevdate;

for (var i = 0; i < req.length; i++) {

strevdate = req[i].evdate.substring(0,4);

if(strevdate==evdate){

EvScores.push(req[i].evscore);

}

}

 

//自评与考核柱状图

checkoption = {

/*

 * title: { text: ‘自评与考核‘ },

 */

 

legend : {

left : 300,

top : -5

},

tooltip : {

trigger : ‘axis‘,

formatter : function(params) { // 自定义函数修改折线图给数据加单位

 

var str = ‘‘;// 声明一个变量用来存储数据

 

str += ‘<div>‘ + params[0].name + ‘</div>‘; // 显示日期的函数

 

for (var i = 0; i < params.length; i++) { // 图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位

 

if (i === 0) {

 

str += ‘<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>‘

+ params[i].seriesName

+ ‘</span> : <span>‘

+ (params[i].data ? params[i].data

+ ‘分‘

: ‘暂无‘) + ‘</br>‘;

 

} else {

 

str += ‘<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>‘

+ params[i].seriesName

+ ‘</span> : <span>‘

+ (params[i].data ? params[i].data

+ ‘分‘

: ‘暂无‘) + ‘</br>‘;

 

}

 

}

 

return str;

 

},

axisPointer : {

type : ‘cross‘,

crossStyle : {

color : ‘#999‘

}

}

},

// 调试图表距离边框位置

grid : {

x : ‘1%‘, // 相当于距离左边效果:padding-left

y : ‘12%‘, // 相当于距离上边效果:padding-top

right :‘3%‘,

bottom : ‘10%‘,

containLabel : true

},

xAxis : [ {

type : ‘category‘,

data : [ ‘1月‘, ‘2月‘, ‘3月‘, ‘4月‘, ‘5月‘, ‘6月‘, ‘7月‘,

‘8月‘, ‘9月‘, ‘10月‘, ‘11月‘, ‘12月‘ ],

axisLabel : {

show : true,

textStyle : {

color : ‘black‘,

fontSize : ‘13‘

}

}

} ],

yAxis : [ {

type : ‘value‘,

axisLabel : {

show : true,

textStyle : {

color : ‘black‘,

fontSize : ‘13‘

}

}

} ],

series : [

{

name : ‘自评‘,

type : ‘bar‘,

data : [ EvScores[0], EvScores[1], EvScores[2], EvScores[3], EvScores[4],

EvScores[5], EvScores[6], EvScores[7], EvScores[8], EvScores[9], EvScores[10],

EvScores[11]],

itemStyle : {

normal : {

color : ‘#62B62F‘,

barBorderRadius : 5,

borderWidth : 0

}

},

barWidth : ‘20%‘

},

{

name : ‘考核‘,

type : ‘bar‘,

data : [ ChScores[0], ChScores[1],

ChScores[2], ChScores[3], ChScores[4], ChScores[5],

ChScores[6], ChScores[7], ChScores[8],ChScores[9], ChScores[10], ChScores[11]],

itemStyle : {

normal : {

color : ‘#058088‘,

barBorderRadius : 5,

borderWidth : 0

}

},

barWidth : ‘20%‘

} ]

};//ehcart

checkChart.setOption(checkoption);

 

}

 

});//第二个ajax

 

}

 

 

});//第一个ajax

 
$.ajax({

url : ftpIp+"/supervise/getPersonByDate.do?rcdate="+rcdate, // 请求的url地址

dataType : "json", // 返回格式为json

async : true,// 请求是否异步，默认为异步，这也是ajax重要特性

type : "GET", // 请求方式

success : function(req) {

// 请求成功时处理

debugger;

var onelevelJanuary =0;

var onelevelFebruaryh =0;

var onelevelMarch =0;

var onelevelApril= 0;

var onelevelMay = 0;

var onelevelJune= 0;

var onelevelJuly = 0;

var onelevelAugust =0;

var onelevelSeptember =0;

var onelevelOctober = 0;

var onelevelNovember = 0;

var onelevelDecember = 0;

var twolevelJanuary =0;

var twolevelFebruaryh =0;

var twolevelMarch =0;

var twolevelApril= 0;

var twolevelMay = 0;

var twolevelJune= 0;

var twolevelJuly = 0;

var twolevelAugust =0;

var twolevelSeptember =0;

var twolevelOctober = 0;

var twolevelNovember = 0;

var twolevelDecember = 0;

var threelevelJanuary =0;

var threelevelFebruaryh =0;

var threelevelMarch =0;

var threelevelApril= 0;

var threelevelMay = 0;

var threelevelJune= 0;

var threelevelJuly = 0;

var threelevelAugust =0;

var threelevelSeptember =0;

var threelevelOctober = 0;

var threelevelNovember = 0;

var threelevelDecember = 0;

 

// 做判断，分别获取不同级别的一月到12月人数

for (var i = 0; i < req.length; i++) {

debugger;

var rclevel = req[i].rclevel;

var sqlrcdate = req[i].rcdate;

//选择的日期

rcdate = rcdate.substring(0,4);

//sql日期

sqlrcdatestr = sqlrcdate.substring(0,4);

//如果日期不同，只留选择日期的数据，sql日期不要

if(rcdate==sqlrcdatestr){

sqlrcdate = sqlrcdate.substring(5,7);

if(rclevel=="一级"){

if(sqlrcdate=="01"){

onelevelJanuary= onelevelJanuary+req[i].rcpersonnum;

}

if(sqlrcdate=="02"){

onelevelFebruaryh = onelevelFebruaryh+req[i].rcpersonnum;

}

if(sqlrcdate=="03"){

onelevelMarch = onelevelMarch+req[i].rcpersonnum;

}

if(sqlrcdate=="04"){

onelevelApril= onelevelApril+req[i].rcpersonnum;

}

if(sqlrcdate=="05"){

 onelevelMay = onelevelMay+req[i].rcpersonnum;

}

if(sqlrcdate=="06"){

onelevelJune = onelevelJune+req[i].rcpersonnum;

}

if(sqlrcdate=="07"){

onelevelJuly = onelevelJuly+req[i].rcpersonnum;

}

if(sqlrcdate=="08"){

onelevelAugust = onelevelAugust+req[i].rcpersonnum;

}

if(sqlrcdate=="09"){

onelevelSeptember = onelevelSeptember+req[i].rcpersonnum;

}

if(sqlrcdate=="10"){

onelevelOctober= onelevelOctober+req[i].rcpersonnum;

}

if(sqlrcdate=="11"){

onelevelNovember = onelevelNovember+req[i].rcpersonnum;

}

if(sqlrcdate=="12"){

onelevelDecember = onelevelDecember+req[i].rcpersonnum;

}

}

else if(rclevel=="二级"){

if(sqlrcdate=="01"){

twolevelJanuary= twolevelJanuary+req[i].rcpersonnum;

}

if(sqlrcdate=="02"){

twolevelFebruaryh = twolevelFebruaryh+req[i].rcpersonnum;

}

if(sqlrcdate=="03"){

twolevelMarch = twolevelMarch+req[i].rcpersonnum;

}

if(sqlrcdate=="04"){

twolevelApril= twolevelApril+req[i].rcpersonnum;

}

if(sqlrcdate=="05"){

 twolevelMay = twolevelMay+req[i].rcpersonnum;

}

if(sqlrcdate=="06"){

twolevelJune = twolevelJune+req[i].rcpersonnum;

}

if(sqlrcdate=="07"){

twolevelJuly = twolevelJuly+req[i].rcpersonnum;

}

if(sqlrcdate=="08"){

twolevelAugust = twolevelAugust+req[i].rcpersonnum;

}

if(sqlrcdate=="09"){

twolevelSeptember = twolevelSeptember+req[i].rcpersonnum;

}

if(sqlrcdate=="10"){

twolevelOctober= twolevelOctober+req[i].rcpersonnum;

}

if(sqlrcdate=="11"){

twolevelNovember = twolevelNovember+req[i].rcpersonnum;

}

if(sqlrcdate=="12"){

twolevelDecember = twolevelDecember+req[i].rcpersonnum;

}

}

else if(rclevel=="三级"){

if(sqlrcdate=="01"){

threelevelJanuary= threelevelJanuary+req[i].rcpersonnum;

}

if(sqlrcdate=="02"){

threelevelFebruaryh = threelevelFebruaryh+req[i].rcpersonnum;

}

if(sqlrcdate=="03"){

threelevelMarch = threelevelMarch+req[i].rcpersonnum;

}

if(sqlrcdate=="04"){

threelevelApril= threelevelApril+req[i].rcpersonnum;

}

if(sqlrcdate=="05"){

 threelevelMay = threelevelMay+req[i].rcpersonnum;

}

if(sqlrcdate=="06"){

threelevelJune = threelevelJune+req[i].rcpersonnum;

}

if(sqlrcdate=="07"){

threelevelJuly = threelevelJuly+req[i].rcpersonnum;

}

if(sqlrcdate=="08"){

threelevelAugust = threelevelAugust+req[i].rcpersonnum;

}

if(sqlrcdate=="09"){

threelevelSeptember = threelevelSeptember+req[i].rcpersonnum;

}

if(sqlrcdate=="10"){

threelevelOctober= threelevelOctober+req[i].rcpersonnum;

}

if(sqlrcdate=="11"){

threelevelNovember = threelevelNovember+req[i].rcpersonnum;

}

if(sqlrcdate=="12"){

threelevelDecember = threelevelDecember+req[i].rcpersonnum;

}

}

}


}//for循环


RcPersonsOne.push(onelevelJanuary,onelevelFebruaryh,onelevelMarch,onelevelApril,onelevelMay,onelevelJune,onelevelJuly,onelevelAugust,onelevelSeptember,onelevelOctober,onelevelNovember,onelevelDecember);

RcPersonsTwo.push(twolevelJanuary,twolevelFebruaryh,twolevelMarch,twolevelApril,twolevelMay,twolevelJune,twolevelJuly,twolevelAugust,twolevelSeptember,twolevelOctober,twolevelNovember,twolevelDecember);

RcPersonsThree.push(threelevelJanuary,threelevelFebruaryh,threelevelMarch,threelevelApril,threelevelMay,threelevelJune,threelevelJuly,threelevelAugust,threelevelSeptember,threelevelOctober,threelevelNovember,threelevelDecember);

// 展厅接待

var showroomoption = {

legend : {

data : [ ‘一级接待‘, ‘二级接待‘, ‘三级接待‘ ]

},

// 调试图表距离边框位置

grid : {

x : ‘1%‘, // 相当于距离左边效果:padding-left

y : ‘15%‘, // 相当于距离上边效果:padding-top

right:‘3%‘,

bottom : ‘10%‘,

containLabel : true

},

/*

 * title: { text: ‘展厅接待‘, // subtext: ‘纯属虚构‘ },

 */

tooltip : {

trigger : ‘axis‘,

axisPointer : {

type : ‘cross‘

},

formatter : function(params) { // 自定义函数修改折线图给数据加单位

var str = ‘‘;// 声明一个变量用来存储数据

str += ‘<div>‘ + params[0].name + ‘</div>‘; // 显示日期的函数

for (var i = 0; i < params.length; i++) { // 图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位

if (i === 0) {

str += ‘<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>‘

+ params[i].seriesName

+ ‘</span> : <span>‘

+ (params[i].data ? params[i].data + ‘人‘ : ‘暂无‘)

+ ‘</br>‘;


} else {

str += ‘<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>‘

+ params[i].seriesName

+ ‘</span> : <span>‘

+ (params[i].data ? params[i].data + ‘人‘ : ‘暂无‘)

+ ‘</br>‘;

}

}

return str;

},

},

/*

 * 下载图片 toolbox: { show: true, feature: { saveAsImage: {} } },

 */

xAxis : {

type : ‘category‘,

boundaryGap : false,

data : [ ‘1月‘, ‘2月‘, ‘3月‘, ‘4月‘, ‘5月‘, ‘6月‘, ‘7月‘, ‘8月‘, ‘9月‘,

‘10月‘, ‘11月‘, ‘12月‘ ]

},

yAxis : {

type : ‘value‘,

name : "人",

axisLabel : {

formatter : ‘{value}‘

},

axisPointer : {

snap : true

}

},

series : [

{

name : ‘一级接待‘,

type : ‘line‘,

smooth : true,

data : [ RcPersonsOne[0], RcPersonsOne[1], RcPersonsOne[2], RcPersonsOne[3], RcPersonsOne[4], RcPersonsOne[5], RcPersonsOne[6], RcPersonsOne[7],RcPersonsOne[8], RcPersonsOne[9],

RcPersonsOne[10], RcPersonsOne[11]]

},

{

name : ‘二级接待‘,

type : ‘line‘,

smooth : true,

data : [ RcPersonsTwo[0], RcPersonsTwo[1], RcPersonsTwo[2], RcPersonsTwo[3],RcPersonsTwo[4], RcPersonsTwo[5], RcPersonsTwo[6], RcPersonsTwo[7], RcPersonsTwo[8], RcPersonsTwo[9],

RcPersonsTwo[10], RcPersonsTwo[11]]

},

{

name : ‘三级接待‘,

type : ‘line‘,

smooth : true,

data : [ RcPersonsThree[0], RcPersonsThree[1], RcPersonsThree[2], RcPersonsThree[3], RcPersonsThree[4], RcPersonsThree[5], RcPersonsThree[6], RcPersonsThree[7], RcPersonsThree[8], RcPersonsThree[9],

RcPersonsThree[10],RcPersonsThree[11]]

}

]

};

showroomChart.setOption(showroomoption);

}

});

}