定制堆叠图一

概览

如上图所示，此处定制的是鼠标悬浮上去后，展示的不是Y轴的内容，而是额外的内容。

代码

var tipsData = [//鼠标悬浮提示展示的数据，有7个，对应X轴的星期
  {
    a: 20,
    b: 30,
    c: 40,
    d: 50
  },
  {
    a: 21,
    b: 31,
    c: 41,
    d: 51
  },
  {
    a: 22,
    b: 32,
    c: 42,
    d: 52
  },
  {
    a: 22,
    b: 32,
    c: 42,
    d: 52
  },
  {
    a: 21,
    b: 31,
    c: 41,
    d: 51
  },
  {
    a: 22,
    b: 32,
    c: 42,
    d: 52
  },
  {
    a: 23,
    b: 33,
    c: 43,
    d: 53
  }
];

var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];//X轴展示的内容

var nowIndex = 0; //当前鼠标悬停在X轴哪个数组内容上

option = {
  tooltip: {//鼠标悬停效果
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      label: {
        formatter: function (params) {//获取当前悬浮在X轴哪个数值上
          var xvalue = params.value; //返回的是X轴数据的数值
          for (var i = 0; i < xdata.length; i++) {
            if (xdata[i] == xvalue) {
              nowIndex = i;
              break;
            }
          }
        }
      }
    },
    formatter: function (params) {//定制鼠标悬停展示的样式，此处也可以放HTML元素
      var str = '';
      str += '延迟已完工：' + tipsData[nowIndex].a + '<br/>';
      str += '延迟未完工：' + tipsData[nowIndex].b + '<br/>';
      str += '正 常 完 工：' + tipsData[nowIndex].c + '<br/>';
      str += '在 途 生 产：' + tipsData[nowIndex].d + '<br/>';
      return str;
    }
  },

  legend: {
      data: ['今年正常交货', '今年延期交货', '去年正常交货', '去年延期交货'],
      //show:false //隐藏图例
  },
  grid: {//控制图表整体的对齐
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true  //这个是控制X,Y轴的标签展示
  },
  xAxis: [
    {
      type: 'category',
      data: xdata
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [//数据项
    {
      name: '今年正常交货',
      type: 'bar',
      stack: 'Ad', //堆叠的参数，同一种值会放在同一个柱子上
      barWidth: 10,//柱子的宽度
      emphasis: {
        // focus: 'series' //鼠标悬浮后，其他柱状隐藏
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '今年延期交货',
      type: 'bar',
      stack: 'Ad',
      barWidth: 10,
      emphasis: {
        // focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '去年正常交货',
      type: 'bar',
      barWidth: 5,
      stack: 'Search Engine',
      emphasis: {
        // focus: 'series'
      },
      data: [620, 732, 701, 734, 1090, 1130, 1120]
    },
    {
      name: '去年延期交货',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        // focus: 'series'
      },
      data: [720, 132, 101, 134, 290, 230, 220]
    }
  ]
};