多系列柱状图大部分与多系列折线图相似

一、简单html布局

简单的html如下：

<!DOCTYPE html><html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<title>多系列柱状图</title>

</head>

<style type="text/css">

*{

padding: 0;

margin:0 auto;

}

.wrapper{

width: 1100px;

height: auto;

background: white;

}

#container{

width: 960px;

height:500px;

margin-top:5%;

/* background:red; */

}

</style>

<body>

<div class="wrapper">

<div id="container"> </div>

</div>

</body>



<script type = "text/javascript" src="./js/jquery.js"></script>

<script type = "text/javascript" src="./js/echarts.min.js"></script>

<script type = "text/javascript">

$(document).ready(function(){

}

</script></html>

二、实例化echarts对象

$(document).ready(function(){

    //实例化echarts对象

    var myEcharts = echarts.init(document.getElementById("container"));

    //自定义图表配置选项

    var option = {



    };

    //echarts对象绑定配置选项

    myEcharts.setOption(option);

});

java 柱状图制作 js柱状图如何实现_html三、设置图表配置选项option

1、绘制网格

var option = {

    //绘制网格
    grid:{

        x:'15%',

        y:'15%'

    }

};

2、绘制x、y轴（写在option对象中，下列步骤同此处）

xAxis:{
            //是否显示x轴
            show:true,
            //类型：类目轴
            type:'category',
            //坐标轴刻度设置,
            axisTick:{
                //设置刻度线与标签对齐
                alignWithLabel:true
                },
            axisLine:{
                show:true,
                lineStyle:{
                    //轴线颜色
                    color: '#92adce',
                    //线型
                    type:'solid'
                    }
                },
            //设置坐标轴文字样式
            axisLabel:{
                //文字旋转：正值是逆时针，负值顺时针，此处逆时针旋转45
                rotate: 45
            },
            data:['2019-01','2019-02','2019-03','2019-04','2019-05','2019-06']
            },
        yAxis:{
            type:'value',
            //是否显示y轴
            show:true,
            axisLine:{
                show:true,
                lineStyle:{
                    //轴线颜色
                    color: '#92adce',
                    //线型
                    type:'solid'
                    }
                }
            },

java 柱状图制作 js柱状图如何实现_大数据_02

java 柱状图制作 js柱状图如何实现_坐标轴_03

3、设置系列

//系列列表
    series:[
            {
                //系列名称
                name:'测试系列1',
                //类型：折线图
                type:'bar',
                //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
                // stack:'test',
                //在柱体上显示对应数值
                label:{
                    normal:{
                        //是否显示
                        show:true,
                        //显示位置：在标记图形的上方
                        position:'top',
                        //文本颜色：黑色，不设置默认为系列色
                        color:'black'
                        }
                    },
                //柱体样式
                itemStyle:{
                    normal:{
                        //柱体颜色
                        color: 'blue',
                        //柱体边框颜色
                        borderColor:'rgba(153,51,204,0.27)',
                        //柱体边框宽度
                        borderWidth:10,
                        //圆角设置，（顺时针左上：5，右上：5，右下：0，左下：0）
                        barBorderRadius: [5, 5, 0, 0] 
                        }
                    },
                data: [14,16,19,22,25,30]
                },
            {
                //系列名称
                name:'测试系列2',
                //类型：折线图
                type:'bar',
                //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
                stack:'test',
                //在标记图形上显示对应数值
                label:{
                    normal:{
                        //是否显示
                        show:true,
                        //显示位置：在标记图形的上方
                        position:'top',
                        //文本颜色：黑色，不设置默认为系列色
                        color:'black'
                        }
                    },
                //系列之间的间距
                // barGap: '-100%',
                data: [14,16,19,22,25,30]
                }
                
        ],

 

java 柱状图制作 js柱状图如何实现_大数据_04

 

java 柱状图制作 js柱状图如何实现_坐标轴_05

 

java 柱状图制作 js柱状图如何实现_java 柱状图制作_06

使用数据集（dataset）管理系列要显示的数值

4、设置图例组件：展示不同系列的标记，颜色和名字

//图例组件：
        legend:{
            data:['测试系列1','测试系列2'],
            //统一设置系列样式
            textStyle:{
                fontSize:'12',
                color:'green'
                },
                //系列之间的间距
                itemGap:50,
                //系列标记图形的宽高
                itemWidth:15,
                itemHeight:15
            }

java 柱状图制作 js柱状图如何实现_echarts_07

java 柱状图制作 js柱状图如何实现_大数据_08

 

5、添加提示框组件tooltip

//提示框组件
      tooltip:{
        //触发类型：坐标轴触发
        trigger:'axis'
        
      },

java 柱状图制作 js柱状图如何实现_大数据_09

java 柱状图制作 js柱状图如何实现_java 柱状图制作_10

进一步更改：

//提示框组件
      tooltip:{
        //触发类型：坐标轴触发
        trigger:'axis',
        //坐标轴指示器：指示坐标轴当前刻度的工具。
        axisPointer: {
            type: 'shadow',
            //可指定显示哪个轴的axisPointer，这里指定x轴
            axis:'x'
        }
      },

 

java 柱状图制作 js柱状图如何实现_java 柱状图制作_11

6、完整代码

java 柱状图制作 js柱状图如何实现_html_12

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>多系列柱状图</title>
  </head>
  <style type="text/css">
    *{
      padding: 0;
      margin:0 auto;
    }
    .wrapper{
      width: 1100px;
      height: auto;
      background: white;
    }
    #container{
      width: 960px;
      height:500px;
      margin-top:5%;
      /* background:red; */
    }
  </style>
  <body>
    <div class="wrapper">
      <div id="container"> </div>
    </div>
  </body>

  <script type = "text/javascript" src="./js/jquery.js"></script>
  <script type = "text/javascript" src="./js/echarts.min.js"></script>
  <script type = "text/javascript">
  $(document).ready(function(){
    //实例化echarts对象
    var myEcharts = echarts.init(document.getElementById("container"));
    //自定义图表配置选项
    var option = {
      //绘制网格
      grid:{
        x:'15%',
        y:'15%'
      }, 
      //提示框组件
      tooltip:{
        //触发类型：坐标轴触发
        trigger:'axis',
        //坐标轴指示器：指示坐标轴当前刻度的工具。
        axisPointer: {
            type: 'shadow',
            //可指定显示哪个轴的axisPointer，这里指定x轴
            axis:'x'
        }
      },
            
      xAxis:{
        //是否显示x轴
        show:true,
        //类型：类目轴
        type:'category',
        //坐标轴刻度设置,
        axisTick:{
          //设置刻度线与标签对齐
          alignWithLabel:true
        },
        axisLine:{
          show:true,
          lineStyle:{
            //轴线颜色
            color: '#92adce',
            //线型
            type:'solid'
          }
        },
        //设置坐标轴文字样式
        axisLabel:{
            //文字旋转：正值是逆时针，负值顺时针，此处逆时针旋转45
            rotate: 45
        },
        data:['2019-01','2019-02','2019-03','2019-04','2019-05','2019-06']
      },
      yAxis:{
        type:'value',
            //是否显示y轴
        show:true,
        axisLine:{
          show:true,
          lineStyle:{
            //轴线颜色
            color: '#92adce',
            //线型
            type:'solid'
          }
        }
      },
      //系列列表
      series:[
        {
          //系列名称
          name:'测试系列1',
          //类型：折线图
          type:'bar',
          //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
          // stack:'test',
          //在柱体上显示对应数值
          label:{
            normal:{
              //是否显示
              show:true,
              //显示位置：在标记图形的上方
              position:'top',
              //文本颜色：黑色，不设置默认为系列色
              color:'black'
            }
          },
          //柱体样式
          itemStyle:{
            normal:{
              //柱体颜色
              color: 'blue',
              //柱体边框颜色
              borderColor:'rgba(153,51,204,0.27)',
              //柱体边框宽度
              borderWidth:10,
              //圆角设置，（顺时针左上：5，右上：5，右下：0，左下：0）
              barBorderRadius: [5, 5, 0, 0] 
            }
          },
          data: [14,16,19,22,25,30]
        },
        {
          //系列名称
          name:'测试系列2',
          //类型：折线图
          type:'bar',
          //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
          stack:'test',
          //在标记图形上显示对应数值
          label:{
            normal:{
              //是否显示
              show:true,
              //显示位置：在标记图形的上方
              position:'top',
              //文本颜色：黑色，不设置默认为系列色
              color:'black'
            }
          },
          //系列之间的间距
          // barGap: '-100%',
          data: [14,16,19,22,25,30]
        }      
      ],
      //图例组件：
      legend:{
        data:['测试系列1','测试系列2'],
          //统一设置系列样式
        textStyle:{
          fontSize:'12',
           color:'green'
        },
        //系列之间的间距
        itemGap:50,
        //系列标记图形的宽高
        itemWidth:15,
        itemHeight:15
      }
    };
    //echarts对象绑定配置选项
    myEcharts.setOption(option);
  });

  </script>
</html>

忘了自己的echarts是什么版本的可以在控制台打印：

console.log(echarts.version);

java 柱状图制作 js柱状图如何实现_html_13