Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.6k views
in Technique[技术] by (71.8m points)

如何在echarts热图上添加自定义的边框?具体地讲就是在下例热图中如何按第5列添加边框?

var data =
[[0, 0, 2.1, 4.74, -0.96, 'str1', 'M13', -2.52],
[0, 1, 1.31, 1.71, -1.64, 'str1', 'M15', -4.35],
[0, 2, -2.38, 2.92, -0.86, 'str1', 'M18', -3.58],
[1, 0, 2.05, 0.19, 1.96, 'str1', 'M25', -2.54],
[1, 1, 2.45, 5.28, 1.22, 'str2', 'M00', -2.62],
[1, 2, -4.51, 0.62, 3.83, 'str2', 'M04', -1.23],
[2, 0, 2.79, 0.98, -6.71, 'str2', 'M05', -3.51],
[2, 1, 2.82, -3.07, -0.78, 'str2', 'M06', 2.18],
[2, 2, -4.29, 3.86, 1.18, 'str2', 'M10', -2.84],
[3, 0, -4.89, -0.98, -1.88, 'str2', 'M12', 1.36],
[3, 1, -1.89, 3.79, 0.2, 'str2', 'M16', 1.44],
[3, 2, 1.35, 5.92, 7.17, 'str2', 'M17', -0.32],
[4, 0, 4.31, -0.03, 1.21, 'str2', 'M19', 3.04],
[4, 1, -2.18, 2.0, -2.52, 'str2', 'M23', 0.66],
[4, 2, -5.26, -2.53, -4.02, 'str2', 'M24', 2.26],
[5, 0, -1.28, -0.85, 0.19, 'str2', 'M27', 5.99],
[5, 1, -1.68, 1.0, 1.27, 'str3', 'M20', 1.62],
[5, 2, -8.49, 0.13, -0.43, 'str3', 'M22', -1.29],
[6, 0, -5.93, 6.5, 0.63, 'str3', 'M26', -3.94],
[6, 1, -2.2, -0.2, 3.29, 'str4', 'M01', 3.64],
[6, 2, 4.4, 0.64, 0.48, 'str4', 'M03', -3.9],
[7, 0, -1.88, -3.41, 2.73, 'str4', 'M07', 0.99],
[7, 1, -1.5, -1.45, 3.18, 'str4', 'M08', -7.22],
[7, 2, 0.82, 1.52, -2.86, 'str4', 'M11', 0.34],
[8, 0, 3.2, 1.72, 0.03, 'str4', 'M14', -5.66],
[8, 1, 2.04, -5.02, -0.63, 'str4', 'M28', 1.6],
[8, 2, 1.06, -1.03, 5.17, 'str4', 'M29', 1.23],
[9, 0, 3.09, -6.73, -0.1, 'str5', 'M02', -0.89],
[9, 1, -5.02, -1.63, 4.7, 'str5', 'M09', 0.26],
[9, 2, 4.54, -1.41, -1.27, 'str5', 'M21', -5.0]];

option = {

dataset: {
    dimensions:['a','b','c','d','e','f','g','h'],
    source:data 
},

tooltip: {},
visualMap: {
    
    show:false,
    min: -5,
    max: 5,
    dimension: 2,
    seriesIndex :0,
    calculable: true,
    orient: 'horizontal',
    align: 'right',
    inRange: {
        color: ['#BAE7FF', '#1890FF', '#0050B3']
    },
    left: 'center'
},
xAxis: {
    type: 'category',
},
yAxis: {
    type: 'category',
},
series: [
    {
    type: 'heatmap',
    encode: {
         seriesName:[0,1,2] 
    }, 
    
    label: {
        show: true
    },
    itemStyle: {
        borderWidth: 1,
        borderColor: "#fff"
    }
}]

};

上面的代码显示的图形是这样的:
image.png

需要在上图上按第5列进行分类,并添加分类框,也就是像下图按日期分类中的按月分类那样的边框,只是分类的数据是自选的:
image

这里有个例子感觉应该有参考价值,但是太复杂了,看不明白:
https://www.makeapie.com/edit...

加上[dlwbill]的代码后在Echarts这里https://echarts.apache.org/ex... 显示为:
image.png

按[dlwbill]的代码显示如下:
image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

你这第五列的值不连续啊,按什么规则分类?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...