柱状图的常见效果

2.柱状图的常见效果

标记:

最大值最小值 markPoint

代码语言：javascript复制

series: [{
  ......
  markPoint: {
    data: [{
      type: 'max',
      name: '最大值'
    }, {
      type: 'min',
      name: '最小值'
    }]
  }
}]

平均值 markLine

代码语言：javascript复制

series: [{
  ......markLine: {
    data: [{
      type: 'average',
      name: '平均值'
    }]
  }
}]

显示

数值显示 label

代码语言：javascript复制

series: [{
  ......
  label: {
    show: true, // 是否可见 
    rotate: 60 // 旋转角度 
  } 
} ]

标注区间 markArea

代码语言：javascript复制

var option = {
  series: [{
    ......
    markArea: {
      data: [
        [{
          xAxis: '1月'
        }, {
          xAxis: '2月'
        }],
        [{
          xAxis: '7月'
        }, {
          xAxis: '8月'
        }]
      ]
    }
  }]
}

线条控制

平滑线条 smooth

代码语言：javascript复制

var option = {
  series: [{
    ......
    smooth: true
  }]
}

线条样式 lineStyle

代码语言：javascript复制

var option = {
  series: [{
    ......
    smooth: true,
    lineStyle: {
      color: 'green',
      type: 'dashed' // 可选值还有 dotted solid 
    }
  }]
}

代码语言：javascript复制

填充风格 areaStyle
var option = {
  series: [{
    type: 'line',
    data: yDataArr,
    areaStyle: {
      color: 'pink'
    }
  }]
}

label

0 人点赞