echarts常見設置筆記

設置tooltip是否顯示

tooltip: {
  // 座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
  trigger: 'axis'
}

tooltip: {
  // 數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
  trigger: 'item'
}

設置tooltip背景色

tooltip: {
  // 座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
  trigger: 'axis',
  // tooltip的背景色
  backgroundColor: 'red'
}

如何讓tooltip限制在圖表的區域內

tooltip: {
  // 是否將 tooltip 框限制在圖表的區域內。
  confine: true
}

座標軸不從零刻度開始

xAxis: {
  // 是否是脫離 0 值比例。設置成 true 後坐標刻度不會強制包含零刻度。
  scale: true
}

yAxis: {
  // 是否是脫離 0 值比例。設置成 true 後坐標刻度不會強制包含零刻度。
  scale: true
}

設置上下左右的間距

grid: {
  top: '20%',
  left: '25%',
  right: '25%',
  bottom: '20%'
}

設置legend位置

// 展示在底部的寫法
legend: {
  x: 'center',
  y: 'bottom',
  data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
}

// 展示在頂部的寫法
legend: {
  top: '20%',
  data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
}

設置legend顏色

// legend同級寫color數組,legend顏色取決於color數組
color: ['red', 'green', 'black', 'pink', 'blue'],
// 展示在底部的寫法
legend: {
  x: 'center',
  y: 'bottom',
  data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
}

設置刻度名稱傾斜展示

xAxis: {
  axisLabel: {
    // 座標軸刻度標籤的顯示間隔，在類目軸中有效。
    interval: 0,
    // 刻度標籤旋轉的角度，在類目軸的類目標籤顯示不下的時候可以通過旋轉防止標籤之間重疊。
    rotate: 30
  }
}

在座標軸上加單位名稱

xAxis: {
  name: '時間'
},
yAxis: {
  name: '速度（km/h）'
}

設置柱狀寬度

series: [
  {
    name: '在線',
    type: 'bar',
    // 設置柱狀寬度
    barWidth: 40
  }
]

填充折線圖區域顏色

series: [
  {
    name: '在線',
    type: 'bar',
    // 填充區域顏色,不用在大括號再設置color即可生效
    areaStyle: {}
  }
]

去掉折線上的小圓點

series: [
  {
    name: '在線',
    type: 'bar',
    // 填充區域顏色
    areaStyle: {},
    // 去掉折線上的小圓點
    symbol: 'none'
  }
]

設置鼠標滾輪縮放及區域縮放功能

toolbox: {
  feature: {
    dataZoom: {
      // 禁止y軸方向的縮放
      yAxisIndex: 'none'
    }
  }
},

// 鼠標滾輪縮放
dataZoom: [
  {
    startValue: ''
  }, {
    type: 'inside'
  }
]

儀表盤環寬及分隔線長度設置

series: [
  {
    type: 'gauge',
    // 設置儀表盤環寬
    axisLine: {
      lineStyle: {
        width: 10
      }
    },
    // 設置分隔線長度
    splitLine: {
      length: 30,
      lineStyle: {
        color: 'red'
      }
    }
  }
]