ECharts试用小记

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

Echarts提供了多种多样的图标以及对应的示例，在试用之前可以进行一个参照http://echarts.baidu.com/examples.html

1、首先我们从它的官网上下下载所需的js文件，如果是制作地图相关的图表还需要下载对应地图的js或者json文件。ps:下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

2、下载完之后就可以在我们项目中的webapp下建立相应的文件放入，然后即可在html页面中引用，这也是echarts的便利，在无需引用别的相关依赖了剩下的就交给ajax进行数据的传入即可

<script type="text/javascript" src="/js/echarts/echarts.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/js/echarts/china.js" charset="UTF-8"></script> 

3、引用到js文件后，我们在html页面加上一个div作为图表的一个展示层，div中的样式可以自由的设置，大小设置好满足显示

<div id="myChart" style="position: absolute; overflow: hidden; width: 100%; height: 100%; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"></div> 

4、首先对所设置的这个div作为图表的展示进行一个初始化

var myChart = echarts.init(document.getElementById('myChart'));

5、最关键的是对option属性的设置，在项目的使用过程中大部分都是通过ajax动态的获取数据进行一个前端的展示

    option = {
        tooltip : {
            trigger : 'item'
        }
    };
    var myChart = echarts.init(myChartDiv);
    myChart.setOption(option); //渲染地图

    $.get('/js/echarts/china.json', function (chinaJson) {
        echarts.registerMap('china', chinaJson);
        myChart.setOption({
                series: [{
                        type: 'map',
                        map: 'china'
                }]
        });
});

    // 异步加载数据
    $.ajax({
                type : "get",
                async : false, //同步执行
                url : "/bondRegionGraphData.htm?table="+table+"&key="+key+"&date="+date+"&flag="+flag+"",
                dataType : "json", //返回数据形式为json
                data : {
                    rnd : Math.random()
                },
                success : function(result) {
                    console.log(result);
                    myChart.hideLoading();
                    if (result.success) {
                        myChart.setOption({
                            series : [ {
                                type : 'map',
                                mapType : 'china',
                                roam : false, //是否开启鼠标缩放和平移
                                // 根据名字对应到相应的系列
                                name : result.name,
                                data : result.data
                            } ],
                            visualMap : { //视觉映射组件，可以根据范围调节数据变化 
                                min : 0, //最小值 
                                max : result.maxValue, //最大值 
                                left : 'left', //位置 
                                top : 'bottom',
                                orient : 'horizontal', //水平 
                                text : [ '高', '低' ], // 文本，默认为数值文本 
                                calculable : true
                            //是否启用值域漫游，即是否有拖拽用的手柄，以及用手柄调整选中范围。 
                            },
                            title : {
                                text : result.title,
                                left : 'center' //标题居中 
                            }
                        });
                    } else {
                        myChart.setOption({
                            title : {
                                text : result.title,
                                left : 'center' //标题居中 
                            },
                            series : [ {
                                type : 'map',
                                map : 'china',
                                data : []
                            } ]
                        });
                    }
                },
                error : function(errorMsg) {
                    alert("请求数据失败!");
                }
            });

6、这里我是以json格式的中国地图数据（china.json），所以就多了下面这个给echarts.registerMap来注册地图，如果是直接引用china.js则可以直接引用js即可忽略这步

    $.get('/js/echarts/china.json', function (chinaJson) {
        echarts.registerMap('china', chinaJson);
        myChart.setOption({
                series: [{
                        type: 'map',
                        map: 'china'
                }]
        });
});

7、最关键的一步就是给option中的series属性添加data的值，data的值要求传入的是一个JSONArray的形式{name:”上海”,value:0}，我们可以将数据库查出来的数据，拼装成JSONObject格式，注意：如果是地图图表name传入的是城市或者地区的简称，value不可以是字符类型

               series : [ {
                                type : 'map',
                                mapType : 'china',
                                roam : false, //是否开启鼠标缩放和平移
                                // 根据名字对应到相应的系列
                                name : result.name,
                                data : result.data
                            } ]

所有的图表option都是大同小异，关键还是在数据的拼装，最后展示下制作的两个图表。