柱状图的常见效果（2）

紧挨边缘 boundaryGap

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

代码语言：javascript复制

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

缩放, 脱离0值比例

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

代码语言：javascript复制

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 轴

代码语言：javascript复制

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

堆叠图

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

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

代码语言：javascript复制

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)

使用了堆叠图之后:

代码语言：javascript复制

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

蓝色这条线的y轴起点, 不再是y轴, 而是红色这条线对应的点. 所以相当于蓝色是在红色这条线的基础之上进行绘制. 基于前一个图表进行堆叠

3.折线图的特点

折线图更多的使用来呈现数据随时间的**『变化趋势』**

scale stack 图表

0 人点赞