echarts初始化接口——init()

yiqinkongjian

已于 2024-06-08 08:25:43 修改

阅读量5.7k

点赞数 49

分类专栏： ECharts 文章标签：前端 javascript 开发语言

于 2024-05-31 22:21:30 首次发布

本文链接：https://blog.youkuaiyun.com/yiqinkongjian/article/details/139362351

版权

ECharts 专栏收录该内容

5 篇文章

订阅专栏

echarts初始化接口——init()

本部分内容主要介绍echarts初始化接口init()方法的常见用法，包括该方法的三个参数的常见用法简介。

1、API解读

图1.1为init()函数的各参数示意说明。

图1.1 init初始化函数的API简介

根据图1.1可知init函数共支持三个参数，分别为：

①“dom?: HTMLDivElement|HTMLCanvasElement”，该参数为init函数中的第一个参数，此处的参数需要填写DOM对象，支持HTML中的“div”元素，或者“Canvas”元素。

②“theme?: Object|string”，该参数为init函数中的第二个参数，为当前图表应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme注册的主题名称，用于设置图表对应的主题。用户可以通过ECharts官网提供的主题工具完成自定义主题的设置。具体设置过程将在后面介绍。

③第三个参数“opts”为一个对象，支持多个成员值，前四个为修改渲染模式，接下来两个设置交互范围，接下来是设置宽度与高度，最后一个是设置语言。

opts对象中的常见参数简介如下：

devicePixelRatio设备像素比，默认取浏览器的值window.devicePixelRatio，可以粗略理解为物理像素与屏幕像素之间的比值，同时由如下代码可以看出，在设置第三个参数时，需要给第二个参数一个占位符，即如果没有设置主题，也要在第二个参数的位置设置“null”占位。

“var myChart = echarts.init(document.getElementById("main"),null, {devicePixelRatio: 30});”

renderer 渲染模式，支持'canvas'或者'svg'。参见使用 Canvas 或者 SVG 渲染。本处内容可以配合toolbox中的saveAsImage组件使用。

{ renderer: 'canvas' }

ssr 是否使用服务端渲染，只有在 SVG 渲染模式有效。开启后不再会每帧自动渲染，必须要调用 renderToSVGString 方法才能得到渲染后 SVG 字符串。参见服务端渲染 ECharts 图表。

useDirtyRect是否开启脏矩形渲染，只有在 Canvas 渲染模式有效，默认为false。参见 ECharts 5 新特性。

useCoarsePointer 是否扩大可点击元素的响应范围。null 表示对移动设备开启；true 表示总是开启；false 表示总是不开启。参见增加交互响应范围。

pointerSize 扩大元素响应范围的像素大小，配合 opts.useCoarsePointer使用。

width 可显式指定实例宽度，单位为像素。如果传入值为null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。（常用）

height 可显式指定实例高度，单位为像素。如果传入值为null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。（常用）

如图1.2所示为init中设置宽度与高度（即opts.width 或 opts.height）的使用方法：

图1.2 通过初始化函数设置图像大小

locale使用的语言，内置 'ZH' 和 'EN' 两个语言，也可以使用 echarts.registerLocale 方法注册新的语言包，使用echarts. registerLocale函数注册语言包，此处不是重点，相关知识请同学们自行补充。

认清三个参数之后才能够更加清晰的理解初始化方法。

2、DOM对象参数

2.1初始化（echarts.init）

echarts.init通过第一个参数绑定HTML中的DOM对象，这个过程可以理解为，将HTML中的DOM对象作为画板，echarts.init初始化就相当于在画板上铺了一张画布，我们未来的图表绘制，均是在画布上进行的。推荐在HTML中定义有宽度和高度的父容器（DOM对象）。

通常来说，需要在HTML中先定义一个<div> 结点（画板），并且通过CSS使得该结点具有宽度和高度。

图表初始化（调用init函数）的时候，传入该结点，图表的大小默认即为该结点（div）的大小，如图1.3所示。

图1.3 初始化图表

需要注意的是，使用这种方法在调用 echarts.init 时需保证容器已经有宽度和高度了。那么，当没有给HTML标签设置宽度和高度时，如何设置图表的大小呢？

此处存在一种特殊情况：opts.width 或 opts.height可以覆盖父结点的大小。也就是说ECharts实例可以修改父结点的大小，也可以在父结点没有设置大小的时候起到设置图表大小的作用。

使用opts.width 或 opts.height可以覆盖父结点的大小，其中“opts”指的是ECharts的实例，程序如图1.2所示。

2.2响应容器大小的变化

在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。这就需要监听图表容器的大小并改变图表大小。

比如，图表容器是一个高度为 400px、宽度为页面 100%的结点，希望在浏览器宽度改变的时候，始终保持图表宽度是页面的100%，如图1.4所示。

这种情况下，可以监听页面的resize事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize 改变图表的大小。

图1.4 事件监听改变大小

特殊情况：有时候我们可能会通过 JS 或 CSS 调整容器大小，由于页面大小并未发生改变，因此 resize 事件将不会被触发。如果有需要覆盖这种情况，可以借助浏览器的 ResizeObserver API 来实现更细粒度的监听。

2.3为图表设置特定的大小

以上的调用没有指明 resize()中的参数，该函数除了不含参数的形式之外，还可以指定宽度和高度，实现图表大小不等于容器大小的效果，如图1.5所示。

图1.5 带有参数的resize函数

不存在这样的调用方式：myCharts.resize(800, 400) 的形式。

3、主题设置

3.1 引入主题

主题是ECharts图表的风格抽象，用于统一多个图表的风格样式。为了顺应不同的绘图风格需求，需要下载ECharts官方提供default、infographic、shine、roma、macarons、vintage等主题。如图1.6所示，展示了如何在图表中引入shine主题，先在头部引入shine.js文件，再在ecahrts.init函数中第二个参数位置写入主体名称“shine”即完成主题设置。

图1.6 主题导入程序

3.2自定义ECharts主题

原理说明：ECharts除了默认主题样式之外，还可以使用主题在线构建工具，根据需求快速直观地生成主题配置文件，并在ECharts中使用自定义的主题样式。自定义主题的步骤如下。

（1）如图1.7所示，打开ECharts的主题构建工具。

图1.7 ECharts的主题构建工具

（2）选择和配置主题。在ECharts的主题构建工具中，有十几套主题可以选择。如果这些主题还满足不了需求，那么还可以设置各种配置。ECharts提供了基本配置、视觉映射、坐标轴、图例、提示框、时间轴、数据缩放等各个模块的样式配置，配置形式相当丰富。对主题构建工具中的基本配置中的背景、标题、副标题等进行相应的配置。

（3）配置文件下载。单击“下载”按钮;弹出“主题下载”对话框中，如图所示，单击左边的“JS版本”选项卡，将其中的代码复制到所命名的“.js”格式的文件中保存。ECharts提供了“.js”“.json”两种格式的文件，主题下载时应该选择“.js”版本的配置文件。下载好“.js”格式的文件后，对“.js”格式的文件的使用与动态切换主题的方法相同。

要点提示：为了便于二次修改，ECharts的主题构建工具支持导入、导出配置项，导出的配置可以通过导入恢复配置项。导出的“.json”格式的文件仅用于在ECharts的主题构建工具中导入使用，而不能直接作为主题在ECharts页面中使用。