以下仅供参考~ 注意: 一定要注意echars版本 需要实现的效果是: target 、 Safe Time 单独指定颜色,超时时间数量根据条件指定对应颜色
效果图:
body {
background-color: #183B64;
}
function showEchars() {
let myChart = echarts.getInstanceByDom(document.getElementById("echarsID"));
if (myChart === undefined) {
myChart = echarts.init(document.getElementById("echarsID"));
};
//横坐标name
var xAxis = ['IQC in', 'Flex bending', 'Aperture PF', 'RCVR', 'RCVR Inspection PDCA', '7P', 'Frame attach',
'Overflow Cleaning', 'Ground Tape', 'Ring Welding', 'UMP', 'QQC-CG-ALT', 'OQC-Resistance', 'OQC-TSP', 'FQC in'
];
//纵坐标name
var yAxis = ['target', 'Safe Time', '2H', '4H', '8H', '12H', '>12'];
var data = [];
for (var i = 0; i < xAxis.length; i++) {
let arr = [];
for (var j = 0; j < yAxis.length; j++) {
let value = parseInt(Math.random() * 1200);
//需求: 指定目标和安全时间固定颜色,剩下的超时时间数量根据条件判断来决定颜色
// 值,下标
let itemStyle = setColors(value, j);
let obj = {};
obj.itemStyle = itemStyle;
obj.value = [i, j, value];
data.push(obj)
}
}
var option = {
title: {
text: "热力图 自定义颜色",
left: 'center',
textStyle: {
color: "#fff"
},
top: '2%'
},
tooltip: {
position: 'top',
backgroundColor: 'rgba(42, 47, 53, 0.9)',
borderColor: '#ffffff',
textStyle: {
color: "#fff"
},
axisPointer: {
lineStyle: {
color: '#fff'
}
}
},
grid: {
left: '2%',
right: '6%',
bottom: '2%',
top: '15%',
containLabel: true
},
xAxis: [{
show: false,
type: '',
data: xAxis,
splitArea: {
show: true
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
},
},
}, {
type: 'category',
data: xAxis,
splitArea: {
show: true
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
},
interval: 0,
rotate: 10
},
}],
yAxis: {
type: 'category',
data: yAxis,
splitArea: {
show: true
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
},
interval: 0,
// rotate: 15
},
},
visualMap: {
min: 0,
max: 1200,
calculable: true,
orient: 'vertical',
left: 'right',
top: 'center',
textStyle: {
color: "#fff"
},
// bottom: '15%',
//自定义热力图颜色
inRange: {
color: ['#15B1F4', '#16c573', '#d18a17', '#ffac1d', '#D1621D']
},
},
series: [{
name: '数值',
type: 'heatmap',
data: data,
label: {
show: true,
textStyle: {
color: "#fff"
}
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
myChart.clear();
myChart.setOption(option);
carouselTooltip(myChart, option);
window.addEventListener('resize', function() {
myChart.resize();
})
}
//轮播展示tooltip提示框
function carouselTooltip(chart, option) {
var currentIndex = -1;
let obj = {};
obj.chart = chart;
obj.time = setInterval(() => {
let dataLen = option.series[0].data.length;
// 取消之前高亮的图形
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex,
});
// 显示 tooltip
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, 1000)
}
// 筛选颜色
function setColors(val, index) {
let obj = {};
let color = null;
if (index == 0) {
color = "#0288d1";
} else if (index == 1) {
color = "#16c573";
} else {
if (val <= 800) {
color = '#15B1F4';
} else if (val > 800 && val < 1000) {
color = '#ffac1d';
} else if (val >= 1000) {
color = '#D1621D';
}
}
if (color != null) {
obj = {
normal: {
color: color,
}
}
}
return obj;
}
//调用方法
showEchars()
好文推荐
发表评论