柱状图（用ECharts绘制）

最新推荐文章于 2022-10-15 20:38:47 发布

漂流の少年

最新推荐文章于 2022-10-15 20:38:47 发布

阅读量1.4k

点赞数 1

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

本文链接：https://blog.csdn.net/YINZHE__/article/details/119708777

版权

ECharts 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

柱状图常常用于描述分类后的数据

常见效果实现

最大值、最小值 markPoint

平均值 markLine

数值的显示 label

柱的宽度 barWidth

横向柱状图交换x和y轴的角色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px;"></div>
  <script>
      var mCharts = echarts.init(document.querySelector('div'))
      var xDataArr = ['张三', '李四', '王五', '钱七', '孙八', '赵九']
      var yDataArr = [88, 45, 48, 89, 99, 77]
      var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            name: '语文',
            type: 'bar',
            markPoint: {
              data: [
                {
                  type: 'max', name: '最大值'
                },{
                  type: 'min', name: '最小值'
                }
              ]
            },
            markLine: {
              data: [
                {
                  type: 'average', name: '平均值'
                }
              ]
            },
            label: {
              show: true,
              rotate: 30,
              position: 'inside'
            },
            barWidth: '50%',
            data: yDataArr
        }]
      }
      mCharts.setOption(option)
  </script>
</body>
</html>

效果

漂流の少年

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
柱状图（用ECharts绘制）

目录柱状图常常用于描述分类后的数据常见效果实现最大值、最小值 markPoint平均值 markLine数值的显示 label柱的宽度 barWidth横向柱状图交换x和y轴的角色<!DOCTYPE html><html lan...
复制链接

扫一扫