echarts折线图定制化

前段时间有个需求需要实现如下折线图效果，于是研究了一下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 = ``+tipData.displayDate+'
'+tipData.tradeAmountAfterTax+` 

`

                                        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)