diff --git a/en/api/echarts-instance.md b/en/api/echarts-instance.md index 02accb766..5b6534dad 100644 --- a/en/api/echarts-instance.md +++ b/en/api/echarts-instance.md @@ -307,6 +307,7 @@ chart1.setTheme('dark'); (opts?: { width?: number|string, height?: number|string, + devicePixelRatio?: number, // Since `v6.2.0` silent?: boolean, animation?: { duration?: number @@ -326,6 +327,8 @@ Resizes chart, which should be called manually when container size changes. + `height` Specify height explicitly, in pixel. If setting to `null`/`undefined`/`'auto'`, height of `dom` (instance container) will be used. + + `devicePixelRatio` Specify device pixel ratio explicitly. If not specified, the current value of browser's `window.devicePixelRatio` will be used. (Since `v6.2.0`) + + `silent` Specify whether or not to prevent triggering events. + `animation` Whether to apply transition animation when resize, including `duration` and `easing`, the default `duration` is 0, that is, no transition animation is applied. @@ -334,6 +337,8 @@ Resizes chart, which should be called manually when container size changes. Sometimes charts may be placed in multiple tabs. Those in hidden labels may fail to initialize due to the ignorance of container width and height. So `resize` should be called manually to get the correct width and height when switching to the corresponding tabs, or specify width/height in `opts` explicitly. +Since `v6.2.0`, when the browser zoom level changes, calling `resize` will update the chart with the current `window.devicePixelRatio` by default, which helps avoid blurry rendering. + ## renderToSVGString(Function) {{ use: partial-version(version = "5.3.0") }} diff --git a/en/api/echarts.md b/en/api/echarts.md index 6676c44dc..37a28a5e6 100644 --- a/en/api/echarts.md +++ b/en/api/echarts.md @@ -8,13 +8,13 @@ Global echarts object, which can be accessed after including `echarts.js` in scr (dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: { devicePixelRatio?: number, renderer?: string, - useDirtyRect?: boolean, // Since `5.0.0` - useCoarsePointer?: boolean, // Since `5.4.0` - pointerSize?: number, // Since `5.4.0` - ssr?: boolean, // Since `5.3.0` + useDirtyRect?: boolean, // Since `v5.0.0` + useCoarsePointer?: boolean, // Since `v5.4.0` + pointerSize?: number, // Since `v5.4.0` + ssr?: boolean, // Since `v5.3.0` width?: number|string, height?: number|string, - locale?: string // Since `5.0.0` + locale?: string // Since `v5.0.0` }) => ECharts ``` Creates an ECharts instance, and returns an [echartsInstance](~echartsInstance). You shall not initialize multiple ECharts instances on a single container. diff --git a/zh/api/echarts-instance.md b/zh/api/echarts-instance.md index af640b24c..08a1889c6 100644 --- a/zh/api/echarts-instance.md +++ b/zh/api/echarts-instance.md @@ -307,6 +307,7 @@ chart1.setTheme('dark'); (opts?: { width?: number|string, height?: number|string, + devicePixelRatio?: number, // 从 `v6.2.0` 开始支持 silent?: boolean, animation?: { duration?: number @@ -324,10 +325,15 @@ chart1.setTheme('dark'); + `width` 可显式指定实例宽度,单位为像素。如果传入值为 `null`/`undefined`/`'auto'`,则表示自动取 `dom`(实例容器)的宽度。 + `height` 可显式指定实例高度,单位为像素。如果传入值为 `null`/`undefined`/`'auto'`,则表示自动取 `dom`(实例容器)的高度。 + + `devicePixelRatio` 可显式指定设备像素比。如果未指定,则默认使用浏览器当前的 `window.devicePixelRatio`。(从 `v6.2.0` 开始支持) + `silent` 是否禁止抛出事件。默认为 `false`。 + `animation` resize 的时候是否应用过渡动画,包含时长`duration`和缓动`easing`两个配置,默认`duration`为 0,即不应用过渡动画。 -**Tip:** 有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用 `resize` 方法获取正确的高宽并且刷新画布,或者在 `opts` 中显示指定图表高宽。 +**Tip:** + +有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用 `resize` 方法获取正确的高宽并且刷新画布,或者在 `opts` 中显示指定图表高宽。 + +自 `v6.2.0` 版本起,浏览器缩放比例发生变化后,调用 `resize` 默认会使用当前的 `window.devicePixelRatio` 更新图表,可避免缩放后图表渲染模糊。 ## renderToSVGString(Function) diff --git a/zh/api/echarts.md b/zh/api/echarts.md index 54b449a91..15a174a69 100644 --- a/zh/api/echarts.md +++ b/zh/api/echarts.md @@ -8,13 +8,13 @@ (dom?: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: { devicePixelRatio?: number, renderer?: string, - useDirtyRect?: boolean, // 从 `5.0.0` 开始支持 - useCoarsePointer?: boolean, // 从 `5.4.0` 开始支持 - pointerSize?: number, // 从 `5.4.0` 开始支持 - ssr?: boolean, // 从 `5.3.0` 开始支持 + useDirtyRect?: boolean, // 从 `v5.0.0` 开始支持 + useCoarsePointer?: boolean, // 从 `v5.4.0` 开始支持 + pointerSize?: number, // 从 `v5.4.0` 开始支持 + ssr?: boolean, // 从 `v5.3.0` 开始支持 width?: number|string, height?: number|string, - locale?: string // 从 `5.0.0` 开始支持 + locale?: string // 从 `v5.0.0` 开始支持 }) => ECharts ``` 创建一个 ECharts 实例,返回 [echartsInstance](~echartsInstance),不能在单个容器上初始化多个 ECharts 实例。 @@ -35,7 +35,7 @@ 附加参数。有下面几个可选项: - + `devicePixelRatio`设备像素比,默认取浏览器的值`window.devicePixelRatio`。 + + `devicePixelRatio` 设备像素比,默认取浏览器的值 `window.devicePixelRatio`。 + `renderer` 渲染模式,支持`'canvas'`或者`'svg'`。参见 [使用 Canvas 或者 SVG 渲染](${handbookPath}best-practices/canvas-vs-svg)。 + `ssr` 是否使用服务端渲染,只有在 SVG 渲染模式有效。开启后不再会每帧自动渲染,必须要调用 [renderToSVGString](~echartsInstance.renderToSVGString) 方法才能得到渲染后 SVG 字符串。参见[服务端渲染 ECharts 图表](${handbookPath}how-to/cross-platform/server)。 + `useDirtyRect`是否开启脏矩形渲染,只有在 Canvas 渲染模式有效,默认为`false`。参见 [ECharts 5 新特性](${handbookPath}basics/release-note/v5-feature)。