【Vue】Echart图表中的属性

背景

• 最近Echart用的比较多，改动的展示效果其实也就那么些，而且很多案例、展示效果在Echart官网写的都很丰富，这里关于一些常见的属性做一个整理
• ECharts 是一个强大的图表库，提供了丰富的配置项来定制图表的各个方面。以下是 options 中一些常见的属性及其可能的属性值和效果：

属性介绍

1. title

• 作用：图表标题配置。
• 属性值：
  • text: 标题文本。
  • subtext: 副标题文本。
  • left, top: 水平和垂直位置。
  • textStyle: 文本样式配置，包括字体大小、颜色等。
• 效果：显示图表标题和副标题。

2. tooltip

• 作用：提示框配置。
• 属性值：
  • trigger: 触发方式，如 ‘axis’、‘item’。
  • formatter: 提示框内容格式化方法。
  • axisPointer: 提示框指示器配置。
• 效果：鼠标悬停时显示数据信息。

3. legend

• 作用：图例配置。
• 属性值：
  • data: 图例项数组。
  • orient: 布局方向，如 ‘horizontal’ 或 ‘vertical’。
  • left, top: 位置。
  • selected: 选择状态。
• 效果：显示图例项并允许用户选择显示哪些系列。

4. toolbox

• 作用：工具箱配置。
• 属性值：
  • show: 是否显示工具箱。
  • feature: 各工具项配置，如 saveAsImage 保存为图片。
• 效果：提供一组工具按钮，如刷新、保存为图片等。

5. color

• 作用：颜色方案配置。
• 属性值：颜色数组，如 [‘#5793f3’, ‘#d14a61’]。
• 效果：设置图表的颜色方案。

6. grid

• 作用：直角坐标系网格区域配置。
• 属性值：
  • left, right, top, bottom: 边距。
  • containLabel: 是否包含坐标轴标签。
• 效果：定义图表绘制区域的位置和大小。

7. xAxis / yAxis

• 作用：坐标轴配置。
• 属性值：
  • type: 轴类型，如 ‘category’ 或 ‘value’。
  • name: 轴名称。
  • data: 类目数据（如果是分类轴）。
  • min, max: 最小值和最大值。
  • splitLine: 分割线配置。
  • axisLabel: 轴标签配置。
• 效果：定义坐标轴的显示方式和数据范围。

8. series

• 作用：数据系列配置。
• 属性值：
  • name: 系列名称。
  • type: 图表类型，如 ‘line’, ‘bar’, ‘pie’ 等。
  • data: 数据数组。
  • symbol: 数据标记图形。
  • itemStyle: 数据项样式配置。
  • label: 数据标签配置。
• 效果：定义图表的数据和显示方式。

9. visualMap

• 作用：视觉映射配置。
• 属性值：
  • min, max: 映射范围。
  • inRange, outOfRange: 范围内的颜色或样式。
• 效果：提供一种颜色渐变或其他视觉效果来表示数据范围。

10. dataZoom

• 作用：数据区域缩放配置。
• 属性值：
  • start, end: 缩放范围百分比。
  • type: 缩放类型，如 ‘slider’ 或 ‘inside’。
• 效果：允许用户手动调整数据的显示范围。

示例

const options = {
  title: { text: '示例图表' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['数据系列1', '数据系列2'] },
  toolbox: { show: true, feature: { saveAsImage: {} } },
  color: ['#5793f3', '#d14a61'],
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五'] },
  yAxis: { type: 'value' },
  series: [
    { name: '数据系列1', type: 'line', data: [120, 132, 101, 134, 90] },
    { name: '数据系列2', type: 'bar', data: [220, 182, 191, 234, 290] }
  ]
};