美文网首页
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 折线图 模拟鼠标点击事件(默认选中)

    项目中遇到个需求,用户刚打开页面时,折线图当前日期的拐点高亮并显示label,如图: 可能这个需求比较特殊,度娘了...

  • echarts之自动切换折线图

    echarts有legend控件可以控制多个折线图之间的切换 其实legend里面有个选中属性默认选中第一项“财经...

  • echarts 折线图如何添加点击事件

    给echarts折线图的某个点添加点击事件,并打印横纵坐标点的数据。 实现效果 点击事件 echart添加点击事件...

  • Fabric.js 右键菜单

    本文简介 Fabric.js 默认没提供 鼠标右键事件,只有 鼠标按键点击 、鼠标按键抬起 、鼠标移动 等事件。但...

  • echars配置

    圆形配置 ECharts 中事件分为两种类型: 用户鼠标操作点击,如 'click'、'dblclick'、'mo...

  • vue+elementUi+echarts 折线图组件

    echarts官网 效果 ? 此图并非折线图饼图联动 折线图饼图联动组件飞机票 ?饼图点击事件再饼图组件中 饼图组...

  • 事件

    (1)、鼠标事件: 鼠标点击事件(单击): onclick 鼠标点击事件(...

  • 阻止默认行为 鼠标事件 禁止选中

    阻止默认行为 默认行为:如鼠标按下右键时会出现菜单就是默认行为e.preventDefault() 不兼容低版本I...

  • Echarts鼠标事件阻止冒泡

    不知道大家在使用echarts的鼠标事件时,有没有类似弹窗那种需求(点击弹窗外的遮罩区域,弹窗消失):此处即点击图...

  • 鼠标事件

    1. 鼠标事件 // 点击事件 onclick // 双击事件 ondblclick // 鼠标右键点击事件 on...

网友评论

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

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