ECharts 配置项详细解释

跳房子的前端

于 2024-09-17 07:23:55 发布

阅读量621

点赞数 14

分类专栏： Echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/shenfangda520/article/details/142310379

版权

Echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ECharts 配置项详细解释

1. 全局配置

title
- text: 图表主标题的文本内容。
- subtext: 图表副标题的文本内容。
- left: 标题距离容器左侧的距离。可以是像素值、百分比或 center。
- top: 标题距离容器顶部的距离。可以是像素值、百分比或 center。
- right: 标题距离容器右侧的距离。
- bottom: 标题距离容器底部的距离。
- textStyle: 标题文本的样式配置，包括字体、颜色、大小等。
示例：
```
title: {
  text: '主标题',
  subtext: '副标题',
  left: 'center',
  top: 'top',
  textStyle: {
    color: '#333',
    fontSize: 18
  }
}
```

tooltip

show: 是否显示提示框（tooltip）。
trigger: 触发类型，item（数据项触发）、axis（坐标轴触发）。
formatter: 提示框内容的格式化函数或字符串模板。
axisPointer: 轴指示器配置，用于坐标轴触发时的提示框。

示例：

tooltip: {
  show: true,
  trigger: 'item',
  formatter: '{b}: {c}',  // {b} 表示系列名称，{c} 表示数据值
  axisPointer: {
    type: 'cross',  // 'line', 'shadow', 'cross'
    crossStyle: {
      color: '#999'
    }
  }
}

legend
- data: 图例的数据项数组，用于显示图例。
- orient: 图例的布局方向，horizontal 或 vertical。
- left: 图例距离容器左侧的距离。
- top: 图例距离容器顶部的距离。
- itemWidth: 图例标记的宽度。
- itemHeight: 图例标记的高度。
示例：
```
legend: {
  data: ['系列1', '系列2'],
  orient: 'horizontal',
  left: 'center',
  top: 'top',
  itemWidth: 25,
  itemHeight: 14
}
```
grid
- show: 是否显示网格。
- left, right, top, bottom: 网格与容器的边距。
- containLabel: 是否包含坐标轴标签。
示例：
```
grid: {
  left: '3%',
  right: '4%',
  bottom: '3%',
  containLabel: true
}
```

2. 坐标系配置

xAxis
- type: 坐标轴类型，value（数值轴）、category（类目轴）、time（时间轴）、log（对数轴）。
- data: 类目轴的类目数据（如果 type 为 category）。
- axisLabel: 坐标轴标签配置，包括字体大小、颜色等。
- axisTick: 坐标轴刻度线配置。
- axisLine: 坐标轴线配置。
示例：
```
xAxis: {
  type: 'category',
  data: ['A', 'B', 'C', 'D'],
  axisLabel: {
    color: '#666',
    fontSize: 12
  },
  axisTick: {
    alignWithLabel: true
  },
  axisLine: {
    lineStyle: {
      color: '#333'
    }
  }
}
```

yAxis

配置与 xAxis 类似，只是方向不同。
type: value、log 或 category。
name: 坐标轴名称。

示例：

yAxis: {
  type: 'value',
  name: '数值',
  axisLabel: {
    color: '#666',
    fontSize: 12
  },
  axisLine: {
    lineStyle: {
      color: '#333'
    }
  }
}

polar（用于雷达图等极坐标系）

radiusAxis: 半径轴配置。
angleAxis: 角度轴配置。

示例：

polar: {
  radiusAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D']
  },
  angleAxis: {}
}

radiusAxis（极坐标系的半径轴）
- type: value 或 category。
- name: 半径轴名称。
示例：
```
radiusAxis: {
  type: 'value',
  name: '半径'
}
```

angleAxis（极坐标系的角度轴）

type: value 或 category。
name: 角度轴名称。

示例：

angleAxis: {
  type: 'category',
  data: ['A', 'B', 'C', 'D'],
  name: '角度'
}

3. 图表系列配置

series
- type: 图表类型，如 line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）。
- name: 系列名称。
- data: 系列数据。
- itemStyle: 系列项的样式设置，包括颜色、边框等。
- lineStyle: 线条样式设置（折线图、面积图等）。
- label: 数据标签设置。
示例：
```
series: [
  {
    name: '销售额',
    type: 'bar',
    data: [120, 200, 150, 80],
    itemStyle: {
      color: '#3398DB'
    },
    label: {
      show: true,
      position: 'top'
    }
  }
]
```

4. 图表交互配置

toolbox

show: 是否显示工具箱。
feature: 工具箱的具体功能，如 saveAsImage（保存为图片）、dataZoom（数据缩放）等。

示例：

toolbox: {
  show: true,
  feature: {
    saveAsImage: {
      title: '保存'
    },
    dataZoom: {
      title: '缩放'
    }
  }
}

dataZoom

type: 数据缩放类型，inside（内置缩放）、slider（滑块缩放）。
start, end: 缩放的起始和结束百分比。

示例：

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

5. 图表动画配置

animation
- show: 是否启用动画。
- duration: 动画持续时间。
- easing: 动画缓动函数，如 linear（线性）、cubicIn（立方体内）等。
示例：
```
animation: {
  show: true,
  duration: 1000,
  easing: 'cubicIn'
}
```

6. 图表样式与主题

color
- color: 图表系列的颜色数组。
示例：
```
color: ['#3398DB', '#FF6F61']
```
backgroundColor
- backgroundColor: 图表背景颜色。
示例：
```
backgroundColor: '#f4f4f4'
```
textStyle
- textStyle: 全局文本样式设置，包括字体、颜色、大小等。
示例：
```
textStyle: {
  color: '#333',
  fontFamily: 'Arial',
  fontSize: 14
}
```

7. 自定义系列与图形

**series**中的 type: 'custom'

renderItem: 自定义渲染函数，用于创建自定义图形。
data: 自定义数据源。

示例：

series: [
  {
    type: 'custom',
    renderItem: function (params, api) {
      // 自定义渲染逻辑
      return {};
    },
    data: []
  }
]

8. 事件处理

events

click: 图表点击事件。
mouseover: 鼠标悬浮事件。

示例：

myChart.on('click', function (params) {
  console.log(params);
});

9. 地图配置

geo
- map: 地图类型，如 world（世界地图）、china（中国地图）。
- roam: 是否启用地图的平移和缩放。
- label: 地图标签配置。
示例：
```
geo: {
  map: 'world',
  roam: true,
  label: {
    show: true,
    formatter: '{b}'
  }
}
```

10. 其他高级配置

visualMap
- type: 视觉映射的类型，如 continuous（连续型）或 piecewise（分段型）。
- min, max: 视觉映射的最小值和最大值。
- inRange: 视觉范围内的样式设置。
示例：
```
visualMap: {
  min: 0,
  max: 100,
  inRange: {
    color: ['#d94e5d', '#eac736', '#50a3ba']
  }
}
```

graphic

elements: 自定义图形元素数组。
type: 自定义图形类型（如 image, text）。

示例：

graphic: {
  elements: [
    {
      type: 'text',
      left: 'center',
      top: 'center',
      style: {
        text: '自定义文字',
        font: '30px Microsoft YaHei',
        fill: '#333'
      }
    }
  ]
}