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中进行了相关设置。