Echrarts的基本API

Posted 2021-09-11 为了2025的桂花

目录

• 官方API文档
• 一、init 创建一个 ECharts 实例
• 二、setOption 图表实例的配置项
• 三、resize 重绘图表
• 四、appendData 分片加载数据和增量渲染

官方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）。

作者：落花桂

　　　　

出处：http://grenet.cnblogs.com/

　　　　

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。