Echarts常用配置项及解释

ECharts 骨架配置详解

一、通用基础配置

javascript 复制代码

{
  title: { text: '标题', left: 'center', textStyle: { fontSize: 16 } },
  legend: { show: true, bottom: 0, icon: 'circle' },
  grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
  tooltip: { 
    trigger: 'axis',  // 'item' 或 'axis'
    formatter: '{b}: {c}'  // {b}=名称 {c}=数值
  }
}

1. title（图表标题）

作用：显示在图表顶部的文字说明

javascript 复制代码

title: { 
  text: '2024年销售额',    // 主标题文本
  left: 'center',          // 水平位置：left/center/right
  top: 10,                 // 距离顶部距离
  textStyle: { 
    fontSize: 16,          // 字体大小
    color: '#333',         // 字体颜色
    fontWeight: 'bold'     // 字体粗细
  }
}

2. legend（图例）

作用：标识不同系列的彩色小方块和文字，点击可隐藏/显示对应系列

javascript 复制代码

legend: { 
  show: true,              // 是否显示
  bottom: 0,               // 位置：top/bottom/left/right
  left: 'center',          // 水平对齐
  orient: 'horizontal',    // 排列方向：horizontal/vertical
  icon: 'circle',          // 图标形状：circle/rect/roundRect
  itemWidth: 12,           // 图标宽度
  itemHeight: 12,          // 图标高度
  textStyle: { 
    color: '#666',         // 文字颜色
    fontSize: 12 
  }
}

3. grid（绘图网格）

作用：控制图表实际绘图区域的大小和位置（不是整个canvas）

javascript 复制代码

grid: { 
  left: '3%',              // 左边距（百分比或像素）
  right: '4%',             // 右边距
  bottom: '15%',           // 下边距（给legend留空间）
  top: '15%',              // 上边距（给title留空间）
  containLabel: true,      // 是否包含坐标轴标签（必须true，防止文字溢出）
  backgroundColor: 'transparent'  // 背景色
}

记忆技巧：想象给图表"留白"的相框

4. tooltip（悬浮提示框）

作用：鼠标悬停时显示详细数据的弹窗

javascript 复制代码

tooltip: { 
  trigger: 'axis',         // 触发方式：'item'(单个) / 'axis'(整条轴线)
  formatter: '{b}: {c}',   // 内容模板：{b}=类目 {c}=数值
  backgroundColor: 'rgba(0,0,0,0.8)',  // 背景色
  borderColor: '#333',     // 边框颜色
  textStyle: { 
    color: '#fff'          // 文字颜色
  },
  axisPointer: {          // 轴线指示器
    type: 'line'          // 'line'/'shadow'/'cross'
  }
}

关键区别：

trigger: 'item' → 悬停单个柱子/折点
trigger: 'axis' → 悬停X轴坐标，显示该点所有系列数据

5. series（数据系列）

核心作用 ：图表的真正数据载体，定义"画什么"和"长什么样"。一个图表可以有多个系列（如同时显示折线和柱状）。

javascript 复制代码

series: [{
  type: 'bar',           // **图表类型**：line/bar/pie/scatter（必须记住）
  name: '销售额',        // 系列名称，会显示在legend和tooltip中
  data: [30, 45, 35],    // **核心数据数组**（必须记住）
  
  // 样式配置
  itemStyle: {           // 数据项样式（柱子/折点/扇形）
    color: '#378dff',    // 颜色
    borderRadius: 4,     // 圆角
    borderWidth: 0       // 边框
  },
  
  // 标签配置
  label: {               // 数据标签（数值文字）
    show: true,          // 是否显示
    position: 'top',     // 位置：top/bottom/left/right/inside
    formatter: '{c}'     // 显示内容：{c}=数值，{b}=名称
  },
  
  // 悬停高亮
  emphasis: {            // **鼠标悬停状态**（必须记住）
    label: { show: true },        // 悬停时显示标签
    itemStyle: { shadowBlur: 10 } // 悬停时加阴影
  }
}]

二、常用图表核心配置

1. 折线图（Line）

javascript 复制代码

series: [{
  type: 'line',
  smooth: true,        // 曲线平滑
  showSymbol: false,   // 隐藏默认圆点
  emphasis: {          // 悬浮高亮
    scale: 1.3,
    itemStyle: { borderColor: '#fff', borderWidth: 2 }
  }
}]

2. 柱状图（Bar）

javascript 复制代码

series: [{
  type: 'bar',
  barWidth: '40%',     // 柱子宽度
  itemStyle: { borderRadius: [4, 4, 0, 0] },
  label: {             // 顶部数值
    show: true,
    position: 'top'
  },
  emphasis: {          // 悬浮样式
    label: { show: true }
  }
}]

3. 饼图（Pie）

javascript 复制代码

series: [{
  type: 'pie',
  radius: ['40%', '70%'],  // 环形：内半径,外半径
  center: ['50%', '50%'],  // 圆心位置
  itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
  label: { show: false },      // 默认隐藏标签
  emphasis: { label: { show: true } }
}]

4. 散点图（Scatter）

javascript 复制代码

series: [{
  type: 'scatter',
  symbolSize: 20,      // 点大小
  itemStyle: { opacity: 0.8 },
  emphasis: { scale: 1.5 }
}]

三、必须记住的关键技巧

功能	配置路径	核心参数
颜色	`color: ['#378dff', '#FF8728']`	数组，按系列顺序分配
渐变	`itemStyle.color.type: 'linear'`	`x/y/x2/y2/colorStops`
响应式	`myChart.resize()`	窗口变化时调用
点击事件	`myChart.on('click', fn)`	绑定交互
清空图表	`myChart.clear()`	重绘前清理
销毁	`myChart.dispose()`	组件卸载时调用