美文网首页
echarts 折线图 模拟鼠标点击事件(默认选中)

echarts 折线图 模拟鼠标点击事件(默认选中)

作者: 李佳明先生 | 来源:发表于2018-12-20 18:29 被阅读0次

    项目中遇到个需求,用户刚打开页面时,折线图当前日期的拐点高亮并显示label,如图:


    可能这个需求比较特殊,度娘了半天没有找到,最后在echarts的官方文档中找到了,用到的是dispatchAction这个api,
    文档如下:

    触发图表行为,例如图例开关`legendToggleSelect`, 数据区域缩放`dataZoom`,显示
    提示框`showTip`等等
    

    文档传送门
    demo如下:

    //这里我们模拟鼠标的点击事件
    myChart.dispatchAction({
                                    type: 'highlight',
                                    dataIndex:that.date-1
                                });
    

    action.highlight

    高亮指定的数据图形。
    通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name

    dispatchAction({
        type: 'highlight',
        // 可选,系列 index,可以是一个数组指定多个系列
        seriesIndex?: number|Array,
        // 可选,系列名称,可以是一个数组指定多个系列
        seriesName?: string|Array,
        // 可选,数据的 index
        dataIndex?: number,
        // 可选,数据的 名称
        name?: string
    })
    

    相关文章

      网友评论

          本文标题:echarts 折线图 模拟鼠标点击事件(默认选中)

          本文链接:https://www.haomeiwen.com/subject/dklukqtx.html