echarts：绘制每个单元格的标记线

需求

用echarts绘制每个单元格的标记线，而非整个图表的标记线

---

实现

柱状图：绘制标记线，标记每个单元格的最小值

//法一：
var data1 = [18203, 23489, 29034, 44970, 31744, 30230];
var data2 = [19325, 23438, 31000, 21594, 54141, 81807];
var dataMin = [];
for (var i = 0; i < data1.length; ++i) {
  dataMin.push(Math.min(data1[i], data2[i]));
}

option = {
  title: {
    text: 'World Population'
  },
  tooltip: {
    trigger: 'item',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  xAxis: [
    {
      type: 'category',
      data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
    },
    {
      type: 'category',
      data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
      position: 'bottom'
    }
  ],
  series: [
    {
      name: '2011',
      type: 'bar',
      data: data1
    },
    {
      name: '2012',
      type: 'bar',
      data: data2
    },

    {
      name: '',
      type: 'bar',
      data: dataMin,
      xAxisIndex: 1,
      stack: 'a',
      itemStyle: {
        color: 'transparent'
      },
      barGap: '-100%',// 关键
      barCategoryGap: '10%', // this controls the width of the bar
      tooltip: {
        show: false
      },
      z: -1
    },
    {
      name: '标记线',
      type: 'bar',
      data: [0, 0, 0, 0, 0, 0],
      xAxisIndex: 1,
      stack: 'a',
      barMinHeight: 2, // this controls the height of the bar
      itemStyle: {
        color: 'red'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
      }
    }
  ]
};

// 法二
var data1 = [18203, 23489, 29034, 44970, 31744, 30230];
var data2 = [19325, 23438, 31000, 21594, 54141, 81807];
var dataMin = [];
for (var i = 0; i < data1.length; ++i) {
  dataMin.push(Math.min(data1[i], data2[i]));
}

option = {
  title: {
    text: 'World Population'
  },
  tooltip: {
    trigger: 'item',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  xAxis: {
      type: 'category',
      data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
    },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: data1
    },
    {
      name: '2012',
      type: 'bar',
      data: data2
    },
    {
      data: dataMin,
      name: '标记线',
      type: 'pictorialBar',
      barGap: '-100%',// 关键
      barCategoryGap: '10%', 
      symbolSize: ['100%', 2],
      symbolRepeat: false,
      symbol: 'rect',
      symbolPosition: 'end',
      itemStyle: {
        color: '#f00',
      },
      z: 3
    }
  ]
};