jquery+echarts初体验 _跨域问题解决方案

使用echarts

1、柱状图

2、折线图

​3、饼状图

​4、中国地图

1. 跨域请求：在不同源的页面/资源中进行请求。

2. 同源策略：如果两个页面的协议(http/https)，端口（如果有指定）和主机(IP地址)都相同，则两个页面具有相同的源，如果中间有一个不同，则源不同。

3. 如何解决跨域请求问题，需要在前后端一起处理。

a) 前端：使用jsonp解决跨域请求的问题。

ECharts是由百度打造的一个纯javascript的图标库，很好用。

一、创建一个实体类来存数据,先把数据存在集合里面

    @Setter
    @Getter
    @ToString
public class HistogramDto implements Serializable{
    List<String> data = new ArrayList<String>();
    List<String> category = new ArrayList<String>();

//数据添加到集合
    public void addCategory(String categoryName){
        this.category.add(categoryName);
    }

    public void addData(String dataName){
        this.data.add(dataName);
    }

}

二、创建controllen响应页面的请求,这些是假的模拟数据，可以自己从数据库获取

//可以实现跨域请求
@Controller
public class EchartsController {

    @CrossOrigin(origins = "*", maxAge = 3600)
    @ResponseBody
    @RequestMapping(value = "getDataJsonp",method = RequestMethod.GET)
    public Object getDataJsonp(String callback){//此处参数callback与 前端jsonp属性名callback一致
        System.out.println("inner getDataJsonp");
        System.out.println(callback);
        //把数据添加的到对象中去
        HistogramDto dto = new HistogramDto();
    
        dto.addCategory("苹果");
        dto.addCategory("梨子");
        dto.addCategory("香蕉");
        dto.addCategory("菠萝");
        dto.addCategory("芒果");
        dto.addData("100");
        dto.addData("50");
        dto.addData("120");
        dto.addData("40");
        dto.addData("170");
        //注意返回值类型应该为JSONPObject所封装
        JSONPObject jsonpObject = new JSONPObject(callback,dto);
        System.out.println(jsonpObject+":::");
        return jsonpObject;
    }

}

、

三、导入标签

  <script src="echarts/js/echarts.min.js"></script>
    <script src="jquery/jquery-2.1.1.min.js"></script>
    
     <!--json处理包-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.8.6</version>
        </dependency>
    

四、创建一个容器

<div id="pic1" style="width:800px;height:400px; margin: 20px auto;"></div>

五、写echarts,注释的是静态页面的测试数据

<script>
        var myChart = echarts.init(document.getElementById("pic1"));

        // //获取X轴数据
        // function getXAxis() {
        //     var list = new Array();
        //     for(var i=1;i<=12;i++){
        //         list.push(i);
        //     }
        //     return list;
        // }
        //
        // //定义选项
        // var option = {
        //     backgroundColor: '#FBFBFB',
        //     //工具提示
        //     tooltip : {
        //         trigger: 'axis'
        //     },
        //     //说明；图例
        //     legend: {
        //         data:['充值','消费']
        //     },
        //     //可计算的
        //     calculable : true,
        //     //x轴
        //     xAxis : [
        //         {
        //             axisLabel:{
        //                 //旋转
        //                 rotate: 30,
        //                 interval:0
        //             },
        //             axisLine:{
        //                 lineStyle :{
        //                     color: '#CECECE'
        //                 }
        //             },
        //             type : 'category',
        //             boundaryGap : false,
        //             data : getXAxis()
        //         }
        //     ],
        //     yAxis : [
        //         {
        //             type : 'value',
        //             axisLine:{
        //                 lineStyle :{
        //                     color: '#CECECE'
        //                 }
        //             }
        //         }
        //     ],
        //     //系列(数据折线集合)
        //     series : [
        //         //折线数据
        //         {
        //             name:'充值',
        //             type:'line',//折线图
        //             symbol:'yes',//有没有圆点
        //             smooth: 0.2,//折线的圆滑程度
        //             color:['#66AEDE'],//折线的颜色
        //             data:[800, 300, 500, 800, 300, 600,500,600,1000,100,400,800]//折线的数据
        //         },
        //         {
        //             name:'消费',
        //             type:'line',
        //             symbol:'yes',
        //             smooth: 0.2,
        //             color:['#90EC7D'],
        //             data:[600, 300, 400, 200, 300, 300,200,400,800,500,300,1000]
        //         },
        //         {
        //             name:'消费1',
        //             type:'line',
        //             symbol:'yes',
        //             smooth: 0.2,
        //             color:['#90EC7D'],
        //             data:[200, 500, 300, 200, 300, 400,200,400,800,500,300,1000]
        //         }
        //     ]
        // };
        //
        // //设置选项
        // myChart.setOption(option);

        $.ajax(
            {
                url: "http://localhost:8081/getDataJsonp",
                type: "GET",
                jsonp: "callback",
                dataType: "jsonp", //指定服务器返回的数据类型
                success: function (data) {
                    alert(data.data)
                    console.log(data);
                    //使用返回的数据填充myChart的选项
                    myChart.setOption(
                    {
                        backgroundColor: '#FBFBFB',
                            //工具提示
                            tooltip : {
                        trigger: 'axis'
                    },
                        //说明；图例
                        legend: {
                            data:['充值','消费']
                        },
                        //可计算的
                        calculable : true,
                            //x轴
                            xAxis : [
                        {
                            axisLabel:{
                                //旋转
                                rotate: 30,
                                interval:0
                            },
                            axisLine:{
                                lineStyle :{
                                    color: '#CECECE'
                                }
                            },
                            type : 'category', //x抽的数据
                            boundaryGap : false,
                            data : data.category //x抽的数据
                        }
                    ],
                        yAxis : [
                        {
                            type : 'value',
                            axisLine:{
                                lineStyle :{
                                    color: '#CECECE'
                                }
                            }
                        }
                    ],
                        //系列(数据折线集合)
                        series : [
                        //折线数据
                        {
                            name:'充值',
                            type:'line',//折线图
                            symbol:'yes',//有没有圆点
                            smooth: 0.2,//折线的圆滑程度
                            color:['#66AEDE'],//折线的颜色
                            data:data.data  //y轴的数据
                        }
                    ]
                    })
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    console.log("服务器异常");
                    console.log(XMLHttpRequest.status);//200 400  404  415  500
                    console.log(XMLHttpRequest.readyState);//0-4
                    console.log(XMLHttpRequest.responseText);//响应文本
                    console.log(textStatus);
                    console.log(errorThrown);
                    console.log(textStatus);
                }
            });
    </script>

4. 至此，springmvc+jquery+echarts集成完毕，注意要点是前后端都必须支持跨域和使用jsonp
5. 实际上，跨域问题还有另外一种解决方案。但是不推荐使用。即在页面a.html同一个项目下，新建Control A，在A里面请求另外一个非同源的Control B(使用httpClient)获取到返回值，再返回给前端页面a.html