zoukankan      html  css  js  c++  java
  • ECharts学习总结(四):echarts的实例方法

    echarts的实例方法非常重要,因为在实际运用中我们额图表的数据不可能是死的,而是动态变化的,实例方法为动态改变数据提供了方法。故特意从官网上面把下面实例方法进行记录:

    注:下面内容摘自echarts官网,原文地址:http://echarts.baidu.com/doc/doc.html#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95

    实例指的就是接口init()返回的对象,即上述代码中的“myChart”,非get接口均返回自身self支持链式调用

    名称参数描述
    {self} setOption {Object} option,
    {boolean=} notMerge
    万能接口,配置图表实例任何可配置选项(详见option),多次调用时option选项默认是合并(merge)的,merge的设计可以让setOption很方便的成为更新任何属性的万能方法,比如你仅需要改title文字,则仅需要:
        setOption({title : {text : '新标题'}});
    如果不需要,可以通过notMerger参数为true阻止与上次option的合并,如多次setOption间数据改变、长度不一致等的场景。

    2.0.0起支持timeline组件,option中包含timeline(详见timeline)时每一个独立的option应该放置到命名为options的数组内,如
    myCharts.setOption({
        timeline : {...},
        options : [
            {                // option1
                title : {...},
                series : [...]
            },
            {...},           // option2
            ...
        ]
    });
    {Object} getOption {void} 返回内部持有的当前显示option克隆(拷贝)。
    {self} setSeries {Array} series,
    {boolean=} notMerge
    数据接口,驱动图表生成的数据内容(详见series),效果等同调用 setOption({series : {...}}, notMerge)
    {Object} getSeries {void} 返回内部持有的当前显示series克隆(拷贝),效果同 getOption().series
    {self} addData 单组数据:
    {number} seriesIdx
    {number | Object} data
    {boolean=} isHead
    {boolean=} dataGrow
    {string=} additionData
    多组数据添加:
    {Array} params
    动态数据接口,try this (Line & Bar) » try this (Scatter & K) » try this (Pie & Radar) »
    seriesIdx 系列索引
    data 增加数据
    isHead 是否队头加入,默认,不指定或false时为队尾插入
    dataGrow 是否增长数据队列长度,默认,不指定或false时移出目标数组对位数据
    additionData 是否增加类目轴(饼图为图例)数据,附加操作同isHead和dataGrow
    多组数据添加时参数为:
    params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]
    {self} addMarkPoint {number} seriesIdx
    {Object} markData
    新增标注接口,其中
    seriesIdx 系列索引
    markData [标注]对象,同series.markPoint,支持多个
    {self} addMarkLine {number} seriesIdx
    {Object} markData
    新增标线接口,其中
    seriesIdx 系列索引
    markData [标线]对象,同series.markLine,支持多个
    {self} delMarkPoint {number} seriesIdx
    {string} markName
    删除单个标注接口,其中
    seriesIdx 系列索引
    markName [标注]名称
    {self} delMarkLine {number} seriesIdx
    {string} markName
    删除单个标线接口,其中
    seriesIdx 系列索引
    markName [标线]名称,已构建的标线名称默认为markLine数据中起始点的name,如果同时终点也有name属性,如地图标线,则标线名称等于“nameStart > nameEnd”,如markLine的data为
    [{name:'北京', value:100}, {name:'上海'}]
    则删除该标线时传入的markName为 "北京 > 上海"
    {self} on {string} eventName,
    {Function} eventListener
    事件绑定,事件命名统一挂载到require('echarts/config').EVENT(非模块化为echarts.config.EVENT)命名空间下,建议使用此命名空间作为事件名引用,当前版本支持事件有:
    -----------------------基础事件-----------------------
    REFRESH(刷新),
    RESTORE(还原),
    RESIZE(显示空间变化),
    CLICK(点击),
    DBLCLICK(双击),
    HOVER(悬浮),
    MOUSEOUT(鼠标离开数据图形),
    ---------------------交互逻辑事件--------------------
    DATA_CHANGED(数据修改,如拖拽重计算),
    DATA_VIEW_CHANGED(数据视图修改),
    MAGIC_TYPE_CHANGED(动态类型切换),
    TIMELINE_CHANGED(时间轴变化),
    DATA_ZOOM(数据区域缩放),
    DATA_RANGE(值域漫游),
    DATA_RANGE_SELECTED(值域开关选择),
    DATA_RANGE_HOVERLINK(值域漫游hover),
    LEGEND_SELECTED(图例开关选择),
    LEGEND_HOVERLINK(图例hover),
    MAP_ROAM(地图漫游),
    MAP_SELECTED(地图选择),
    PIE_SELECTED(饼图选择),
    FORCE_LAYOUT_END(力导向布局结束)
    事件调试 »
    {self} un {string} eventName,
    {Function} eventListener
    事件解绑定
    {self} setTheme {string | Object} theme 设置主题,内置主题('macarons', 'infographic')直接传入名称,自定义扩展主题可传入主题对象
    {self} connect {ECharts | Array <ECharts>} connectTarget 多图联动,传入联动目标为EChart实例,支持数组。多图联动支持直角系下tooltip联动,保存图片的自动拼接,同时支持的联动事件有:
    REFRESH,RESTORE,MAGIC_TYPE_CHANGED
    DATA_ZOOM,DATA_RANGE,LEGEND_SELECTED
    多图联动 »
    {self} disConnect {ECharts | Array <ECharts>} connectTarget 解除已连结的多图联动
    {self} showLoading {Object} loadingOption 过渡控制(详见loadingOption),显示loading(读取中) try this »
    {self} hideLoading {void} 过渡控制,隐藏loading(读取中)
    {ZRender} getZrender {void} 获取当前图表所用ZRender实例,可用于添加额外图形或进行深度定制,zrender接口详见ZRender
    {string} getDataURL {string=} imgType 获取当前图表的Base64图片dataURL,IE8-不支持,imgType 图片类型,支持png|jpeg,默认为png
    {Dom} getImage {string=} imgType 获取一个当前图表的img,imgType 图片类型,支持png|jpeg,默认为png
    {self} resize {void} ECharts没有绑定resize事件,显示区域大小发生改变内部并不知道,使用方可以根据自己的需求绑定关心的事件,主动调用resize达到自适应的效果,常见如window.onresize = myChart.resize。
    {self} refresh {void} 刷新图表,图例选择、数据区域缩放,拖拽状态均保持。
    {self} restore {void} 还原图表,各种状态均被清除,还原为最初展现时的状态。
    {self} clear {void} 清空绘画内容,清空后实例可用
    {void} dispose {void} 释放图表实例,释放后实例不再可用
  • 相关阅读:
    jsp mysql 配置线程池
    服务端 模拟 检测 攻击。。乱写
    硕思闪客精灵 7.2 破解版
    unity UnityAwe 插件
    smartfoxserver 2x 解决 Math NAN
    unity 断点下载
    java 监听文件目录修改
    wind7 64 setup appjs
    sfs2x 修改jvm 内存
    unity ngui 解决图层问题
  • 原文地址:https://www.cnblogs.com/longshiyVip/p/4676447.html
Copyright © 2011-2022 走看看