柱状图的常见效果（2）

Qwe7

发布于 2022-06-15 08:28:18

4330

发布于 2022-06-15 08:28:18

文章被收录于专栏：网络收集

紧挨边缘 boundaryGap

boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始

var option = {
  xAxis: {
    type: 'category',
    data: xDataArr,
    boundaryGap: false
  }
}

缩放, 脱离0值比例

如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况

var yDataArr = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005, 3004, 3001, 3009] // 此时y轴的数据都在3000附近, 每个数之间相差不多 
var option = {
  xAxis: {
    type: 'category',
    data: xDataAr
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'line',
    data: yDataAr
  }]
}

效果如下图:

这显然不是我们想要的效果, 因此可以配置上 scale , 让其摆脱0值比例

scale 配置

scale 应该配置给 y 轴

var option = {
  yAxis: {
    type: 'value',
    scale: true
  }
}

堆叠图

堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加

如果在一个图表中有两个或者多个折线图, 在没有使用堆叠配置的时候, 效果如下:

var mCharts = echarts.init(document.querySelector("div")) var xDataArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
var yDataArr1 = [120, 132, 101, 134, 90, 230, 210]
var yDataArr2 = [20, 82, 191, 94, 290, 330, 310]
var option = {
  xAxis: {
    type: 'category',
    data: xDataAr
  },
  yAxis: {
    type: 'value',
    scale: true
  },
  series: [{
    type: 'line',
    data: yDataArr1
  }, {
    type: 'line',
    data: yDataArr2
  }]
}
mCharts.setOption(option)

使用了堆叠图之后:

var option = {
  series: [{
    type: 'line',
    data: yDataArr1,
    stack: 'all' // series中的每一个对象配置相同的stack值, 这个all可以任 意写 
  }, {
    type: 'line',
    data: yDataArr2,
    stack: 'all' // series中的每一个对象配置相同的stack值, 这个all可以任意 写 
  }]
}