实现效果如图
点击 1 根据接口数据动态生成 2,并根据接口中的数据字段为数据渲染不同颜色,并且鼠标覆盖上去的提示信息不是渲染该数据点的值,而是根据接口获取下来的提示信息
接口返回数据如下图
1 =》红点 x 方向 数据
2 =》黑点 x 方向数据
3 =》黑点 提示信息 (echarts中tooltip)的数据来源
4 =》红点 提示信息 (echarts中tooltip)的数据来源
重点来了 配置 echarts 如下
// 点击右侧点触发
getDotByElevation(elevation) {
// data中配置eharts
// const optionLine = {
// xAxis: {},
// yAxis: {},
// series: []
// }
// elevation y轴方向点击的值
this.$api.request({
path: '/erosion/getErosion',
method: 'get',
params: { elevation }
}).then( ({ data }) => {
const obj = data[0]
const arr = [
// 红点
{
// x,y
value: [obj.current,elevation],
// 点颜色
itemStyle: { color: 'rgb(252,85,49)' },
// 鼠标覆盖上 提示信息
tooltip: {
formatter: () => {
return '我是红点<br/>' + obj.slagThickness
}
}
},
// 黑点
{
// x,y
value: [obj.max,elevation],
// 点颜色
itemStyle: { color: 'rgb(79,79,79)' },
// 鼠标覆盖上 提示信息
tooltip: {
formatter: () => {
return '我是黑点<br/>' + obj.residualThickness
}
}
}
]
// 下面代码主要是本人业务逻辑,仅供各位老铁参考
/**
* 查找当前系列
* 1 原因避免多次添加echarts散点系列
* 2 避免用户重复点击右侧点 添加多次数据点
*/
//
let isIndex = this.optionLine.series.findIndex( item => item.id === 'echar')
// 非第一次添加
if(isIndex > - 1) {
this.optionLine.series[isIndex].data.forEach((item,inx)=>{
if(item.value[1] === elevation) {
// 删除重复点击一个点所添加的数据
this.optionLine.series[isIndex].data.splice(inx,1)
}
})
this.optionLine.series[isIndex].data.push(...arr)
}
// 第一次添加
else {
const echarObj = {
id: 'echar',
type: 'scatter',
symbol: 'roundRect', // 点形状
symbolSize: 6, // 点大小
data: [],
dataType: 0,
label: {
show: true,
formatter: ''
}
}
echarObj.data.push(...arr)
this.optionLine.series.push(echarObj)
}
})
}