ECharts柱状图常见效果

sunddy_x

已于 2022-05-18 22:10:04 修改

阅读量2.1k

点赞数

分类专栏： ECharts 文章标签： echarts

于 2022-05-06 22:10:22 首次发布

本文链接：https://blog.csdn.net/sunddy_x/article/details/124619061

版权

本文介绍了如何使用Echarts创建各类柱状图，包括基础样式、最大值、最小值、平均值标注，以及横向条形、边框、排名、背景色、混合折线与堆叠、高亮等功能，并提供了详细的配置代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础

效果图：
在这里插入图片描述
配置项：

option = {
   
  xAxis: {
   
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
   
    type: 'value'
  },
  series: [
    {
   
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
}

最大值、最小值、平均值

效果图：
在这里插入图片描述
配置项：

option = {
   
  xAxis: {
   
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
   
    type: 'value'
  },
  series: [
    {
   
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      markPoint: {
   
        data: [
          {
   
            type: 'max',
            name: '最大值'
          },
          {
   
            type: 'min',
            name: '最小值'
          }
        ]
      },
      markLine: {
   
        data: [
          {
   
            type: 'average',
            name: '平均值'
          }
        ]
      }
    }
  ]
}