首先我这里实现的是，不管在统计图上点击那里，tip提示框一定在折线上面移动，并且在圆点上方显示。而不是跟着你的鼠标或者手势的位置移动。这种跟着手势移动的太简单了，等会儿讲原因。这也是我那可爱的UI妹子设计的，我真的查echarts的配置项文档查了好久啊啊。T_T。。。。。
还有一点很重要，像这种插件，是真的要在官方api上面去查，里面全一些。不要说觉得太多了，懒得看，作为一个小菜鸡，还是要先学会静下心来看文档的。我就是懒得看，但这次也是被逼的没办法。
首先这是我这个项目需要实现的效果
就是手势或鼠标在图上面滑动或者点击的时候，灰色的框框只会在折线上面滑动
讲解一下配置
echarts图里面主要就是option的配置了。
const option = {
title: {
text: '累计净化空气量',
padding: 25,
textStyle: {
// 文字颜色
color: '#000',
// 字体风格,'normal','italic','oblique'
fontStyle: 'normal',
// 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight: 'normal',
// 字体系列
fontFamily: 'sans-serif',
// 字体大小
fontSize: 16,
padding: [25, 10, 5, 10]
}
},
grid: {
// 左右边距
left: 30,
right: 30
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none' // 删除标线,显示就是line
},
formatter: '{c}ml' + '<p id="tipCircle"></p>', // {c} 就是y的值 {a} <br/>
position: function (point, params, dom, rect, size) {
// point 代表的是，你手势或者鼠标点击时的坐标x 就是point[0],y 就是point[1]
// params 就是当前x轴跟y轴的值 x params[0].axisValue, y params[0].value
// dom 就是当前画布的元素dom
// rect 折线图这个参数没啥卵用，感兴趣自己查配置项
// size 包括 dom 的尺寸和 echarts 容器的当前尺寸，自己可以打印出来看看
console.log(point)
// x = params[0].axisValue
// y = params[0].value
// 获取y最大的值
const maxY = Math.max.apply(null, dataY)
// 为什么获取y的最大值，因为api配置文档里面根本没有获取y轴上面的最大值，
// 在下面yAxis属性里面配置，往下找
// 要自己去配置，将数据里面的最大值设置成为y轴刻度上的最大值，这样计算出来的才准确
// 我这里的y轴上竖着的方向距离画布的顶端和低端大概有60的长度，这个要根据自己的图的情况去减。 计算y的平均值
const pecentY = (size.viewSize[1] - 60 * 2) / maxY
// 计算 y 的坐标
const pointY = 60 + (size.viewSize[1] - 60 * 2) - pecentY * params[0].value
// 计算x轴的平均
const pecentX = (size.viewSize[0] - 30 * 2) / that.axisX.length
// 计算 x 轴的坐标，这里先初始化，是当前手势或者鼠标点击的x轴的坐标
let pointX = point[0]
// 先获取到当前x的数据，然后再数据数组里面找到是第几个数据
// console.log(params[0].axisId)
let num = dataX.indexOf(params[0].axisValue)
// 计算x轴的坐标，先要加上之前设置的一个padding30，然后再加上1/2的平均值，再加上所占的值
pointX = 30 + pecentX / 2 + num * pecentX
// 这里是设置tip下面的那个小三角的，其实是新增的一个元素，然后给定位
document.getElementById('tipCircle')
.setAttribute('style', 'width: 12px;' +
'height: 12px;bottom: -6px;' +
'background: rgb(111,111,111);' +
'transform: rotate(45deg);' +
'left:' + size.contentSize[0] * 2 / 5 + 'px;' +
'position: absolute')
// 返回tip提示框的位置
return [pointX - size.contentSize[0] / 2, pointY - size.contentSize[1] - 15]
}
},
extraCssText: ' width:160px; height:40px; background:red; ',
xAxis: {
data: dataX,
axisLine: {
show: true,
lineStyle: {
color: '#d9d9d9',
width: 1
}
},
axisLabel: {
show: true,
textStyle: {
color: '#666' // x轴的颜色
}
},
axisTick: {
show: false
}
},
yAxis: {
show: false,
splitLine: {
show: false
},
// 将数据中的最大值设置成Y轴刻度上的最大值，这样有利于计算tip坐标
max: 'dataMax'
},
series: [
{
name: '净化量',
// symbol: 'circle', // 设定为实心点
symbolSize: 10, // 设定实心点的大小
smooth: false, // 这句就是让曲线变平滑的
type: 'line',
width: 40,
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[ // 渐变颜色
{
offset: 0, color: '#B9DBFF'},
{
offset: 0.8, color: '#ddecff'},
{
offset: 1, color: '#fff'}
]
)
}},
data: dataY,
itemStyle: {
normal: {
color: '#0878f6',
lineStyle: {
color: '#0878f6',
width: 3
}
}
},
labelLine: {
normal: {
show: false
}
}
}]
}以上就是我完成这个ui图的option配置代码，其中的dataX,dataY都是自己模拟的数据，可以自己去模拟，格式是[ {x, y}, {x, y}….]这种形式的。这里计算tip Y坐标的位置最重要的配置就是下面中的yAxis.max属性。因为echart会根据你给的数据来生成最合适的Y轴的间隔和刻度，这个刻度的最大值是获取不到的，但是如果我们获取不到，那就不让他自动生成，让我们自己来设置。但是这个有一个缺点就是，自己设置的数据没有自动生成的完整，自动生成的是一个整数，但是我们自己设置的，就拿我这个来说，这个最大值不是一个可以被10整除的数，比如我的最大值是2345，这个数值肯定没有自动生成的2500排在坐标轴上面好看。但是我的这个UI需要把Y轴隐藏掉，所以就没有这个烦恼啦啦啦。
yAxis: {
show: false,
splitLine: {
show: false
},
// 将数据中的最大值设置成Y轴刻度上的最大值，这样有利于计算tip坐标
max: 'dataMax'
},以上 ^ _ ^ ~