echart.js 之 柱状图

今天一个星期的努力，终于对于echar.js图表有了深刻的形象，哎，以前觉得做一个图表有多难，现在发现不是做图有多难，而是图的数据都弄不懂，根本做不出来。。。废话不多说了开始讲解。
我们先来看下我们要做的效果：

Paste_Image.png

是不是觉得这张图，不好做呀，接下来我们一步一步的讲解；

在官网，有一个最简单的案例，我们基于最简单的案例进行开发；做成我们上图样子；

代码：

这是我们需要写的html的基本代码结构；接下来我们写js

//获取页面节点，并进行图表初始化
 var myChart = echarts.init(document.getElementById('main'));
// 接受数据的变量
var info =[ 
                {
                    name: '农村户籍',
                    type: 'bar',//这个就是显示，图表是什么什么类型的图，‘bar'代表的就是柱状图
                    stack: '总量1', //这个是什么呢？如果上下两个人名字一样的柱状图就会重合起来。
                    data: []
                },
                {
                    name :'城镇户籍',
                    type :'bar',
                    stack: '总量1',//
                    data :[]
                }
            ];
//定义横坐标（x轴显示什么东西）
var cityName=[];
//接下来是一个图表参数的变量
var option = {
            color:['#5292CD','#9AD94C'], //定义柱状图的颜色
            backgroundColor:'gray',//定义图的北京颜色
            title:{ //这个是控制标题部分
                text:'各区县老人数量分布', 这
                left: 'center'
            },
            tooltip: { //这个是用来控制鼠标划上去显示什么内容
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: { //这个翻译是传奇的意思，这个主要和series里面的对应使用
                top:30,
                left: 10,
                data: ['农村户籍','城镇户籍']
            },
            xAxis:{//控制X轴
                type:'category',
                data:cityName,
                axisTick: {
                    alignWithLabel:true
                }
            },
            yAxis:{ //控制y轴
                type:'value',
                
            },
                        // 数据要想显示全靠它了
            series:info
        };
          $.ajax({
            url: './data.json',
            success: function(success){
                var data = success.data;
                
                data.forEach(function(v,i){
                    if(v.registerStats == '农村户籍'){
                        info[0].data.push(v.sCount);
                        cityName.push(v.cityName);
                    }else {
                        info[1].data.push(v.sCount);
                    }
                })
                
                myChart.setOption(option);
            }
        })

最后我们通过一个ajax,获取到数据，然后把他们数据进行解析，分别放到info，和cityName中；

接下来我要分析下数据data.js，

Paste_Image.png

由于这是公司的数据，所以不能公开，所以只能让大家看一下格式，然后得到数据后我们自己整理下数据就可以使用了

Paste_Image.png

整理方式如上图；
这样子我们就可以画出图了，具体的api还要参考官网文档，我们就大概讲解下其用法。