柱状图(用ECharts绘制)

Posted So istes immer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了柱状图(用ECharts绘制)相关的知识,希望对你有一定的参考价值。

目录

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

常见效果实现

最大值、最小值                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>

效果 

 

 

以上是关于柱状图(用ECharts绘制)的主要内容,如果未能解决你的问题,请参考以下文章

echarts 绘制 地图柱状图

echarts 绘制 地图柱状图

echarts 分组绘制柱状图

VUE中使用Echarts绘制柱状图

在vue中使用Echarts绘制叠堆折线面积图(可切换叠堆柱状图)

ECharts学习目录