option = {
title: {
text: '涟漪特效散点图标域'
},
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
name: '散点图',
type: 'scatter',
data: [
[10, 20, 50],
[20, 50, 80],
[30, 70, 120],
[40, 30, 40],
[50, 40, 90],
// 更多数据点...
],
symbolSize: 10,
itemStyle: {
color: 'blue'
},
emphasis: {
label: {
show: true,
formatter: '{a}'
}
},
// 涟漪动画配置
rippleEffect: {
period: 4,
scale: 4,
brushType: 'stroke'
}
}
],
visualMap: {
min: 0,
max: 120,
calculable: true,
inRange: {
color: ['blue', 'green', 'yellow', 'red'] // 颜色范围,可以根据实际需求调整
},
seriesIndex: 0 // visualMap 要映射的系列索引,这里是第一个系列
}
};
在这个例子中,visualMap 用于配置映射规则:
- min: 映射的最小值。
- max: 映射的最大值。
- calculable: 是否显示拖拽用于调整映射值的控件。
- inRange: 颜色范围,可以根据实际需求调整。
- seriesIndex: visualMap 要映射的系列索引,这里是第一个系列。
这样,涟漪特效的散点图就根据数据的大小映射到了颜色上,提供了更直观的视觉体验。
转载请注明出处:http://www.zyzy.cn/article/detail/5412/ECharts