默认option指令：

    <chart-bar option="option"></chart-bar>
    【必写属性】默认option，参数有限，配置简单

scope中的数据：

    $scope.option = {
        xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        yAxis: [{
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} ml'
            }
        }, {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            }
        }],
        series: [{
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        }, {
            name: '降水量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        }, {
            name:'平均温度',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }],
        backgroundColor: '#f5f5f5',         // 背景颜色，默认无背景色
        saveAsImage: false                  // 是否显示"保存为图片"
    }


增强option指令：

    <chart-bar option="option" origin="true"></chart-bar>
    origin="true"则option可以是echarts bar支持的所有属性

scope中的数据：
    参考官方文档

响应点击事件指令：:

    <chart-bar option="option" output-data="nodeInfo" bar-click="onBarClick();"></chart-bar>
    bar-click="onBarClick();"： 自定义点击事件
    output-data="nodeInfo"： 【必写属性】点击处的数据

scope中的数据：
    $scope.onLineClick = function(){
        console.table($scope.nodeInfo);
    }

    

    如果legend数据太长导致内容重叠，提供三种建议方案：
        方案1. 增加图表显示区域的宽高；
        方案2. 将origin置为true，通过更全的参数调整渲染布局；
        方案3. 将legend隐藏，在图标DOM旁边自定义legendDOM。