前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >柱状图的常见效果

柱状图的常见效果

作者头像
Qwe7
发布2022-06-15 08:24:42
2100
发布2022-06-15 08:24:42
举报
文章被收录于专栏:网络收集

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'
    }
  }]
}

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档