option = {
title: {
text: '散点图示例'
},
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
name: '散点图',
type: 'scatter',
data: [
{ value: [10, 20, 'A'] },
{ value: [20, 50, 'B'] },
{ value: [30, 70, 'C'] },
{ value: [40, 30, 'D'] },
{ value: [50, 40, 'E'] },
// 更多数据点...
],
symbolSize: 10,
itemStyle: {
color: 'blue'
},
label: {
show: true,
formatter: function (params) {
return params.value[2]; // 显示第三个维度的值('A', 'B', 'C', ...)
},
position: 'top'
},
emphasis: {
label: {
show: true,
formatter: function (params) {
return params.value[2]; // 高亮状态下也显示第三个维度的值
}
}
}
}
],
tooltip: {
show: true,
formatter: function (params) {
const data = params.value;
return `X: ${data[0]}, Y: ${data[1]}, Category: ${data[2]}`;
}
}
};
在这个例子中,数据点的每个值是一个包含 x 轴、y 轴和第三个维度(在这里是一个字符串,表示类别)的数组。label 的 formatter 用于在标签上显示第三个维度的值,tooltip 的 formatter 用于在提示框中显示详细信息。
通过这种方式,您可以根据实际需求在散点图的提示框中显示特定的信息。
转载请注明出处:http://www.zyzy.cn/article/detail/5409/ECharts