ECharts.js

ECharts.js 通俗详解

echarts.js = ECharts 主核心 JS 文件（2D 图表基础库），所有折线 / 柱状 / 饼图 / 平面地图全靠它；echarts-gl.js 是它的 3D 附加插件。

charts.js 是什么

Apache ECharts 官方主 JS 源码文件，纯 JS 编写、前端页面画图表的基础依赖，百度开源、现属 Apache 基金会：

1. 能干什么（2D 全部图表）
   柱状、折线、饼图、环形、仪表盘、K 线、平面中国地图、雷达、漏斗、表格数据大屏，你之前写的大屏所有平面图全都依赖它。
   默认Canvas/SVG 渲染（2D 画布），不用显卡加速，普通浏览器就能跑。
2. 两个常用文件
   • echarts.js：完整未压缩源码（开发调试用，体积大）
   • echarts.min.js：压缩精简版（项目上线引入，生产用）

二、和 echarts-gl.js 的区别（重点）

文件	用途	渲染方式	必须搭配
echarts.js	基础 2D 所有图表，必引	Canvas2D	单独可用，大屏标配
echarts-gl.js	仅 3D 扩展（立体地球、3D 地图、3D 柱状）	WebGL 显卡加速	必须先引入 echarts.js 才能生效，不能单独使用

一句话：没 echarts.js 画不了任何图表；不用 3D 就完全不用 echarts-gl。

三、原生 HTML 引入写法（直接用）

预览

<!-- 1、先引入主echarts.js -->
<script src="echarts.min.js"></script>
<!-- 2、需要3D时再加gl，不需要就删掉此行 -->
<script src="echarts-gl.min.js"></script>

<div id="box" style="width:600px;height:400px;"></div>
<script>
  // 初始化图表
  const myChart = echarts.init(document.getElementById('box'))
  myChart.setOption({
    xAxis:{data:['1月','2月']},
    series:[{type:'bar',data:[120,200]}]
  })
</script>

四、Vue 项目对应

bash

运行

npm install echarts  # 安装主库（对应echarts.js）
# 要3D再加：npm install echarts-gl

js

import * as echarts from 'echarts' // 等价引入echarts.js
// import 'echarts-gl' // 开启3D才导入

 

• 之前整套大屏布局、平面中国地图、所有折线饼图：只需要echarts.js
• 想要改成凸起立体 3D 中国地图、旋转地球：额外加echarts-gl.js即可。