Echrarts的基本API

摘要:
如果div被隐藏,ECharts可能无法获得div的高度和宽度,并导致初始化失败。此时,可以显式指定样式。宽度和样式。或者在显示div后手动调用ecchartsInstance.resize来调整大小。它可以是主题的配置对象,也可以使用通过echarts.registerTheme注册的主题名称。如果动画打开,echarts会找到两组数据之间的差异,并通过适当的动画显示数据的更改。目前,支持的图表有:ECharts散点图和折线图的基本版本。

目录

官方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();});

Echrarts的基本API第1张

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

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

注意:

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

免责声明:文章转载自《Echrarts的基本API》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇MySQL 可重复读 vs 读提交滚动条--nicescroll插件(兼容各种浏览器,低至IE5)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

el-upload配合vue-cropper实现上传图片前裁剪

需求背景 上传一个封面图,在上传之前需要对图片进行裁剪,上传裁剪之后的图片,类似微信的上传头像。 技术方案 上传肯定是用element的 el-upload 组件实现上传,非常方便,各种钩子函数。 裁剪一开始找的 cropper 看着功能到是非常齐全,api也比较丰富,基本是符合预期的需求的。但是此库是基于jq 的,在vue项目中有点难用。于是就找到了 v...

jquery获取下拉列表的值和显示内容的方法

页面的下拉列表: 选择时间段: <select name="timespan" class="Wdate" > <option value="1">8:00-8:30</option> <op...

C#——WebApi 接口参数传参详解

本篇打算通过get、post、put、delete四种请求方式分别谈谈基础类型(包括int/string/datetime等)、实体、数组等类型的参数如何传递。 一、get请求 对于取数据,我们使用最多的应该就是get请求了吧。下面通过几个示例看看我们的get请求参数传递。 1、基础类型参数 [HttpGet] public string GetA...

ticket、token、rpc是什么

目录 SSO技术中ticket和cookie有什么区别? sso技术中ticket和cookie的区别 token是什么意思? 什么是http接口? API 是什么 ticket机制 rpc是什么 TCP和HTTP的关系 SSO技术中ticket和cookie有什么区别? 其实无论是ticket还是cookie,都是验证信息的一种具体表现。cook...

前端调用api接口方法总结

我用得最多的大概就是jquery中的ajax了吧,就从ajax总结起走: 一、ajax: 参数解释:(主要就用到url、type、data、dataType、success、error等,其他的看需求而定) $.ajax({   url:" ", //请求的地址,类型为string type:" ", //请求方式,两种“get”或者“...

智选物流-API接口平台(淘宝菜鸟、快递鸟)

介绍 智选物流是综合地址库+时效库+逻辑库(成本、订单属性、仓库)选择出最优快递,通过多家快递网点地址库精准数据,点对点的运输时间,各种行业包裹的所有快递价格逻辑,不同产品类型、支付方式等分析,实现不同仓库,灵活使用低成本、高质量的快递方案。智选物流通过联合快递与物流公司,驱动快递公司系统升级,提升服务能力,帮助商家提升物流服务。 支持智选物流公司 公司...