Echarts使用

百度前端发起的数据可视化项目

官网：http://echarts.baidu.com/

GitHub：https://github.com/ecomfe/echarts

官网有很详细的演示和文档，入门比较容易，下载产品包，本地无需配置就可以运行例子。

以index.html为例，结合动态数据实际改造应用。

服务端采用标准的springmvc + mybatis，数据以json方式返回，不叙述。

前端需要引用Echart组件，由于Echarts底层依赖zrender（http://ecomfe.github.io/zrender/），需要同时下载。

web工程引用如下：

index页面给出了很详细的步骤说明。

额外需要引入jquery，下面要用到，其他地方保持不变。

<!--Step:1 Import a module loader, such as esl.js or require.js-->
<!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
<script src="echarts/esl.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>

<!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
<div id="main" style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div

// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
   paths : {
              echarts : './js/echarts',
              'echarts/chart/line' : './echarts/echarts'
            }
   });

改为ajax方式获取服务端Json数据，填充到组件上。

// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
        require([ 'echarts', 'echarts/chart/line' ], function(ec) {
            var myChart = ec.init(document.getElementById('main'));
            var option = {};
            myChart.setOption(option);

            var labels = new Array();
            var dt = new Array();
            $.get("show", function(data) {
                var index = 0;
                $.each(data, function(key, val) {
                    labels[index] = data[key]['name'];
                    dt[index] = data[key]['value'];
                    index++;
                })
                
                option = {
                    tooltip : {
                        trigger : 'axis'
                    },
                    legend : {
                        data : [ '测试' ]
                    },
                    toolbox : {
                        show : true,
                        feature : {
                            mark : true,
                            dataView : {
                                readOnly : false
                            },
                            magicType : [ 'line', 'bar' ],
                            restore : true,
                            saveAsImage : true
                        }
                    },
                    calculable : true,
                    xAxis : [ {
                        type : 'category',
                        data : labels
                    } ],
                    yAxis : [ {
                        type : 'value',
                        splitArea : {
                            show : true
                        }
                    } ],
                    series : [ {
                        name : '测试',
                        type : 'bar',
                        data : dt
                    } ]
                }
                myChart.setOption(option);
            });
        });

 简单的效果图