【图表设计】自定义属性实现热力图

今天介绍通过Wyn内置组件气泡图的自定义属性设置，实现 Echarts 热力图的效果。

实现步骤
1. 准备自定义属性设置代码

1. // 获取最值
   
2. var minValue = Number.MAX_VALUE;
   
3. var maxValue = -Number.MAX_VALUE;
   
4. var echartData = option.series[0].data;
   
5. echartData.forEach(item => {
   
6.   // 最大值
   
7.   if(item.value[2] >= maxValue) {
   
8.      maxValue = item.value[2];
   
9.   }
   
10.   
    
11.   // 最小值
    
12.   if(item.value[2] <= minValue) {
    
13.      minValue = item.value[2];
    
14.   }
    
15. });
    
16. console.log("minValue = " + minValue);
    
17. console.log("maxValue = " + maxValue);
    
18. 
    
19. option.series[0].type = 'heatmap';
    
20. option.visualMap = {
    
21.             min: minValue,
    
22.             max: maxValue,
    
23.             calculable: false,
    
24.             orient: 'vertical',
    
25.             left: 'right',
    
26.                                           top:'center',
    
27.             color: ['#A50026','#D73027','#F46D43','#FDAE61','#FEE090','#FFFFBF'],
    
28.             text: ['高', '低'],
    
29.             textStyle: { color: '#666', fontSize: 13 },
    
30.                                           outOfRange: {color:'#FFFFBF'},
    
31.         };
    
32. console.log(option);
    
33. // 横坐标内容纵向显示
    
34. option.xAxis.axisLabel.formatter = function(value) {
    
35. // 步骤1：遍历每个字符，给中文字符后加换行
    
36.           let result = '';
    
37.           for (let char of value) {
    
38.             // 判断是否为中文字符（Unicode 范围 \u4e00-\u9fa5）
    
39.             if (/[\u4e00-\u9fa5]/.test(char)) {
    
40.               result += char + '\n'; // 中文字符 + 换行
    
41.             } else {
    
42.               result += char; // 非中文字符直接拼接（如字母/数字）
    
43.             }
    
44.           }
    
45.           // 步骤2：去掉末尾最后一个多余的换行符
    
46.           return result.replace(/\n$/, '');
    
47. };
    
48. return option;

复制代码

2. 创建组件
创建气泡图组件，并绑定字段：


设置自定义属性代码：


3. 最终效果


附件是自定义属性的代码和仪表板设计案例，感兴趣的小伙伴可以下载使用。