Echarts简单使用实例

正在学习，做的第一个echarts小样，供以后参考用：
1、因为是使用struts2写的，先导入struts2必备包:

2.action部分代码很简单，就是将信息拼装成json字符串：

/**
     * 获取echart数据方法，拼装成json字符串
     * @throws IOException
     */
    public void getData() throws IOException{
        String[] province = {"北京","天津","上海","重庆","河北","河南","云南","辽宁","黑龙江","湖南","安徽","山东","新疆","江苏","浙江","江西","湖北","广西","甘肃","山西","内蒙古","陕西","吉林","福建","贵州","广东","青海","西藏","四川","宁夏","海南","台湾","香港","澳门"};
        StringBuffer stringBuffer =new StringBuffer();
        stringBuffer.append("[");
        for(String p:province){
            stringBuffer.append("{name: '"+p+"',value: "+Math.round(Math.random()*1000)+"},");
        }
        HttpServletResponse response  = ServletActionContext.getResponse();
        response.setCharacterEncoding("utf-8");
        response.getWriter().print(stringBuffer.substring(0,stringBuffer.length()-1)+"]");
    }

3、jsp部分，先引入echarts提供的JS（网上有很多可以自己去下载，原包里有很多js文件，只自己需要的就行了，我这边多引了一下）

4、引jar包可以使用网站上提供的requirejs的方法也可以传统方法引包（requirejs的方法好像可以异步，效率更高，还没仔细了解）：
方法1：

//方法1，利用requirejs去加载我们需要的JS，展示echarts,要引用echarts.js
         require.config({  
           paths:{   
               echarts: 'js/dist'  
           }  
        });   
        // 使用  
        require(  
           [  
               'echarts/echarts',  
               'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载  
           ],  
           function (ec) {  
               // 基于准备好的dom，初始化echarts图表  
               var myChart = ec.init(document.getElementById('main'));   

               var option = {
                        title : {
                            text: 'iphone销量',
                            subtext: '纯属虚构',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            x:'left',
                            data:['iphone3']
                        },
                        dataRange: {
                            min: 0,
                            max: 2500,
                            x: 'left',
                            y: 'bottom',
                            text:['高','低'],           // 文本，默认为数值文本
                            calculable : true
                        },
                        toolbox: {
                            show: true,
                            orient : 'vertical',
                            x: 'right',
                            y: 'center',
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        roamController: {
                            show: true,
                            x: 'right',
                            mapTypeControl: {
                                'china': true
                            }
                        },
                        series : [
                            {
                                name: 'iphone3',
                                type: 'map',
                                mapType: 'china',
                                roam: false,
                                itemStyle:{
                                    normal:{label:{show:true}},
                                    emphasis:{label:{show:true}}
                                },
                                data:[
                                    {name: '北京',value: Math.round(Math.random()*1000)},
                                    {name: '天津',value: Math.round(Math.random()*1000)},
                                    {name: '上海',value: Math.round(Math.random()*1000)},
                                    {name: '重庆',value: Math.round(Math.random()*1000)},
                                    {name: '河北',value: Math.round(Math.random()*1000)},
                                    {name: '河南',value: Math.round(Math.random()*1000)},
                                    {name: '云南',value: Math.round(Math.random()*1000)},
                                    {name: '辽宁',value: Math.round(Math.random()*1000)},
                                    {name: '黑龙江',value: Math.round(Math.random()*1000)},
                                    {name: '湖南',value: Math.round(Math.random()*1000)},
                                    {name: '安徽',value: Math.round(Math.random()*1000)},
                                    {name: '山东',value: Math.round(Math.random()*1000)},
                                    {name: '新疆',value: Math.round(Math.random()*1000)},
                                    {name: '江苏',value: Math.round(Math.random()*1000)},
                                    {name: '浙江',value: Math.round(Math.random()*1000)},
                                    {name: '江西',value: Math.round(Math.random()*1000)},
                                    {name: '湖北',value: Math.round(Math.random()*1000)},
                                    {name: '广西',value: Math.round(Math.random()*1000)},
                                    {name: '甘肃',value: Math.round(Math.random()*1000)},
                                    {name: '山西',value: Math.round(Math.random()*1000)},
                                    {name: '内蒙古',value: Math.round(Math.random()*1000)},
                                    {name: '陕西',value: Math.round(Math.random()*1000)},
                                    {name: '吉林',value: Math.round(Math.random()*1000)},
                                    {name: '福建',value: Math.round(Math.random()*1000)},
                                    {name: '贵州',value: Math.round(Math.random()*1000)},
                                    {name: '广东',value: Math.round(Math.random()*1000)},
                                    {name: '青海',value: Math.round(Math.random()*1000)},
                                    {name: '西藏',value: Math.round(Math.random()*1000)},
                                    {name: '四川',value: Math.round(Math.random()*1000)},
                                    {name: '宁夏',value: Math.round(Math.random()*1000)},
                                    {name: '海南',value: Math.round(Math.random()*1000)},
                                    {name: '台湾',value: Math.round(Math.random()*1000)},
                                    {name: '香港',value: Math.round(Math.random()*1000)},
                                    {name: '澳门',value: Math.round(Math.random()*1000)}
                                ]
                            }
                        ]
                    };

               // 为echarts对象加载数据   
               myChart.setOption(option);   
           }  
        );  

方法二（这里直接把Ajax的调用方法写在一起）：

 var chartData; //声明全局变量利用ajax赋值，方便给option赋值
        //利用ajax方法获取数据
        $.ajax({
            url:"aaa/echarts!getData.action",
            type:"post",
            async:false,   //ajax请求是同步还是异步，默认是异步，如果设置为同步,该方法必须是得到响应值做完响应的处理才会往下面执行
            success:function(data){
                var jsonO = eval("("+data+")");
                chartData=jsonO;
            }
        });

        // 基于准备好的dom，初始化echarts图表  
        var myChart = echarts.init(document.getElementById('main'));//jquery方法好像会出错，不知道什么原因
        var option = {
            title : {
                text : 'iphone销量',
                subtext : '纯属虚构',
                x : 'center'
            },
            tooltip : {
                trigger : 'item'
            },
            legend : {
                orient : 'vertical',
                x : 'left',
                data : [ 'iphone3' ]
            },
            dataRange : {
                min : 0,
                max : 2500,
                x : 'left',
                y : 'bottom',
                text : [ '高', '低' ], // 文本，默认为数值文本
                calculable : true
            },
            toolbox : {
                show : true,
                orient : 'vertical',
                x : 'right',
                y : 'center',
                feature : {
                    mark : {
                        show : true
                    },
                    dataView : {
                        show : true,
                        readOnly : false
                    },
                    restore : {
                        show : true
                    },
                    saveAsImage : {
                        show : true
                    }
                }
            },
            roamController : {
                show : true,
                x : 'right',
                mapTypeControl : {
                    'china' : true
                }
            },
            series : [ {
                name : 'iphone3',
                type : 'map',
                mapType : 'china',
                roam : false,
                itemStyle : {
                    normal : {
                        label : {
                            show : true
                        }
                    },
                    emphasis : {
                        label : {
                            show : true
                        }
                    }
                },
                data : chartData  //这里给data赋值就好了
            } ]
        };

        // 为echarts对象加载数据   
        myChart.setOption(option);

注：不用requirejs去组装数据的时候，我们引用需要换echarts-all.js

5、效果图

平生第一篇博客就这样出炉了，新手上路，请多指教！！！！