ECharts插件简单入门——柱状图

      先来秀图吧！！

 

刚接触，实在有点怵啊，其实，现在搞明白了，回头一想也就那么一回事呀，怎么当初自己还那么怵嘛！

没有网的日子，我觉得一个API足矣，一定要定下心来看看文档，自然而然就晓得了。废话不说啦吧，进入正题！

ECharts文件的引入方式有三种：1·模块化包引入；2·模块化单文件引入；3·标签式单文件引入；

这里我使用的是第二种：模块化单文件引入，其它方式可参考官方文档。（可以点这里）

步骤一：

在官方文档里可以直接点击下载，即可下载相应版本的ECharts插件。然后将echarts-2.2.7\build\dist文件目录下的chart文件夹和echarts.js拷贝到一个单独的文件夹中（我放到一个js文件夹中），该js文件和下面添加的demo（echarts.html）在同一目录下。如图：

              

步骤二：

              新建html，如上图所示：echarts.html文件。

步骤三：

为ECharts准备一个具备大小（宽高）的Dom

<span style="font-size:18px;"><div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div></span>

步骤四：

          引入echarts.js

<script src="js/echarts.js"></script>

步骤五：

为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径

<script type="text/javascript">
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    require.config({
        paths: {
            echarts: './js'
        }
    });

步骤六：

动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径

 require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/map'
        ],

步骤七：

创建方法：

        function (ec) {
            //--- 折柱 ---
            var myChart = ec.init(document.getElementById('main'));
            myChart.setOption({
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['蒸发量','降水量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                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]
                    }
                ]
            }); 
          
        }

ok，基本工作已经完成，下面在浏览器打开该html，即可看到效果。

好了，后续的研究，我们一起期待。