Echarts 中的热力图修改为列表表格:
<!DOCTYPE html>
<html style="height: 100%; width: 100%">
<head>
<meta charset="UTF-8">
<!-- 去除该行 <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<style>
body {
/* 网页大小 */
height: 100%;
width: 100%;
/* 网页边距 一般为0 */
margin: 0;
/* 网页背景色 */
/* background-color: black; */
/* 隐藏滑条 */
overflow: hidden;
/* //设置透明度 opacity:0.5; */
}
/* 配置box盒子 */
.box {
/* box大小 也可以在下边div语句中 定义*/
width: 100%;
height: 100%;
/* box盒子背景色 */
/* background-color: black; */
}
</style>
<body>
<!-- 定义一个box容器 -->
<div class="box"></div>
<script>
//初始化实例对象
var MyChart = echarts.init(document.querySelector(".box"));
//指定配置项和数据 将图表的内容粘贴到下方即可
var option;
//列数和列名
var xA = ['X1', 'X2', 'X3', 'X4', 'X5'];
//行数和行名 可以隐藏
var yA = ['Y1', 'Y2', 'Y3', 'Y4', 'Y5', 'Y6', 'Y7', 'Y8', 'Y9', 'Y10', 'Y11'];
var dataList = [
//列1 列2 列3 直接获取长度是行数 获取第一行长度是列数
['第一行第一列', '第一行第二列', '第一行第三列', '第一行第四列'], //第一行
['第二行第一列', '第二行第二列', '第二行第三列'],
['第三行第一列', '第三行第二列', '第三行第三列'],
['第四行第一列', '第四行第二列', '第四行第三列'],
['第五行第一列', '第五行第二列', '第五行第三列'],
['第六行第一列', '第六行第二列', '第六行第三列'],
];
// 二维数组格式化
// var totalData = new Array(); //先声明一维
// for (var i = 0; i < dataList.length; i++) { //一维长度为5
// totalData[i] = new Array(i); //在声明二维
// for (var j = 0; j < dataList[0].length; j++) { //二维长度为5
// totalData[i][j] = i;
// }
// }
var totalData = new Array();
for (var i = 0; i < yA.length * xA.length; i++) //总数据需求
totalData[i] = i;
// 长度不够则增长 dataList 的长度
for (var n = yA.length - dataList.length; n > 0; n--) {
dataList[dataList.length] = new Array();
for (var j = 0; j < xA.length; j++) { //二维长度为5
dataList[dataList.length - 1][j] = '—';
}
}
for (var i = yA.length, n = 0; i > 0; i--) {
for (var k = 0; k < xA.length; k++) {
if (dataList[i - 1][k] != null)
totalData[n] = dataList[i - 1][k];
else
totalData[n] = '—';
n++;
}
}
var dataResult = new Array();
// 二维长度为3的二维数组 决定显示
for (var i = 0, row = 0, col = 0; i < yA.length * xA.length; i++) { //一维长度
dataResult[i] = new Array(xA.length);
for (var j = 0; j < 3; j++) { //二维长度
if (j == 0) {
dataResult[i][j] = row; //决定行
}
if (j == 1) {
dataResult[i][j] = col; //决定列
col++;
if (col == xA.length)
col = 0;
}
if (j == 2) {
dataResult[i][j] = 1; //决定显示
}
}
if ((i + 1) % xA.length == 0 && i + 1 >= xA.length)
row++;
}
// var data = [
// // 1维与y轴对应 2维与x轴对应 3维为数值同时可以与文字集对应 0时不显示
// [0, 0, 1], //dataResult[0][0] [0][1] [0][2]
// [0, 1, 1],
// [0, 2, 1],
// [0, 3, 1],
// [1, 0, 1],
// [1, 1, 1],
// [1, 2, 1],
// [1, 3, 1],
// [2, 0, 1],
// [2, 1, 1],
// [2, 2, 1],
// [2, 3, 1],
// [3, 0, 7],
// [3, 1, 1],
// [3, 2, 1],
// [3, 3, 1],
// ];
dataResult = dataResult.map(function(item) {
return [item[1], item[0], item[2] || '-'];
});
/*记录 : 实现不同行颜色 可以通过设置三维数值0隐藏前坐标系
增加坐标系后设置三维数值1显示*/
option = {
tooltip: {
// 提示框
position: 'bottom',
formatter: function(params) {
return totalData[params.dataIndex];
},
borderRadius: 8,
backgroundColor: 'skyblue',
borderColor: 'blue',
borderWidth: 2,
textStyle: {
color: 'rgb(85,43,47)',
fontFamily: 'KaiTi',
fontWeight: 'bold',
},
//消除空白
padding: 0
},
// 可以调节长宽
grid: {
height: '50%',
top: '10%'
},
xAxis: {
type: 'category',
position: 'top',
data: xA,
// 坐标标签
axisLabel: {},
// 坐标刻度线
axisTick: {
show: false,
// 纵向线
length: MyChart.getWidth() * 0.227,
inside: 'true',
},
// 坐标轴线
axisLine: {
show: false
},
splitArea: {
show: true
},
},
yAxis: {
type: 'category',
data: yA,
splitNumber: 10,
splitArea: {
show: true
},
axisLabel: {
show: false,
},
// 横向线
axisTick: {
show: false,
inside: 'true',
length: MyChart.getWidth() * 0.5,
},
axisLine: {
show: false,
}
// 修改y轴位置
// offset: ['1', '0'],
},
// 数据筛选器
// visualMap: {
// min: 0,
// max: 10,
// calculable: true,
// orient: 'horizontal',
// left: 'center',
// bottom: '15%'
// },
series: [{
name: 'Punch Card',
type: 'heatmap',
itemStyle: {
normal: {
//让背景透明
show: false,
color: "rgba(11,230,255,0)",
borderWidth: 2,
borderColor: "none",
// 边框设置为虚线
borderType: "dotted",
},
emphasis: {
shadowBlur: 10,
focus: "self",
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: dataResult,
label: {
show: true,
// 方框内容
formatter: function(params) {
var subStr;
//在 32个字以内的话 每8个字符隔一行 10个字则不换行
if (totalData[params.dataIndex][26] != null)
subStr = totalData[params.dataIndex].substring(0, 8) + '\n' +
totalData[params.dataIndex].substring(8, 16) + '\n' +
totalData[params.dataIndex].substring(16, 24) + '\n' +
totalData[params.dataIndex].substring(24);
else if (totalData[params.dataIndex][18] != null)
subStr = totalData[params.dataIndex].substring(0, 8) + '\n' +
totalData[params.dataIndex].substring(8, 16) + '\n' +
totalData[params.dataIndex].substring(16);
else if (totalData[params.dataIndex][10] != null)
subStr = totalData[params.dataIndex].substring(0, 8) + '\n' +
totalData[params.dataIndex].substring(8);
else
subStr = totalData[params.dataIndex];
return subStr;
},
// 调节文字背景框
// backgroundColor: 'green',
// borderColor: 'blue',
// borderWidth: 4,
// borderRadius: 4,
// borderType: 'dotted',
// 上下/右/上下/左 两个上下以大的为准 一个为0则两个为0
padding: [0, 5, 0, 5],
textStyle: {
fontSize: 15,
color: 'skyblue',
fontWeight: 'lighter',
fontFamily: 'KaiTi',
// borderColor: 'blue',
// borderWidth: 1,
}
},
}]
};
// 将option配置给图表
MyChart.setOption(option);
// 添加图表自适应
window.addEventListener("resize", function() {
MyChart.resize();
});
</script>
</body>
</html>
这里是我写的UE4中的Ultra Dynamic Sky蓝图实现昼夜交替