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)