ECharts常用图表（柱状图）

7大图表

柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以以清晰的看出每个分类数据的排名情况。
图表1：柱状图
旧版echarts的显示

最新版的echarts显示

实现步骤
ECharts最基本的代码结构：
引入js文件，DOM容器，初始化对象，设置option
X轴数据：
数组1：[‘张三’，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’]
Y轴数据：
数组2：[88,92,63,77,94,80,72,86]
图表类型
在series设置type:bar //bar是柱状图，line是线状，pie是饼状
常见效果
最大值/ 最小值 markPoint
平均值 markLine
数值显示 label
柱宽度 barWidth

 <!-- 
    1.ECharts最基本的代码结构
    2.x轴数据：['张三'，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’]
    3.y轴数据：[88,92,63,77,94,80,72,86]
    4.将type的值设置为bar
     -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 yDaraArr=[70,92,85,89,77,90,87,98]
        var  option={
            
           xAxis:{
               type:'category',   //类目轴
               data:xDataArr
           },
           yAxis:{
               type:'value'  //数值轴
           },
           series:[
               {
                   name:'语文',
                   type:'bar',   //bar是柱状图，line是线状，pie是饼状
                   markPoint:{   
                       data:[
                         {
                             type:'max',name:'最大值'
                         },{
                           type:'min',name:'最小值'
                         }
                      ]
                    },
                   markLine:{
                       data:[
                           {
                               type:'average',name:'平均值'
                           }
                       ]
                    },
                   label:{
                       show: true,
                       position:'top'
                    },
                       
                    barWidth:'30%',
                   data:yDaraArr
               }
           ]
        }
        //步骤5：将配置项设置给echarts实例对象  
        mCharts.setOption(option) 
     </script>
</body>
</html>

         横向柱状图

新版

  <!-- 
    1.ECharts最基本的代码结构
    2.x轴数据：['张三'，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’]
    3.y轴数据：[88,92,63,77,94,80,72,86]
    4.将type的值设置为bar
     -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 yDaraArr=[70,92,85,89,77,90,87,98]
        var  option={
            
           xAxis:{
               type:'value'  //类目轴
               
           },
           yAxis:{
               type:'category'  ,//数值轴
               data:xDataArr
           },
           series:[
               {
                   name:'语文',
                   type:'bar',   //bar是柱状图，line是线状，pie是饼状
                   markPoint:{   
                       data:[
                         {
                             type:'max',name:'最大值'
                         },{
                           type:'min',name:'最小值'
                         }
                      ]
                    },
                   markLine:{
                       data:[
                           {
                               type:'average',name:'平均值'
                           }
                       ]
                    },
                   label:{
                       show: true,
                       position:'right'
                    },
                       
                    barWidth:'30%',
                   data:yDaraArr
               }
           ]
        }
        //步骤5：将配置项设置给echarts实例对象  
        mCharts.setOption(option) 
     </script>
</body>
</html>