Echarts常用图表-柱状图

最新推荐文章于 2023-05-07 15:19:26 发布

肖小周

最新推荐文章于 2023-05-07 15:19:26 发布

阅读量245

点赞数

分类专栏： Echarts 文章标签： echarts javascript ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_43181470/article/details/127092280

版权

Echarts 专栏收录该内容

2 篇文章

订阅专栏

基本的柱状图

1、基本的代码结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  //1、引入js文件
  <script src="./echarts.js"></script>
</head>
<body>
  //2、准备一个有宽高的盒子
  <div id="main" style="width: 400px; height: 600px;"></div>
  <script>
    //3、初始化实例对象
    var myChart = echarts.init(document.getElementById('main'))
    //4、指定图表的配置项和数据
    var option = {
     
    }
    //5、将配置项设置给echarts实例对象
    myChart.setOption(option)
  </script>
</body>
</html>

2、配置项的数据（常用）

title 标题

title: {
  text: '期末语文成绩'
}

tooltip 提示框

tooltip: {},

legend 图例

legend: {
  data: ['成绩']
},

坐标轴

 xAxis: {
   data: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大枪']
 },
 yAxis: {},

series

series: [
  {
     name: '成绩',
     type: 'bar',
     data: [88, 92, 63, 77, 94, 80, 72, 86]
   }
]

柱状图常见效果

1、最大值、最小值、平均值

在series中配置

markPoint: {
  data: [
    {
      name: '最大值',
      type: 'max'
     },
     {
       name: '最小值',
       type: 'min'
      }
   ]
},
markLine: {
   data: [
      {
        name: '平均线',
        type: 'average'
       }
    ] 
},

2、数值的显示

在series中配置

label: {
  show: true,
  rotate: 60,
  position: 'top'
},

3、柱的宽度

在series中配置

barWidth: '40%'