echarts 图表设置默认选中

一、数据图形

import * as echarts from 'echarts'
const myChart = echarts.init(document.querySelector('pie'))

官方文档 events
官方文档 action

设置高亮

myChart.dispatchAction({
    type: "highlight",
    //seriesIndex:number | array系列 index,可以是一个数组指定多个系列
    seriesIndex: 0,
    //dataIndex:number 数据的 index
    dataIndex: 1
})

取消高亮

一般适用于设置默认高亮之后,点击图表之后,取消高亮

myChart.dispatchAction({
    type: "downplay",
    //seriesIndex:number | array   系列 index,可以是一个数组指定多个系列
    seriesIndex: 0,
    //dataIndex:number 数据的 index
    dataIndex: 1
})

二、图例

默认选中图例

myChart.dispatchAction({
    type: 'legendSelect',
    // 图例名称
    name: string
})

取消选中图例

myChart.dispatchAction({
    type: 'legendUnSelect',
    // 图例名称
    name: 'string'
})

切换图例选中状态

myChart.dispatchAction({
    type: 'legendToggleSelect',
    // 图例名称
    name: string
})

控制图例的滚动

myChart.dispatchAction({
    type: 'legendScroll',
    scrollDataIndex: number,
    legendId: string
})

三、提示框 tip

显示提示框

myChart.dispatchAction({
    type: "showTip",
    seriesIndex: 0,
    dataIndex: 1
})

说明
对echarts图表的数据进行更新

let option = myChart.getOption()
// 这里可以直接设置option里的各项配置
...
myChart.setOption(option)

上面是直接更新图表,如果需要让图表进行重绘,则需要

myChart.clear()
myChart.setOption(option)
posted @   槑孒  阅读(1476)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示