Echarts直角坐標系x軸y軸屬性設置整理大全

<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>

          name: '時間', // 坐標軸名稱
          nameLocation: 'end', // 坐標軸名稱顯示位置，可取值'start'、'middle' 或 'center'、'end'
          // 坐標軸名稱文字樣式設置
          nameTextStyle: {
            color: '#d46c89',
            fontWeight: 'bold',
            fontSize: '16px',
          },
          nameGap: 20, // 坐標軸名稱與軸線之間的距離，默認值15
          nameRotate: 30, // 坐標軸名稱旋轉，角度值

          // 坐標軸軸線相關設置
          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',
            }
          },

          // 坐標軸刻度相關設置
          axisTick: {
            show: true, // 是否顯示坐標軸刻度。
            interval: 0, // 坐標軸刻度的顯示間隔，在類目軸中有效。不設置時默認同 axisLabel.interval 一樣。設置成 0 強制顯示所有標簽。如果設置為 1，表示『隔一個標簽顯示一個標簽』，如果值為 2，表示隔兩個標簽顯示一個標簽，以此類推。
            inside: true, // 默認值false。true 表示坐標軸刻度朝內，false 表示坐標軸刻度朝外
            // 坐標軸刻度樣式設置
            lineStyle: {
              color: '#d96c67',
              width: 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，即與軸線顏色一樣
          },

          type: 'category',
          data: [{ // 類目數據，在類目軸（type: 'category'）中有效
            value: '周一',
            // 突出周一
            textStyle: {
              fontSize: 20,
              color: 'red'
            }
          }, '周二', '周三', '周四', '周五', '周六', '周日'],

          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, // 線的寬度
            },
          }

          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,
            },
          }

          boundaryGap: true, // 類目軸中boundaryGap可取值，true或false，默認true。
          axisTick: {
            alignWithLabel: true, // 類目軸中在 boundaryGap 為 true 的時候有效，可以保證刻度線和標簽對齊。
          },

          min: 50, // 坐標軸刻度最小值
          max: 250, // 坐標軸刻度最大值
          interval: 40, // 強制設置坐標軸分割間隔

      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'
          },
        ]
      };