我的位置：首页 › 大数据分析-亿信BI › BI-心得体验 › echarts热力图在BI中的使用

echarts热力图在BI中的使用

复制链接 | 收藏本帖

2826

: 3516853030 小试身手Lv3

发表于2020-9-21 11:14

楼主

本帖最后由 3516853030 于 2021-3-10 11:26 编辑

1.需求
热力图需求场景：分析某项维度的指标热度。比如：如果你发现人们总是在点击某个产品图片，你能想到的是，他们也许想看大图，或者是想了解该产品的更多信息。同样，他们可能会错误地认为特别的图片就是导航链接--这个数据就可以通过热力图做一个高效的展示。
由于系统中没有单纯的维度相对于指标大小的热力展示的统计图，所以遇到这样的场景时可参考如下步骤配置。

2.配置
首先需要上传js文件到服务器中

js文件：

echarts.min.rar (213.32 KB, 下载次数: )

然后需要一个空容器用来放热力图；设计好浮动交叉表后（分析了热力图的一些适用场景后发现交叉表比较适配热力图），就可以在脚本中将画出来的echarts放入到容器中

3.脚本参考
脚本的作用是把处理好的数据进行有序对应指标的进行排放，如果有更高效的方法欢迎跟帖。
写在客户端脚本中即可生效，入口见图2：

include("vfs/root/echarts.min.js");//调用js文件
var myChart1 = echarts.init(document.getElementById('HHH33'));//获取容器，初始化echarts放置对象
var a = <#=GRID3.B1$#>;
var b =<#=GRID3.A2$#>;
var c = <#=GRID3.B2$#>;
var d=[],j=0;
xl=a.length;
yl=b.length;
//拼接坐标和数据
for(x=0;x<xl;x++){
for(y=0;y<yl;y++){
d =d.concat(y);
d =d.concat(x);
d=d.concat(c[j]);j++;
}
}
//分割坐标和数据
var spArray = function(n,arr){
var newArr = [],i;
for (i = 0;i < arr.length;) {
newArr.push(arr.slice(i,i += n))
}
return newArr
}
t=spArray(3,d);
//根据坐标获取数据
data = t.map(function (item) {
return [item[1], item[0], item[2] || '-'];
});
option = {
tooltip: {
position: 'top'
},
animation: false,
grid: {
left:'25%',
top: '10%'
},
xAxis: {
type: 'category',
data: a,
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: b,
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'vertical',
left: 'right',
bottom: '5%',
inRange:{
color: ['#3398DB','yellow']
}
},
series: [{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
myChart1.setOption(option);//将热力图放到容器中

复制代码

4.效果展示

注：颜色的设置可以改变代码里的inRange属性，
inRange:{
color: ['#3398DB','yellow']
}
更多热力图信息可了解echarts官网：https://echarts.apache.org/examples/zh/editor.html?c=heatmap-cartesian

echarts.min.rar (213.32 KB, 下载次数: )