Echart接口快速识别

echart：图表构建对象

 // 新建图表实例
echart.init(
    dom?: HTMLDivElement|HTMLCanvasElement,    // 容器 一般是具有宽高的div
    theme?: Object|string,                 // 主题 默认light|dark 也可自定义主题
    opts?: {}                            // 配置详情见 https://echarts.apache.org/zh/api.html#echarts
) => ECharts

echarts.connect([chart1, chart2]);        // 使两个图表实例联动

echart.disconnect(['echart1','echart2'])     // 移除两个图表实例联动        

echart.dispose()            // 销毁图表实例 

echart.getInstanceByDom()    // 获取dom容器实例

import {BarChart} from 'echarts/charts';
echart.use([BarChart])        // 注册图表相关组件

echart.registerTheme:Function    // 注册图表主题

echartInstance：图表实例

echartInstance.group:string|number // 图表实例所属分组，用于实现图表之间联动 

echartInstance.setOption(option: Object, notMerge?: boolean, lazyUpdate?: boolean)
//  图表实例的配置项以及数据，参数和数据修改后自动刷新图表
// notMerge:是否和之前的配置合并    lazyUpdate:是否实时

option({
    title:{...}        // 标题组件，包含主标题和副标题。
    legend:{...}        // 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
    grid:{...}        // 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴
    xAxis:{...}        // 直角坐标系 grid 中的 x 轴
    yAxis:{...}        // 直角坐标系 grid 中的 y 轴
    polar:{...}        // 极坐标系 每个极坐标系拥有一个角度轴和一个半径轴。
    radiusAxis:{...}    // 极坐标的半径轴   
    angleAxis:{...}    // 极坐标的角度轴
    radar:{...}    // 雷达图坐标系
    dataZoom:{...}    // 区域缩放
    visualMap:{...}   // 视觉映射组件
    tooltip:{...}    // 提示组件
    axisPointer:{...}    // 坐标轴指示器：显示当前坐标刻度
    toolbox:{...}   // 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
    brush:{...}    // 区域选择组件
    geo:{...}    // 地理坐标系 
    parallel：{...}    // 平行坐标系：可视化高维数据图表
    parallelAxis:{...}    // 平行坐标系坐标轴
    singleAxis:{...}    // 单轴 展示一维数据
    timeline:{...}    // timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。
    graphic:{...}    // 原生图形元素组件
    calendar:{...}    // 日历坐标系 
    dataset:{...}    // 数据集合
    aria:{...}    // 无障碍访问
    series：？    // 有待深入研究
    darkMode:boolean    // 是否暗黑模式
    color:Array<string>    // 调色盘颜色
    backgroundColor:string   // 背景颜色
    textStyle:{...}    // 全局的字体样式
    animation:boolean  // 是否开启动画
    animationThreshold:boolean    // 是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。
    animationDuration:Function|number  // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果
    animationEasing:string   // 初始动画的缓动效果
    animationDelay：Function|number     // 初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果
    animationDurationUpdate:number |Function   //  数据更新动画的时长,支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果
    animationEasingUpdate:string    // 数据更新动画的缓动效果
    animationDelayUpdate:number|Function  //  数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
    stateAnimation:{...}    // 状态切换的动画配置，支持在每个系列里设置单独针对该系列的配置
    blendMode:string    // 图形的混合模式
    hoverLayerThreshold：number  // 图形数量阈值，决定是否开启单独的 hover 层，在整个图表的图形数量大于该阈值时开启单独的 hover 层
    useUTC:boolean    // 是否使用UTC时间
    options:{...}    // 用于 timeline 的 option 数组。数组的每一项是一个 echarts option
    media:{...}       // 移动端
)}

echartInstance.getWidth()      // 获取图表实例宽度

echartInstance.getHeight()       // 获取图表实例高度 

 echartInstance.getDom()        // 获取图表实例dom节点

