-
-
果冻出场 数据小白Lv1
发表于2021-8-12 16:02
楼主
本帖最后由 果冻出场 于 2021-8-12 16:03 编辑
社区的BI热力图在ABI里面需要修改,ABI的热力图如下配置:
1.ABI实现热力图
设计表格数据,根据日期,和地区交叉浮动.
2.拖入EChart的自定义组件到编辑区,双击组件,进行脚本编写.复制代码
3效果
社区的BI热力图在ABI里面需要修改,ABI的热力图如下配置:
1.ABI实现热力图
设计表格数据,根据日期,和地区交叉浮动.
2.拖入EChart的自定义组件到编辑区,双击组件,进行脚本编写.
- var a = <#=GRID1.B1$#>;
- //A2是地区维表ID,为了显示地区name.后面加了.txt
- var b =<#=GRID1.A2$.txt#>;
- var c = <#=GRID1.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'
- },
- grid: {
- height: '50%',
- top: '10%'
- },
- //X轴
- xAxis: {
- type: 'category',
- data: a,
- splitArea: {
- show: true
- }
- },
- //Y轴
- yAxis: {
- type: 'category',
- data: b,
- splitArea: {
- show: true
- }
- },
- //滑块,inrange是颜色
- visualMap: {
- min: 0,
- max: 5000,
- calculable: true,
- orient: 'horizontal',
- left: 'center',
- bottom: '15%',
- 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)'
- }
- }
- }]
- };
- return option;
- //注意返回option
3效果
