天天看点

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)