《ECharts ：不强不大，做点可视化》

 

 “只考虑金钱的婚姻是荒谬的，不考虑金钱的婚姻是愚蠢的”

---

ECharts 是一个强大的数据可视化库，广泛应用于前端开发中。

1. 基本使用步骤

• ​引入 ECharts：

  • 通过 CDN 引入：

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>

  • 通过 npm 安装：

    npm install echarts

    import * as echarts from 'echarts';

• ​初始化图表：

  const chart = echarts.init(document.getElementById('chart-container'));

• ​配置选项：

  const option = {
      title: { text: '示例图表' },
      xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
      yAxis: {},
      series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }]
  };
  chart.setOption(option);

• ​渲染图表：

  chart.render();

整天通过CDN引入，CDN到底是什么啊？

什么是 CDN？

CDN（Content Delivery Network，内容分发网络）是一种分布式网络架构，用于将静态资源（如图片、CSS、JavaScript 文件等）快速、高效地分发给用户。CDN 通过在全球多个节点部署服务器，将资源缓存到离用户最近的节点，从而减少延迟、提高加载速度。

举个栗子：

2. 核心配置项

• ​title：图表标题。

  title: { text: '图表标题', subtext: '副标题', left: 'center' }

• xAxis 和 yAxis：坐标轴配置。

  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' }

• serie：数据系列，决定图表类型（如折线图、柱状图、饼图等）。

  series: [{ type: 'line', data: [10, 20, 30] }]

• tooltip：提示框配置。

  tooltip: { trigger: 'axis', formatter: '{b}: {c}' }

• ​legend：图例配置。

  legend: { data: ['系列1', '系列2'], bottom: '10%' }

• grid：图表布局。

  grid: { left: '10%', right: '10%', bottom: '15%', containLabel: true }

---

​3. 常用图表类型

• ​折线图：

  series: [{ type: 'line', data: [10, 20, 30] }]

• ​柱状图：

  series: [{ type: 'bar', data: [10, 20, 30] }]

• ​饼图：

  series: [{ type: 'pie', data: [{ value: 10, name: 'A' }, { value: 20, name: 'B' }] }]

• ​散点图：

  series: [{ type: 'scatter', data: [[10, 20], [30, 40]] }]

• ​地图：

  series: [{ type: 'map', map: 'china', data: [{ name: '北京', value: 100 }] }]

---

​4. 高级功能

？？？？？？？？？？？？？？？？？？？？？？？？？

你一个图标库，要事件监听和异步加载干什么??

• ​数据异步加载：

  chart.showLoading();
  fetch('data.json').then(response => response.json()).then(data => {
      chart.hideLoading();
      chart.setOption({ series: [{ data }] });
  });

• ​事件监听：

  chart.on('click', params => {
      console.log('点击了', params);
  });

• ​动态更新数据：

  chart.setOption({ series: [{ data: [20, 40, 60] }] });

• ​主题切换：

  const chart = echarts.init(document.getElementById('chart-container'), 'dark');

---

​5. 性能优化

• ​大数据量优化：

  • 使用 large 模式：

    series: [{ type: 'line', large: true, data: [...] }]

  • 使用 dataZoom 进行数据缩放：

    dataZoom: [{ type: 'inside', start: 0, end: 100 }]

• ​避免频繁渲染：

  • 使用 setOption 的 notMerge 参数：

    chart.setOption(option, true); // 不合并配置

7. 扩展与插件

• ​ECharts GL：支持 3D 图表。

  import 'echarts-gl';

• ​ECharts 地图：支持地理数据可视化。

  import 'echarts/map/js/china';

• ​自定义主题：

  echarts.registerTheme('myTheme', { ... });
  const chart = echarts.init(dom, 'myTheme');

底层

 面试官会那么好心吗？包拷打你底层的，还不跟劳越学啊？

ECharts 的渲染位置是由开发者指定的一个 DOM 容器（通常是 <div> 元素）。ECharts 会在这个容器中创建一个 <canvas> 元素，并通过 WebGL 或 Canvas 技术将图表绘制到该 <canvas> 上。

​具体步骤：

1. ​指定容器：

   • 在 HTML 中定义一个容器：

     <div id="chart-container" style="width: 600px; height: 400px;"></div>

   • 在 JavaScript 中初始化 ECharts：

     const chart = echarts.init(document.getElementById('chart-container'));

2. ​渲染到容器：

   • ECharts 会在容器内创建一个 <canvas> 元素，并在这个 <canvas> 上绘制图表。
   • 如果容器尺寸发生变化，可以通过 chart.resize() 方法重新调整图表大小。

3. ​多图表渲染：

   可以在页面中定义多个容器，分别初始化不同的 ECharts 实例，实现多个图表的渲染。

---

​ECharts 的底层原理

ECharts 的底层原理涉及以下几个方面：

​1. 分层渲染架构

ECharts 采用分层渲染架构，将图表的不同部分（如坐标轴、数据系列、提示框等）分离成独立的图层，分别渲染后合并成最终的图表。这种架构的优势在于：

• ​性能优化：只更新需要变化的部分，减少不必要的渲染。
• ​灵活性：可以单独控制每个图层的显示和样式。

​2. 渲染引擎

ECharts 支持两种渲染引擎：

• ​Canvas：默认的渲染方式，适用于大多数场景。
• ​SVG：适用于需要动态交互或矢量图输出的场景。

开发者可以通过 renderer 参数指定渲染引擎：

const chart = echarts.init(dom, null, { renderer: 'svg' });

真的是这样不信你看 ：

那我换一下svg看看：

然后你看

真的变svg，这个桂 

​3. 数据驱动

ECharts 采用数据驱动的设计理念，开发者只需要提供数据和配置项，ECharts 会自动根据数据生成图表。其核心流程如下：

1. ​数据绑定：将数据与配置项绑定。
2. ​布局计算：根据数据计算坐标轴、图例、数据系列等的位置和大小。
3. ​图形绘制：将计算结果绘制到 <canvas> 或 <svg> 上。

​4. 坐标系

ECharts 支持多种坐标系，包括：

• ​直角坐标系：用于折线图、柱状图等。
• ​极坐标系：用于饼图、雷达图等。
• ​地理坐标系：用于地图。

不同的坐标系决定了数据的映射方式和图表的展示形式。

​5. 事件系统

ECharts 提供了完善的事件系统，支持用户交互（如点击、拖拽、缩放等）。其事件系统基于 DOM 事件，并通过 ECharts 的事件管理器进行分发和处理。

​6. 动画系统

ECharts 内置了丰富的动画效果，包括：

• ​数据更新动画：数据变化时的过渡效果。
• ​图表初始化动画：图表首次渲染时的动画效果。
  动画系统基于 requestAnimationFrame 实现，确保动画的流畅性。

​7. 插件机制

ECharts 支持插件机制，开发者可以通过插件扩展 ECharts 的功能。例如：

• ​ECharts GL：支持 3D 图表。
• ​ECharts Map：支持地图数据可视化。

---

​ECharts 的工作流程

1. ​初始化：

   • 创建 ECharts 实例，绑定 DOM 容器。
   • 初始化配置项和默认值。

2. ​数据绑定：

   将数据和配置项绑定到 ECharts 实例。

3. ​布局计算：

   根据数据和配置项计算图表各部分的布局。

4. ​图形绘制：

   使用 Canvas 或 SVG 绘制图表。

5. ​事件监听：

   监听用户交互事件，触发相应的回调函数。

6. ​动画更新：

   在数据更新时，触发动画效果。

---