Echrarts的基本API

官方API文档

https://echarts.apache.org/zh/api.html#echarts

一、init 创建一个 ECharts 实例

创建一个 ECharts 实例返回 echartsInstance,不能在单个容器上初始化多个 ECharts 实例。

const chart = echarts.init(dom, null, {renderer: 'svg'});

参数:

  • dom 实例容器,一般是一个具有高宽的div元素。
    如果div是隐藏的,ECharts 可能会获取不到div的高宽导致初始化失败,这时候可以明确指定div的style.width和style.height,或者在div显示后手动调用 echartsInstance.resize 调整尺寸。

  • theme 应用的主题。可以是一个主题的配置对象,也可以是使用已经通过 echarts.registerTheme 注册的主题名称。

  • opts 附加参数。有下面几个可选项:

    • devicePixelRatio 设备像素比,默认取浏览器的值window.devicePixelRatio。
    • renderer 渲染器,支持 'canvas' 或者 'svg'。
    • useDirtyRect 是否开启脏矩形渲染,默认为false。
    • width 可显式指定实例宽度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的宽度。
    • height 可显式指定实例高度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的高度。
    • locale 使用的语言,内置 'ZH' 和 'EN' 两个语言

二、setOption 图表实例的配置项

设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

chart.setOption(option, notMerge, lazyUpdate);

或者

chart.setOption(option, {
    notMerge: ...,
    lazyUpdate: ...,
    silent: ...
});

或者

chart.setOption(option, {
    replaceMerge: ['xAxis', 'yAxis', 'series']
});
  • notMerge: boolean

    可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则,详见 组件合并模式。如果为 true,表示所有组件都会被删除,然后根据新 option 创建所有新组件。

  • replaceMerge: string | string[]

    可选。用户可以在这里指定一个或多个组件,如:xAxis, series,这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件,也可使用 "replaceMerge"。详见 组件合并模式。

  • lazyUpdate: boolean

    可选。在设置完 option 后是否不立即更新图表,默认为 false,即同步立即更新。如果为 true,则会在下一个 animation frame 中,才更新图表。

  • silent: boolean

    可选。阻止调用 setOption 时抛出事件,默认为 false,即抛出事件。

三、resize 重绘图表

于是当浏览器发生resize事件的时候,让其触发echart的resize事件,重绘canvas。

多个图表可以使用addEventListener

window.addEventListener("resize", () => { 
    this.myChart.resize();  
    this.myChart2.resize();  
    this.myChart3.resize();
});

在vue组件上就可以直接单个组件添加进事件列表

myLogLine.setOption(option);
window.addEventListener("resize", () => { myLogLine.resize();});

myLine.setOption(option);
window.addEventListener("resize", () => { myLine.resize();});

四、appendData 分片加载数据和增量渲染

此接口用于,在大数据量(百万以上)的渲染场景,分片加载数据和增量渲染。在大数据量的场景下(例如地理数的打点),就算数据使用二进制格式,也会有几十或上百兆,在互联网环境下,往往需要分片加载。appendData 接口提供了分片加载后增量渲染的能力,渲染新加入的数据块时不会清除原有已经渲染的部分。

注意:

现在不支持 系列**(series) **使用 **dataset **同时使用 appendData,只支持系列使用自己的 series.data 时使用 appendData。
目前并非所有的图表都支持分片加载时的增量渲染。目前支持的图有:ECharts 基础版本的 散点图(scatter) 和 线图(lines)。ECharts GL 的 散点图(scatterGL)、线图(linesGL) 和 可视化建筑群(polygons3D)。

作者:落花桂
         
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
原文地址:https://www.cnblogs.com/nthforsth/p/15256258.html