抽取数据形成二维数组 用于散点图的两个坐标轴
具体配置项:
x轴和y轴都是数值轴
yAxis: { type: 'value', scale:true, // 轴的起点 不从0开始 (智能匹配) name: '体重(kg)' }, xAxis: { type: 'value', scale:true, name: '身高(cm)' },
通过函数形式决定提示框展示内容
tooltip: {// 提示框组件。// trigger:'item' 默认的鼠标移动到色块上触发 trigger: 'item', formatter:function (args) { return ` 编号:${args.dataIndex} <br/> 身高:${args.value[0]}cm <br/> 体重:${args.value[1]}kg ` } }
系列里面的配置 注释写的很详细
series: [ { name: '身高体重散点', //type: 'scatter', // scatter 是普通散点图 type:'effectScatter',// type : 带涟漪动画的散点图 showEffectOn:'emphasis', // 触发效果 render 自动 emphasis 鼠标经过的触发 rippleEffect:{ scale:4 // 激活时的波纹步长 }, data:abc, // 上面定义的数据 symbolSize:function (arg) { // 每个点的大小可以通过回调函数配置 let hhh = arg[0] / 100 let www = arg[1] // bmi = 体重KG / 身高m*身高m 结果大于28就是超标 let bmi = www/(hhh*hhh) if (bmi > 28){ return 12 } return 7 }, itemStyle:{ color:function (arg) { // 每个点颜色可以通过回调函数配置 let hhh = arg.data[0] / 100 let www = arg.data[1] // bmi = 体重KG / 身高m*身高m 结果大于28就是超标 let bmi = www / (hhh * hhh) if (bmi > 28){ return '#f35' } return '#107ea4' }, } } ]
完整代码:
let scatterData = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }......]
let abc = []
scatterData.forEach(item =>{
let hhh = item.height
let www = item.weight
let SArr = [hhh,www]
abc.push(SArr)
})
let mCharts = echarts.init(document.querySelector('#main'))
let options1 = {
title: {
text: '散点图'
},
yAxis: {
type: 'value',
scale:true,
name: '体重(kg)'
},
xAxis: {
type: 'value',
scale:true,
name: '身高(cm)'
},
tooltip: {// 提示框组件。// trigger:'item' 默认的鼠标移动到色块上触发
trigger: 'item',
//formatter:'身高:{b}<br/>体重:{c}'
formatter:function (args) {
//console.log(args)
return `
编号:${args.dataIndex} <br/>
身高:${args.value[0]}cm <br/>
体重:${args.value[1]}kg `
}
},
series: [
{
name: '身高体重散点',
//type: 'scatter', // scatter 是普通散点图
type:'effectScatter',// type : 带涟漪动画的散点图
showEffectOn:'emphasis', // 触发效果 render 自动 emphasis 鼠标经过的触发
rippleEffect:{
scale:4 // 激活时的波纹步长
},
data:abc, // 上面定义的数据
symbolSize:function (arg) { // 每个点的大小可以通过回调函数配置
let hhh = arg[0] / 100
let www = arg[1]
// bmi = 体重KG / 身高m*身高m 结果大于28就是超标
let bmi = www/(hhh*hhh)
if (bmi > 28){
return 12
}
return 7
},
itemStyle:{
color:function (arg) { // 每个点颜色可以通过回调函数配置
let hhh = arg.data[0] / 100
let www = arg.data[1]
// bmi = 体重KG / 身高m*身高m 结果大于28就是超标
let bmi = www / (hhh * hhh)
if (bmi > 28){
return '#f35'
}
return '#107ea4'
},
}
}
]
}
mCharts.setOption(options1)