{site_name}

{site_name}

🌜 搜索

ECharts 是一个基于 JavaScript 的开源可视化库,用于构建交互式的数据可视化图表

前端 𝄐 0
echarts热力图颜色分段,echarts设置图例,echarts绘制热力图,echarts热力图数据,echarts地图热力图,echarts圆形热力图
ECharts 是一个基于 JavaScript 的开源可视化库,用于构建交互式的数据可视化图表。其中 series 组件是 ECharts 中最重要的组件之一,用于配置各种类型的图表。

热力图是 series 组件中的一种类型,用于展示二维数据的密度分布情况,通常用于展示地图上的数据热点或者多维数据的聚类情况。在 ECharts 中,可以使用以下配置来实现热力图:

javascript
series: {
type: 'heatmap', // 指定图表类型为热力图
data: [[x1, y1, value1], [x2, y2, value2], ...], // 数据格式为 [x, y, value],其中 x 和 y 表示数据的横纵坐标,value 表示该位置对应的值
label: {
show: true, // 是否显示每个点的数值标签
formatter: '{@[2]}', // 数值标签的格式化字符串,@[n] 表示取数据项的第 n 个元素作为标签内容
},
itemStyle: {
emphasis: { // 鼠标悬浮时的样式设置
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)',
opacity: 0.8,
}
},
// 其他配置项...
}


以下是一个简单的热力图例子:

javascript
option = {
series: {
type: 'heatmap',
data: [
[0, 0, 5],
[1, 0, 1],
[2, 0, 7],
[3, 0, 2],
[4, 0, 0],
[0, 1, 6],
[1, 1, 2],
[2, 1, 9],
[3, 1, 4],
[4, 1, 2],
[0, 2, 7],
[1, 2, 8],
[2, 2, 3],
[3, 2, 6],
[4, 2, 1],
[0, 3, 0],
[1, 3, 2],
[2, 3, 4],
[3, 3, 8],
[4, 3, 9],
[0, 4, 9],
[1, 4, 1],
[2, 4, 2],
[3, 4, 3],
[4, 4, 5]
],
label: {
show: true,
formatter: '{@[2]}'
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)',
opacity: 0.8
}
},
// 其他配置项...
}
};


该例子展示了一个简单的二维热力图,其中每个数据点对应一个值,颜色越深表示该点的值越大。通过配置 label 和 itemStyle 等属性,可以调整每个数据点的数值标签和鼠标悬浮时的样式等。