Echarts的引入方式和渲染器

Echarts引入方式

全局引入

import * as echarts from 'echarts';

按需引入

// 引入核心模块，提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';

// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';

// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步!
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

基本使用

1. 准备一个给定宽高的图表容器（DOM元素）
2. 通过Echarts的init方法初始化一个echarts 实例，然后通过 setOption 方法导入图表配置来完成绘制

<template>
<-- DOM 容器 -->
<div style="width: 400px; height: 250px" ref="echarts"></div>
</template>

<script>
// 全局引入或局部引入 echarts
import * as echarts from "echarts";

// 初始化实例
const myChart = echarts.init(this.$refs.echarts);

// 绘制
myChart.setOption(option);
</script>

Echarts渲染器

Canvas渲染

• 更适合绘制图形元素数量较多（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等）
• 也利于实现某些视觉特效，如炫光尾迹、带有混合效果的热力图等

SVG渲染

• 内存占用更低（这对移动端尤其重要）
• 用户使用浏览器内置的缩放功能时不会模糊

如何选择？

• 软硬件环境较好，数据量不大的场景下，两种渲染器都可以适用
• Echarts 实例多，占用内存大导致浏览器容易崩溃时，使用 SVG 渲染器更好
• 数据量较大（经验判断 > 1k）、较多交互和特效时，使用 Canvas 渲染器更好

渲染器的使用

在初始化时生成 echart 实例时选择渲染方式：

echarts.init(HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
    devicePixelRatio?: number, // 设备像素比，
    renderer?: string, // 渲染模式，'canvas'（默认）或'svg'
    useDirtyRect?: boolean,     // 从 `5.0.0` 开始支持。脏矩形渲染，探测并只更新视图变化的部分，而不是任何变动都引起画布完全重绘
    useCoarsePointer?: boolean, // 从 `5.4.0` 开始支持。扩大可点击元素的响应范围。
    pointerSize?: number,       // 从 `5.4.0` 开始支持。扩大元素响应范围的像素大小，配合 opts.useCoarsePointer使用
    ssr?: boolean,              // 从 `5.3.0` 开始支持。服务端渲染，只有在 SVG 渲染模式有效
    width?: number|string,
    height?: number|string,
    locale?: string             // 从 `5.0.0` 开始支持。使用的语言，内置 'ZH' 和 'EN' 两个语言
})

引入

// 全局引入，包括 SVGRenderer 和 CanvasRenderer
import * as echarts from 'echarts';

// 按需引入
import * as echarts from 'echarts/core';
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
echarts.use([SVGRenderer, CanvasRenderer]);

使用

// 使用 Canvas 渲染器（默认）
const chart = echarts.init(containerDom, null, { renderer: 'canvas' }); // 同 const chart = echarts.init(containerDom)

// 使用 SVG 渲染器
const chart = echarts.init(containerDom, null, { renderer: 'svg' });