ECharts 图表库 — 百度开源的声明式图表框架，配置即图表¶

# 通过 npm 安装（当前稳定版 v6.x，2025年7月发布）
npm install echarts

# Vue 项目推荐安装 vue-echarts
npm install echarts vue-echarts

# React 项目推荐安装 echarts-for-react
npm install echarts echarts-for-react

# 检查版本
node -e "console.log(require('echarts/package.json').version)"

<!-- 纯 HTML 项目直接 CDN 引入 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>

import * as echarts from 'echarts';  // 导入 ECharts

// ── 1. 初始化：绑定到一个 DOM 容器 ──
const chartDom = document.getElementById('main');     // 获取容器元素
const myChart = echarts.init(chartDom);               // 在容器中初始化图表实例

// ── 2. 配置项（option 就是整张图的描述）──
const option = {
  title: {
    text: '基因表达量分布',     // 图表标题
  },
  tooltip: {                    // 鼠标悬浮提示
    trigger: 'axis',            // axis 表示跟随坐标轴
  },
  legend: {
    data: ['样本A', '样本B'],   // 图例（和 series.name 对应）
  },
  xAxis: {
    type: 'category',           // 类目轴（离散类别）
    data: ['基因1', '基因2', '基因3', '基因4', '基因5'],  // X 轴标签
  },
  yAxis: {
    type: 'value',              // 数值轴（连续数值）
    name: 'FPKM',               // Y 轴名称
  },
  series: [                     // 数据系列（可以有多个）
    {
      name: '样本A',            // 系列名称，和 legend.data 对应
      type: 'bar',              // 图表类型：bar=柱状图
      data: [1.2, 3.4, 2.1, 5.6, 4.3],  // 数据
    },
    {
      name: '样本B',
      type: 'line',             // line=折线图（可混合使用）
      data: [2.1, 2.8, 3.5, 4.1, 3.9],
    },
  ],
};

// ── 3. 渲染图表 ──
myChart.setOption(option);      // 把配置项应用到图表

// ── 4. 自适应窗口大小 ──
window.addEventListener('resize', () => myChart.resize());  // 窗口变化时重绘

// ── 热力图：展示样本-基因表达矩阵 ──
import * as echarts from 'echarts';

const genes = ['geneA', 'geneB', 'geneC', 'geneD'];   // 基因列表（X 轴）
const samples = ['S1', 'S2', 'S3'];                     // 样本列表（Y 轴）

// 数据格式：[X坐标索引, Y坐标索引, 值]
const rawData = [
  [0, 0, 3.2], [1, 0, 1.1], [2, 0, 4.5], [3, 0, 2.0],
  [0, 1, 0.8], [1, 1, 5.2], [2, 1, 3.1], [3, 1, 1.7],
  [0, 2, 2.5], [1, 2, 3.8], [2, 2, 0.5], [3, 2, 4.9],
];

const option = {
  title: { text: '基因表达热力图' },
  tooltip: {
    formatter: p => `${genes[p.value[0]]} × ${samples[p.value[1]]}: ${p.value[2]}`
  },
  visualMap: {             // 颜色映射（类似颜色条）
    min: 0,
    max: 6,
    calculable: true,      // 允许拖动范围
    orient: 'horizontal',  // 水平放置
    left: 'center',
    inRange: {
      color: ['#ffffcc', '#fd8d3c', '#800026']  // 低→高：黄→橙→深红
    }
  },
  xAxis: { type: 'category', data: genes },     // 基因名在 X 轴
  yAxis: { type: 'category', data: samples },   // 样本名在 Y 轴
  series: [{
    type: 'heatmap',        // 热力图类型
    data: rawData,          // 数据
    label: { show: true }   // 在格子上显示数值
  }],
};

echarts.init(document.getElementById('heatmap')).setOption(option);

// ── 按需导入（减少打包体积）──
import { init, use } from 'echarts/core';                      // 核心模块
import { BarChart } from 'echarts/charts';                     // 只导入柱状图
import { GridComponent, TooltipComponent } from 'echarts/components';  // 按需组件
import { CanvasRenderer } from 'echarts/renderers';            // Canvas 渲染器
use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);

// 常用图表类型（series.type）
'bar'       // 柱状图
'line'      // 折线图
'scatter'   // 散点图
'pie'       // 饼图
'heatmap'   // 热力图
'boxplot'   // 箱线图（科研常用）
'graph'     // 关系图/网络图

// 常用操作
myChart.setOption(option)           // 更新配置
myChart.resize()                    // 重新计算尺寸
myChart.on('click', fn)             // 监听点击事件
myChart.getDataURL()                // 导出为图片 base64
myChart.dispose()                   // 销毁实例，释放内存

// 官方文档：https://echarts.apache.org/zh/index.html
// 示例中心：https://echarts.apache.org/examples/zh/index.html