echarts 自定义柱状图顶部数据展示的几种方法

4月日新计划更文活动 第23天

前言

记录一下 echarts 柱状图添加标记的方式

1. 使用label展示

最简单的方法，在 series 中 插入 label 属性，具体设定如下

option = {
  xAxis: {
	  type: 'category',
	    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
	label: {
		normal: {
			show: true,
			position: 'top'
		},
		formatter: '{@value}'
	}
    }
  ]
};

甚至 formatter 属性可以传入一个函数，用于自定义展示内容，也可以在某些情况作出特殊展示

option = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '销量',
    type: 'bar',
    data: [50, 80, 90, 70, 60, 80, 65],
    label: {
      show: true, // 是否显示标签
      position: 'top', // 标签显示位置，在柱状顶部
      formatter: function(params) { // 标签内容格式
        if(params.data < 60) return '不及格'
        if(params.data >= 60 && params.data < 70) return '及格'
        if(params.data >= 70 && params.data < 80) return '良好'
        if(params.data >= 80) return '优秀'
      },
    },
  }]
};

又或者只展示部分，那么只需要在函数中返回空字符串，就能够控制不展示

2. 使用 markPoint 属性

如果需要为指定的某个属性添加标记，可以使用 markPoint 属性，比方说，最大值，最小值，或者 平均值。

或者自己知道在图中的某个位置想要添加标记，也可以使用 markPoint 属性，具体展示如下

option = {
  title: {
    text: 'Rainfall vs Evaporation',
    subtext: 'Fake Data'
  },
  xAxis: [
    {
      type: 'category',
      // prettier-ignore
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Rainfall',
      type: 'bar',
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ],
      markPoint: {
        data: [
          { type: 'max', name: 'Max', symbolSize: 100, valueIndex: 1 },
          { type: 'min', name: 'Min', symbolSize: 0 , valueIndex: 0 },
          { type: 'average', name: 'Average' },
          { value: 999, xAxis: 2, yAxis: 7, name: '自定义点1'},
          { value: 2121, xAxis: 3, yAxis: 23.2, name: '自定义点2'}
        ]
      },
    },
  ]
};

可以看到，如果用 type 指定了某个值，那么就会标注在对应的值上，也可以通过自己在拿到数据的时候进行计算，自定义标记点：

{ value: 2121, xAxis: 3, yAxis: 23.2, name: '自定义点'}

value 为需要展示的标记值，xAxis 为标记的横坐标，yAxis 为标记的纵坐标。

假设你需要标记最大的三个值，并且在初始化的时候拿到了 [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] 这个数据数组，那么就只需要通过简单地转化和计算，就可以自定义三个标记点

let data = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];

// 将数据转换为对象数组，同时传递下标信息
let objArr = data.map((item, index) => ({
  value: item,
  xAxis: index,
  yAxis: item,
  name: '自定义点'
}));

// 对对象数组按值从大到小排序
objArr.sort((a, b) => b.value - a.value);

// 取前三项生成新的数组
let maxObjects = objArr.slice(0, 3);

console.log(maxObjects);

然后将生产的自定义标记点塞入 markPoint 的 data 中就可以了，具体代码如下：

var option;

let data = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];

// 将数据转换为对象数组，同时传递下标信息
let objArr = data.map((item, index) => ({
  value: item,
  xAxis: index,
  yAxis: item,
  name: '自定义点'
}));

// 对对象数组按值从大到小排序
objArr.sort((a, b) => b.value - a.value);

// 取前三项生成新的数组
let maxObjects = objArr.slice(0, 3);

console.log(maxObjects);

option = {
  title: {
    text: 'Rainfall vs Evaporation',
    subtext: 'Fake Data'
  },
  xAxis: [
    {
      type: 'category',
      // prettier-ignore
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Rainfall',
      type: 'bar',
      data: data,
      markPoint: {
        data: [
          ...maxObjects
        ]
      },
    },
  ]
};

官方示例