echarts柱状图位置调整（Echarts直角坐标系x轴y轴属性设置大全）

1 
  
  
  
  
  
  
  
  、Echarts版本

"echarts": "^5.3.3",

2 
  
  
  
  
  
  
  
  
、最简单的直角坐标系 
  
  
  
  
  
  
  
  ，以柱状图为例                 。

常见的直角坐标系 
  
  
  
  
  
  
  
  
，x轴设置type: category

 


 


 


 


 


 


 


 

，为类目轴 
 
 
 
 
 
 
 
 ，适用于离散的类目数据；y轴设置type: value 
   
   
   
   
   
   
   
   
，为数值轴
 

 

 

 

 

 

 

 
，适用于连续数据
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。

<template> <div ref="barChart" class="chart-content">暂无数据</div> </template> <script> import * as echarts from echarts; export default { name: bar, data() { return {}; }, mounted() { this.draw(); }, methods: { draw() { this.chart = echarts.init(this.$refs.barChart); var option = { xAxis: { type: category, data: [周一, 周二, 周三, 周四, 周五, 周六, 周日], }, yAxis: { type: value }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: bar } ] }; this.chart.setOption(option); }, }, }; </script> <style scoped> .chart-content { width: 600px; height: 400px; box-sizing: border-box; border: 1px solid #ccc; } </style>

渲染结果：

 3

 


 


 


 


 


 


 


 

、坐标轴名称相关设置

name: 时间, // 坐标轴名称 nameLocation: end, // 坐标轴名称显示位置
 

 

 

 

 

 

 

 

 ，可取值start 
 
 
 
 
 
 
 
 、middle 或 center 
   
   
   
   
   
   
   
   
、end // 坐标轴名称文字样式设置 nameTextStyle: { color: #d46c89, fontWeight: bold, fontSize: 16px, }, nameGap: 20, // 坐标轴名称与轴线之间的距离                ，默认值15 nameRotate: 30, // 坐标轴名称旋转 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，角度值

只设置x轴
















，渲染效果：

 4
 

 

 

 

 

 

 

 
、坐标轴轴线相关设置

// 坐标轴轴线相关设置 axisLine: { show: true, // 是否显示坐标轴轴线 symbol: [none, arrow], // 轴线两边的箭头                         ，none表示没有箭头 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，arrow表示有箭头
























，可取值为字符串或长度为2的数组：默认不显示箭头 none
















。两端都显示箭头 arrow                 ，只在末端显示箭头 [none, arrow] symbolSize: [15, 20], // 轴线两边的箭头的大小 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，第一个数字表示宽度（垂直坐标轴方向）
















，第二个数字表示高度（平行坐标轴方向）,默认值[10, 15]  
  
  
  
  
  
  
  
 。 symbolOffset: 20, // 轴线两边的箭头的偏移 
  
  
  
  
  
  
  
  ，如果是数组 
  
  
  
  
  
  
  
  
，第一个数字表示起始箭头的偏移

 


 


 


 


 


 


 


 

，第二个数字表示末端箭头的偏移；如果是数字 
 
 
 
 
 
 
 
 ，表示这两个箭头使用同样的偏移 
  
  
  
  
  
  
  
  。 // 坐标轴轴线样式设置 lineStyle: { color: #21a6e6, width: 2, type: dashed, } },

x轴y轴都设置 
   
   
   
   
   
   
   
   
，渲染效果：

 5
 

 

 

 

 

 

 

 

 、坐标轴刻度相关设置

// 坐标轴刻度相关设置 axisTick: { show: true, // 是否显示坐标轴刻度


 


 


 


 


 


 


 


 

。 interval: 0, // 坐标轴刻度的显示间隔
 

 

 

 

 

 

 

 
，在类目轴中有效 
 
 
 
 
 
 
 
。不设置时默认同 axisLabel.interval 一样  
   
   
   
   
   
   
   
   。设置成 0 强制显示所有标签

 

 

 

 

 

 

 

 
。如果设置为 1
 

 

 

 

 

 

 

 

 ，表示『隔一个标签显示一个标签』                ，如果值为 2 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，表示隔两个标签显示一个标签
















，以此类推
 

 

 

 

 

 

 

 

。 inside: true, // 默认值false                 。true 表示坐标轴刻度朝内                         ，false 表示坐标轴刻度朝外 // 坐标轴刻度样式设置 lineStyle: { color: #d96c67, width: 6, } },

只设置X轴 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，渲染效果：

 6                、坐标轴刻度标签相关设置

axisLabel: { show: true, // 是否显示坐标轴刻度标签
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 。 interval: 0, // 坐标轴刻度标签的显示间隔
























，在类目轴中有效
















。设置成 0 强制显示所有标签                 ，如果设置为 1 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，表示『隔一个标签显示一个标签』
















，如果值为 2 
  
  
  
  
  
  
  
  ，表示隔两个标签显示一个标签 
  
  
  
  
  
  
  
  
，以此类推 inside: false, // 默认值false                         。true 表示坐标轴刻度标签朝内

 


 


 


 


 


 


 


 

，false 表示坐标轴刻度标签朝外 rotate: 30, // 刻度标签旋转的角度 
 
 
 
 
 
 
 
 ，旋转的角度从 -90 度到 90 度 margin: 20, // 刻度标签与轴线之间的距离 color: #d46c89, // 刻度标签文字的颜色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 。不设置就默认取 axisLine.lineStyle.color 
   
   
   
   
   
   
   
   
，即与轴线颜色一样 },

只设置x轴
 

 

 

 

 

 

 

 
，渲染效果：

  7 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
、设置某个类目标签的文字样式

type: category, data: [{ // 类目数据
 

 

 

 

 

 

 

 

 ，在类目轴（type: category）中有效 value: 周一, // 突出周一 textStyle: { fontSize: 20, color: red } }, 周二, 周三, 周四, 周五, 周六, 周日],

 8
















、坐标轴指示器相关设置

直线指示器

axisPointer: { show: true, // 默认不显示
























。但是如果 tooltip.trigger 设置为 axis 或者 tooltip.axisPointer.type 设置为 cross                ，则自动显示 axisPointer                 。坐标系会自动选择显示哪个轴的 axisPointer 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，也可以使用 tooltip.axisPointer.axis 改变这种选择 type: line, // line 直线指示器,shadow 阴影指示器,none 无指示器 // 坐标轴指示器的文本标签设置 label: { show: true, // 是否显示文本标签
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。如果 tooltip.axisPointer.type 设置为 cross 则默认显示标签
















，否则默认不显示 color: red, backgroundColor: #999, }, // type: line时坐标轴指示器线的设置 lineStyle: { color: orange, // 线的颜色 width: 3, // 线的宽度 }, }

只设置X轴                         ，鼠标悬浮上去渲染效果：

 阴影指示器

axisPointer: { show: true, // 默认不显示
















。但是如果 tooltip.trigger 设置为 axis 或者 tooltip.axisPointer.type 设置为 cross 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，则自动显示 axisPointer  
  
  
  
  
  
  
  
 。坐标系会自动选择显示哪个轴的 axisPointer
























，也可以使用 tooltip.axisPointer.axis 改变这种选择 type: shadow, // line 直线指示器,shadow 阴影指示器,none 无指示器 // 坐标轴指示器的文本标签设置 label: { show: true, // 是否显示文本标签 
  
  
  
  
  
  
  
  。如果 tooltip.axisPointer.type 设置为 cross 则默认显示标签                 ，否则默认不显示 color: red, backgroundColor: #999, }, // type: shadow时坐标轴指示器填充区域的设置 shadowStyle: { color: orange, // 填充的颜色 opacity: 0.4, }, }

只设置X轴 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，鼠标悬浮上去渲染效果：

 9                         、实现坐标轴刻度线和标签对齐

boundaryGap: true, // 类目轴中boundaryGap可取值
















，true或false 
  
  
  
  
  
  
  
  ，默认true


 


 


 


 


 


 


 


 

。 axisTick: { alignWithLabel: true, // 类目轴中在 boundaryGap 为 true 的时候有效 
  
  
  
  
  
  
  
  
，可以保证刻度线和标签对齐 
 
 
 
 
 
 
 
。 },

只设置X轴

 


 


 


 


 


 


 


 

，渲染效果：

 10 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
、设置坐标轴最小刻度值
























、最大刻度值                 、分割间隔

min: 50, // 坐标轴刻度最小值 max: 250, // 坐标轴刻度最大值 interval: 40, // 强制设置坐标轴分割间隔

只设置y轴 
 
 
 
 
 
 
 
 ，渲染效果：

 11 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
、完整示例

var option = { xAxis: { type: category, data: [周一, 周二, 周三, 周四, 周五, 周六, 周日], name: 时间, nameGap: 20, axisLine: { symbol: [none, arrow], symbolOffset: 14, lineStyle: { color: #21a6e6, width: 2, type: dashed, } }, axisTick: { alignWithLabel: true, lineStyle: { color: #d96c67, width: 6, } }, axisLabel: { interval: 2, rotate: 30, margin: 10, color: #d46c89, }, }, yAxis: { type: value, name: 数值, nameGap: 20, axisLine: { show: true, symbol: [none, arrow], symbolOffset: 14, lineStyle: { color: #21a6e6, width: 2, type: dashed, } }, }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: bar }, ] };

渲染效果：

12
















、更多配置可查看Echarts官网配置项xAxis 
  
  
  
  
  
  
  
  、yAxis