echarts柱狀圖圖例詳解

一、樣式設置

在echarts中，柱狀圖圖例的樣式可以通過legend屬性進行設置。其中，需要注意的是legend中的textStyle屬性可以單獨控制文字樣式，同時color屬性可以設置圖例顏色。

legend: {
  textStyle: {
    fontStyle: 'italic',
    color: '#333',
    fontSize: 14
  },
  data: ['圖例1', '圖例2'],
  color: ['#ff0000', '#00ff00']
}

上述代碼中，legend的textStyle指定了字體樣式，顏色和字型大小。同時，data屬性設置了圖例的內容，color屬性設置了圖例對應的顏色。

二、數據格式

在echarts中，柱狀圖圖例的數據格式可以靈活轉換，可以是一維數組，也可以是多維數組，例如下方代碼所示的數據格式：

var data = [{
  name: '圖例1',
  value: 100
}, {
  name: '圖例2',
  value: 200
}]

以數據格式為基礎，我們可以用不同的方式來呈現圖例數據。例如，我們可以使用data內的value屬性來作為柱狀圖高度的值：

{
  xAxis: {
    data: ['圖例1', '圖例2']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: [100, 200]
  }]
}

三、圖例位置

在echarts中，柱狀圖圖例位置可以通過legend屬性的orient屬性進行控制。orient屬性包含四個值可供選擇，分別是’horizontal'(水平)，’vertical'(垂直)，’left'(左對齊)，’center'(居中對齊)，’right'(右對齊)。

legend: {
  orient: 'horizontal', //或：'vertical'、'left'、'center'、'right'
  data: ['圖例1', '圖例2']
}

上述代碼中，orient屬性設置為’horizontal’，表示圖例水平排列。

四、圖例設置

在echarts中，我們可以通過legend屬性控制圖例的顯示與隱藏，同時可以設置默認選中的圖例。

legend: {
  selectedMode: 'single', //或多選'multiple'
  selected: {
    '圖例1': true, //默認選中'圖例1'
    '圖例2': false //默認不選中'圖例2'
  },
  data: ['圖例1', '圖例2']
}

上述代碼中，selectedMode屬性設置為’single’，表示圖例單選。selected屬性設置了默認選中的圖例。

五、圖例居右

在echarts中，我們可以通過grid屬性配合legend屬性實現圖例居右的效果。

grid: {
  right: '20%',
  containLabel: true
},
legend: {
  orient: 'vertical',
  right: 10,
  data: ['圖例1', '圖例2']
}

上述代碼中，grid的right屬性設置了圖形區域離容器右側的距離。同時，legend的右邊距屬性right也進行了設置。

六、柱狀圖類型

在echarts中，我們可以通過series屬性的type屬性，來切換柱狀圖的類型。默認柱狀圖的type屬性值為’bar’，我們可以將其修改為’stack’，實現堆疊柱狀圖效果。

{
  xAxis: {
    data: ['圖例1']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'stack', //或'bar'
    data: [100],
    name: '圖例1',
    stack: '總量'
  }, {
    type: 'stack', //或'bar'
    data: [50],
    name: '圖例2',
    stack: '總量'
  }]
}

七、圖例太多怎麼展示

當我們的柱狀圖圖例太多時，可以使用legend屬性的scroll屬性進行滾動展示。

legend: {
  type: 'scroll',
  data: ['圖例1', '圖例2', '圖例3', '圖例4', '圖例5', '圖例6', '圖例7', '圖例8', '圖例9', '圖例10', '圖例11', '圖例12']
}

上述代碼中，type屬性設置為’scroll’，表示使用滾動展示圖例。data屬性設置了所有需要展示的數據。

八、圖例水平排列居右

我們可以使用legend屬性的orient屬性控制圖例水平或垂直排列，但是當圖例控制在一行顯示時，我們可以使用justify屬性將其居右顯示。

legend: {
  type: 'scroll',
  orient: 'horizontal',
  data: ['圖例1', '圖例2', '圖例3'],
  right: '30%',
  top: '80%',
  width: '40%',
  itemWidth: 20,
  itemHeight: 10,
  textStyle: {
    color: '#000'
  },
  padding: [20, 5, 0, 5],
  selected: {
    '圖例1': true,
    '圖例2': true,
    '圖例3': true
  },
  align: 'right',
  justify: true
}

上述代碼中，itemWidth和itemHeight屬性分別設置了圖例樣式的寬度和高度，padding屬性設置了圖例周圍的邊距。同時，align屬性設置了圖例在grid元素中的對齊方式，justify屬性設置了圖例水平排列時的對齊方式。

九、柱狀圖參數

在echarts中，通過柱狀圖的各個屬性我們可以自由控制柱狀圖的樣式，並且使用柱狀圖參數，可以實現更加靈活的數據展示方式。

{
  xAxis: {
    type: 'category',
    data: ['圖例1', '圖例2', '圖例3'],
    axisTick: {
      alignWithLabel: true
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: [100, 200, 300],
    barWidth: '60%',
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#83bff6'
        }, {
          offset: 0.5,
          color: '#188df0'
        }, {
          offset: 1,
          color: '#188df0'
        }]),
        barBorderRadius: [30, 30, 0, 0]
      }
    }
  }]
}

上述代碼中，barWidth屬性設置了柱狀圖寬度。itemStyle屬性設置了柱狀圖的顏色漸變和邊角弧度效果，具體效果可以根據實際需求進行調整。使用LinearGradient函數可以控制顏色漸變的方向和階段，分別對應四個參數(x1, y1, x2, y2)。barBorderRadius屬性設置的是柱狀圖的邊角弧度效果。

十、數據過多選取3~5個與echarts柱狀圖圖例相關的做為小標題

當柱狀圖數據過多時，我們可以通過xAxis的axisLabel屬性進行軸標籤的間隔控制，同時也可以通過數據篩選的方式，選取關鍵數據展示。

以下數據為例，我們僅展示前5個關鍵數據。

var data = {
  category: ['2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
  series: [{
    name: '圖例1',
    type: 'bar',
    data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
    barWidth: '20%'
  }, {
    name: '圖例2',
    type: 'bar',
    data: [200, 400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000],
    barWidth: '20%'
  }]
};

var option = {
  tooltip: {},
  legend: {
    data: ['圖例1', '圖例2']
  },
  calculable: true,
  xAxis: [{
    type: 'category',
    data: data.category.filter(function(value, index) {
      return index < 5;
    }),
    axisTick: {
      alignWithLabel: true
    }
  }],
  yAxis: [{
    type: 'value'
  }],
  series: [{
    name: '圖例1',
    type: 'bar',
    data: data.series[0].data.filter(function(value, index) {
      return index < 5;
    }),
    barWidth: '20%'
  }, {
    name: '圖例2',
    type: 'bar',
    data: data.series[1].data.filter(function(value, index) {
      return index < 5;
    }),
    barWidth: '20%'
  }]
};

上述代碼中，我們使用了filter方法篩選出前5個數據，並在xAxis和series中進行了相關設置。