echartInstance.getOption()     // 获取图表实例配置

 // 改变图表尺寸或容器宽高发生改变，图表宽高自适应
echartInstance.resize(opts?: {
    width?: number|string,
    height?: number|string,
    silent?: boolean,
    animation?: {
        duration?: number        // 动画持续时间 默认0 不应用动画
        easing?: string            
    }
}) => ECharts   

// 触发图表行为
echartInstance.dispatchAction({
    type: 'dataZoom',
    batch: [{
        // 第一个 dataZoom 组件
        start: 20,
        end: 30
    }, {
        // 第二个 dataZoom 组件
        dataZoomIndex: 1,
        start: 10,
        end: 20
    }]
})

// 绑定事件处理函数
echartInstance.on(
    eventName: string,    // 事件名称,例如click
    query: string|Object,    // 过滤指定触发时间的组件或元素
    handler: Function,        // 事件回调
    context?: Object            // 事件回调指向
)    

// 解绑事件处理函数
echartInstance.off(eventName: string, handler?: Function)

// 显示加载动画效果。可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。
echartInstance.showLoading(type?: string, opts?: Object)
opt:{
  text: 'loading',
  color: '#c23531',
  textColor: '#000',
  maskColor: 'rgba(255, 255, 255, 0.8)',
  zlevel: 0,
  // 字体大小。从 `v4.8.0` 开始支持。
  fontSize: 12,
  // 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
  showSpinner: true,
  // 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
  spinnerRadius: 10,
  // 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
  lineWidth: 5,
  // 字体粗细。从 `v5.0.1` 开始支持。
  fontWeight: 'normal',
  // 字体风格。从 `v5.0.1` 开始支持。
  fontStyle: 'normal',
  // 字体系列。从 `v5.0.1` 开始支持。
  fontFamily: 'sans-serif'
}

echartInstance.hideLoading()            // 隐藏加载动画

// 导出图表图片，返回一个 base64 的 URL
echartInstance.getDataURL(opts: {
    // 导出的格式，可选 png, jpg, svg
    // 注意：png, jpg 只有在 canvas 渲染器的时候可使用，svg 只有在使用 svg 渲染器的时候可用
    type?: string,
    // 导出的图片分辨率比例，默认为 1。
    pixelRatio?: number,
    // 导出的图片背景色，默认使用 option 里的 backgroundColor
    backgroundColor?: string,
    // 忽略组件的列表，例如要忽略 toolbox 就是 ['toolbox']
    excludeComponents?: Array.<string>
}) => string

// 导出联动的图表图片，返回一个 base64 的 URL
echartInstance.getConnectedDataURL(opts: {
    // 导出的格式，可选 png, jpeg
    type?: string,
    // 导出的图片分辨率比例，默认为 1。
    pixelRatio?: number,
    // 导出的图片背景色，默认使用 option 里的 backgroundColor
    backgroundColor?: string,
    // 忽略组件的列表，例如要忽略 toolbox 就是 ['toolbox']
    excludeComponents?: Array.<string>
}) => string

//  移除图表实例的所有组件和图表
echartInstance.clear()

// 判断当前图表实例是否已释放
echartInstance.isDisposed()

// 释放当前图表实例
echartInstance.dispose()

ECharts 中支持的图表行为，通过 dispatchAction触发。

echartInstance.dispatchAction({
    type: string   // highlight:高亮  downplay：取消高亮  select：指定选中样式  unselect：取消选中   toggleSelected：切换选中状态 ... 其余需引入相关组件使用
    seriesIndex?: number | number[],
    seriesId?: string | string[],
    seriesName?: string | string[],
    dataIndex?: number | number[],
    name?: string | string[],
});


geoEchartInstance.dispatchAction({        // 地图图表行为
    type: 'highlight',
    geoIndex?: number | number[],
    geoId?: string | string[],
    geoName?: string | string[],
    name?: string | string[],
});

Echart事件：鼠标事件和相应组件的事件