前段时间有个需求需要实现如下折线图效果，于是研究了一下echarts
实现过程中主要遇到如下几个问题
一、默认显示tooltips
that.myChart.dispatchAction({
type: "showTip",
seriesIndex: 0, //第几条series
dataIndex: 0, //第几个tooltip
// position: [offsetX,offsetY]
});
二、自定义tooltips样式,根据坐标点显示tooltips的位置，尤其是边界位置防止tooltip显示不全或者超出区域
tooltip: {
axisPointer: {
type: 'line',
lineStyle: {
color: '#FF3333',
type: 'solid',
// width: 0
},
triggerTooltip: true,
label: {
show: false
},
},
triggerOn:'click',
trigger: 'axis',
borderRadius: 8,//边框圆角
enterable: true,
backgroundColor: 'transParent',
textStyle: {
color: '#fff',
padding: 5
},
confine: true,//折线图限定在当前区域
position:function(p,params,dom, rect, size) {
let x = 0,y = 0
let boxWidth = size.contentSize[0]
if(dateList.length>12) {
if(params[0].dataIndex<3 || params[0].dataIndex==dateList.length-1) {
console.log('valueList',valueList)
if(underZero && allZero) {
x = p[0] - 24
y = p[1] + 100
console.log('yyy',y)
}else {
x = p[0] - 24
y = p[1] - 120
}
}else {
if(underZero && allZero) {
x = (params[0].dataIndex*9-14)
y = p[1] + 100
}else {
x = (params[0].dataIndex*9-14)
y = p[1] - 120
}
}
}else {
if(underZero && allZero) {
x = p[0] - 24
y = p[1] + 100
}else {
x = p[0] - 24
y = p[1] - 120
}
}
offsetX = x
offsetY = y
return [x, y];
},
formatter:(params,dom)=> {
let tipData = data[params[0].dataIndex]
var queryDate = tipData.queryDate
let financeType = this.itemIndex=='1' ? 'I' : 'O'
let goToUrl = 'XXX?date='+tipData.queryDate+'&financeType='+financeType+'&dateType='+this.type
let pos = 'left:'+ offsetX + 'px'
if(params[0].dataIndex==dateList.length-1) {
pos = 'right:'+'4.6456653px'
}
if(params[0].dataIndex==dateList.length-3) {
let num = 0.6456653*2-(-4)
pos = 'right:'+'5.2913306px'
}
let html = ''
html = `<div style="color:#fff;background:#FF3333;padding:5px;border-radius:8px" id="clickItem" href="${queryDate}" target="blank">`+tipData.displayDate+'<br/>'+tipData.tradeAmountAfterTax+` <a style="display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #fff;"></a></a></div>`
return html
},
extraCssText:'text-align:center;'
},
三、解决默认tooltip的点击事件无反应问题
setTimeout(()=>{
window.tipsClick = that.tipsClick()
},0)
四、tooltips添加点击事件
that.myChart.getZr().on("click", eConsole);
function eConsole(param) {
if (param.type == 'click') {
that.tipsClick()
}
}
tipsClick() {
if(document.getElementById('clickItem')) {
let href = document.getElementById('clickItem').getAttribute('href')
let that = this
document.getElementById('clickItem').addEventListener('click',()=>{
that.$router.push({
path: 'XXX',
query: { }
})
})
}
},
五、切换数据时折线图显示有问题，缩成一团
this.myChart.dispose()//数据重新加载时清空原来的图表，解决数据切换的时候当前高亮坐标点和tooltip指示点不一致问题
六、适配iPad
media: [
{
query: {}
}，
{
query: {//适配iPad
minWidth: 768,
maxWidth: 1024,
},
option: {
graid: {},
tooltip: {}
}
}]
七、默认坐标点不展示高亮问题、默认下标为0时不显示tooltip的问题
setTimeout(()=>{
//解决默认坐标点不展示高亮问题
that.myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
});
//解决默认下标为0时不显示的问题
that.myChart.dispatchAction({
type: "showTip",
seriesIndex: 0, //第几条series
dataIndex: 0, //第几个tooltip
// position: [offsetX,offsetY]
});
window.tipsClick = that.tipsClick()
},0)
