Echarts

提示

当前版本：v5

介绍

Echarts 是一个基于 JavaScript 的开源可视化图表库。

ZRender 与 ECharts

ZRender 是 ECharts 的渲染器。

安装 ECharts

npm

npm i echarts

# 如果是 vue 项目
# vue-echarts：https://www.npmjs.com/package/vue-echarts
npm i echarts vue-echarts

cdn

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>

个性化定制

• Echarts 在线定制

引入 ECharts

全量引入 ❌

import * as echarts from 'echarts'

// 初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'))
myChart.setOption({
  // ...
})

按需引入 ✅

按需加载小技巧

很多时候，按需加载无从下手，不知道分析需要哪些组件，其实很简单！

1. 将配置代码放置于 ECharts 中的 playground 中，查看效果
2. 查看完整源码，并开启“按需引入”
3. 复制就完事儿啦！

// 引入 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,
])

// 初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'))
myChart.setOption({
  // ...
})

初始化

echarts.init 是 ECharts 的核心方法之一，用于初始化 ECharts 实例。它的基本语法如下：

const chart = echarts.init(dom, theme?, opts?)

参数说明

1. dom（必选）：

   • 一个用于容纳图表的 HTML DOM 元素（通常是 div）。
   • 需要确保该元素有明确的宽高，否则 ECharts 可能无法正确渲染。

2. theme（可选）：

   • 主题名称（字符串）或主题对象。
   • 例如 "dark" 使用官方的深色主题，或者可以传入自定义主题对象。

3. opts（可选）：一个配置对象，支持以下属性：

   • devicePixelRatio（number）：设备像素比，默认 window.devicePixelRatio，用于适配高清屏幕。
   • renderer（"canvas" | "svg"）：渲染模式，默认为 "canvas"，可选 "svg"（适用于矢量图需求）。
   • width / height（number | "auto"）：指定图表宽高，默认为 "auto"，即根据 dom 的大小自适应。

echarts 常见方法

• setOption()：配置项设置
• resize()：重置计算和绘制图表
• on()/off()：绑定/解绑事件处理函数
• dispatchAction()：触发某些行为，使用代码模拟用户行为
• clear()：清空当前实例，移除实例中所有组件和图表
• dispose()：销毁实例