散点图适用于三维数据集,但其中只有两维需要比较。
散点图
- ECharts基本构建代码结构
- 准备x轴和y轴数据,二维数组[[身高,体重],[]…]
- 将type的值设置为scatter,x轴和y轴的type都是value
- 准备和处理json数据
//准备数据 数据太多只拿出一部分
var data = [{
"gender": "female",
"height": 161.2,
"weight": 51.6
}, {
"gender": "female",
"height": 167.5,
"weight": 59
}, {
"gender": "female",
"height": 159.5,
"weight": 49.2
}, {
"gender": "female",
"height": 157,
"weight": 63
}, {
"gender": "female",
"height": 155.8,
"weight": 53.6
}]
//处理数据
var axisData = []
for (var i = 0; i < data.length; i++) {
var height = data[i].height
var weight = data[i].weight
var newArr = [height, weight]
axisData.push(newArr)
}
- 准备ECharts图表容器
<div style="width: 600px;height:400px"></div>
- 初始化ECharts实例
var mCharts = echarts.init(document.querySelector("div"))
- 配置配置项
var option = {
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [{
type: 'scatter', // 指明图表的类型为散点图
data: axisData
}]
}
- 将配置项设置给echarts实例
mCharts.setOption(option)
散点图样式
- 缩放,脱离0值比例 -scale
xAxis: {
type: 'value',
//缩放,脱离0值比例
scale: true
},
yAxis: {
type: 'value',
scale: true
},
- 带涟漪动画的散点图
type: 'effectScatter'
- 出现涟漪动画的时机
//render 绘制完成后显示 emphasis 高亮的显示
showEffectOn: 'emphasis'
- 涟漪动画时, 散点的缩放比例
rippleEffect: {
scale: 10 // 涟漪动画时, 散点的缩放比例
},
- 控制散点的样式 -itemStyle
- 控制散点的大小 -symbolSize