Echarts使用热力图作为NAMS预定图表

最新推荐文章于 2025-07-21 12:01:39 发布

weixin_34306593

最新推荐文章于 2025-07-21 12:01:39 发布

阅读量151

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/ffse54s/blog/734206

本文介绍使用ECharts实现热力图的方法，并详细解释如何通过JavaScript动态更新图表数据及响应点击事件来完成设备预订流程。

2019独角兽企业重金招聘Python工程师标准>>>

var previewOption;

var myChart;

var previewDate;

function initPreview(){

var yData = getYData();

$( "#previewchart").height(60*yData[0].length);

if(previewDate == null){

previewDate = new Date();

}

$( '#current_date').html(previewDate.getFullYear()+"/" +(previewDate.getMonth()+1)+"/"+previewDate.getDate());

var xData = getxData();

if(myChart == null){

myChart = echarts.init(document.getElementById( 'previewchart'));

previewOption = {

tooltip : {

trigger: 'item',

formatter: function (params, ticket, callback) {

return params.data.name

}

xAxis : [

{

type : 'category',

data:xData

}

yAxis : [

{

type : 'category',

data : yData[0]

}

visualMap: {

min: 0,

max: 3,

splitNumber: 4,

calculable: true,

orient: 'horizontal',

left: 'center',

bottom: '15%',

show: false,

color: ['red','yellow' ,'green' ,'gray' ]//0:gray,1:green,2:yellow,3:red

series : [

{

type: 'heatmap',

itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

data:initData(xData,yData[1]),

markPoint:{

symbol: 'circle'

label: {

normal: {

show: false

}

]

};

myChart.setOption(previewOption);

myChart.on( 'click', eConsole);

} else{

refreshChart(xData,yData);

}

function eConsole(param) {

var value = param.data.value[2];

if(value == 1 || value == 2){//green

clearNewReserve();

var itemObj = param.data.obj;

var e = new equipment(itemObj.itemName, itemObj.id, itemObj.approverName, itemObj.approverId, itemObj.actualAvailableItemNumber, itemObj.serialNumber, itemObj.maxNB, itemObj.partNumber, itemObj.equipmentId, itemObj.itemCategoryId, itemObj.isConsumable);

equipList.push(e);

selectedItemMap.put(itemObj.id, e);

book();

//initstart time?

//$('#startdate ').val(startDateStr);

} else{//red,gray

//do nothing

}

function refreshChart(xData,yData){

loadingStart();

myChart.setOption({

xAxis : [{data : xData}],

yAxis : [{data : yData[0]}],

series: [{data : initData(xData,yData[1])}]

});

myChart.resize();

loadingEnd();

}

function initData(xData,yData){

var data = [];

var dataLevel = getChosenDateLevel();

for(yAxis=0; yAxis<yData.length; yAxis++){

//TODO process data from server

xData = getScheduleData(yData[yAxis],previewDate,dataLevel.id);

for(xAxis=0; xAxis<xData.length; xAxis++){

var item = {

value:[xAxis,yAxis,xData[xAxis].value],

obj:yData[yAxis]

};

if(item.value[2] != 1){//red

//'User:xx1<br>Start Time:2015/1/1 10:00<br>End Time:2015/1/2 10:00'

item.name = xData[xAxis].label;

}

if(item.value[2] == 0){//gray

//'User:xx1<br>Start Time:2015/1/1 10:00<br>End Time:2015/1/2 10:00'

item.name = "currently not support future reserve" ;

}

data.push(item);

}

return data;

}

function getScheduleData(yData,previewDate,dateLevelId){

var datalist;

$.ajax({

url: serverURL + "jsonData/getScheduleData.action" ,

type : 'GET',

dataType : 'json',

async: false,

data: {

itemId:yData.id,

previewDate:previewDate.getFullYear()+"/"+(previewDate.getMonth()+1)+ "/"+previewDate.getDate(),

dateLevelId:dateLevelId

error: function (e){

ALERT( "error",e.statusText);

success: function(data){

datalist = data;

}

});

return datalist.data;

}

function getxData(){

var datelevel = getChosenDateLevel();

if(datelevel.id == 'daybt' ){

return [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];

//return [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];

} else if (datelevel.id == 'monbt'){//getMonth()[0-11]

var d = new Date(previewDate.getFullYear(),previewDate.getMonth()+1,0);

var arr = [];

for(i = 1;i<=d.getDate();i++){

arr.push(i);

}

return arr;

} else{

return [1,2,3,4,5,6,7,8,9,10,11,12];

}

function getYData(){

var itemNames = [];

var itemObj = [];

var itemArray = [];

reserveTable.data().each( function(d){

itemNames.push(d.itemName);

itemObj.push(d);

});

itemNames = itemNames.reverse();

itemObj = itemObj.reverse();

itemArray.push(itemNames);

itemArray.push(itemObj);

return itemArray;

}

function showPreview(){

initPreview();

clearNewReserve();

}

function clearNewReserve(){

equipList = [];

selectedItemMap.clear();

$( '#equipAmount').html(equipList.length);

$( '#equipAmount').hide();

$( '#buttonSpace').hide();

}

function createPreview(chartElement,data1,data2,data3){

var myChart = echarts.init(chartElement);

myChart.setOption(previewOption);

}

function changeDate(obj){

$( "button[id$='bt']").prop("disabled" ,false);

obj.disabled = true;

refreshChart(getxData(),getYData());

}

function getChosenDateLevel(){

var $datelevel = $("button[id$='bt'][disabled]" );

return $datelevel[0];

}

function moveDate(obj){

var datelevel = getChosenDateLevel();

if(datelevel.id == 'daybt' ){

if(obj == 'add' ){

previewDate.setDate(previewDate.getDate() + 1);

} else{

previewDate.setDate(previewDate.getDate() - 1);

}

} else if (datelevel.id == 'monbt'){

if(obj == 'add' ){

previewDate.setMonth(previewDate.getMonth() + 1);

} else{

previewDate.setMonth(previewDate.getMonth() - 1);

}

} else{

if(obj == 'add' ){

previewDate.setFullYear(previewDate.getFullYear() + 1);

} else{

previewDate.setFullYear(previewDate.getFullYear() - 1);

}

$( '#current_date').html(previewDate.getFullYear()+"/" +(previewDate.getMonth()+1)+"/"+previewDate.getDate());

refreshChart(getxData(),getYData());

}

转载于:https://my.oschina.net/ffse54s/blog/734206