百度echart柱图、折线图、饼图、Map类型等类似视图的动态加载数据

这几天接触的一个项目需要使用到百度的echart，所以简单查找并实验了几款比较简单且适用性较广的例子，做了几个简单的Demo，一来是对echart有所了解，二来也是记录一下，方便以后进一步的优化。

首先，是echart的js文件，一般情况下，这一个文件基本就可以了，但是由于本文还需要涉及到地图类型的处理，所以还需要一个地图包，，这个echart官网已经下架了，说是因为部分矢量数据不正确，建议用百度地图，但是在相关的实例中还是可以找到的，也挺好找的，就先拿这个练手，为了不暴露，代码中涉及到的url都用urlurlrul替代。

然后就是把相关的包导入项目，并且做引入

其实对于每一个实例而言，其过程都是类似的，先初始化相关参数，然后通过ajax动态加载需要更新的数据，

比如第一个柱图，首先初始化

 option = {
        title: {      //标题组件
            text: '消费金额统计图',
            x: 'center',
            y: 'top',
            textAlign: 'left'
        },
        tooltip: {    //提示框组件
            trigger: 'axis',
            showDelay: 5
        },
        legend: {     //图例组件
            left: 'left',
            data: ['消费金额(元)', '周环比(100%)']
        },
        grid: {       //直角坐标系内绘图网格
            x: 40,
            x2: 100,
            y2: 150,
            containLabel: true
        },
        toolbox: {     //工具栏
            feature: {
                magicType: {
                    type: ['line', 'bar', 'tiled']
                },
                dataView: {readOnly: false},
                saveAsImage: {}
            }
        },
        xAxis: {       //直角坐标系 grid 中的 x 轴
            type: 'category',
            boundaryGap: true,
            axisLabel: {
                interval: 0,
                rotate: 40,
            },
            textStyle: '#333',
            name: "时间",
            axisTick: {
                show: false
            },
            data: []
        },
        yAxis: {       //直角坐标系 grid 中的 y 轴
//         	min: 0,
//         	max: 4000,
//         	interval:500,
            name: "值",
            type: 'value'
        },
        series: [      //系列列表
            {
                name: '消费金额(元)',
                type: 'line',
                stack: '总量',
                itemStyle: {normal: {label: {show: true}}},
                data: [133, 21, 321, 2]
            },
            {
                name: '周环比(100%)',
                type: 'line',
                itemStyle: {normal: {label: {show: true}}},
                stack: '总量',
                data: [12, 32, 11, 45]
            }
        ]
    };
    myChart.setOption(option);  

然后ajax动态加载数据：

function getChartData() {
        //获得图表的options对象
        var options = myChart.getOption();
        //通过Ajax获取数据
        $.ajax({
            type: "post",
            async: false, //同步执行
            url: "urlurlrul/getEchartData",
            data: {},
            dataType: "json", //返回数据形式为json
            success: function (result) {
                if (result) {
                    options.title[0].text=result.title;
                    options.legend[0].data = result.legend;
                    options.xAxis[0].data = result.category;
                    for (var i = 0; i < result.series.length; i++) {
                        options.series[i].name = result.series[i].name;
                        options.series[i].type = result.series[i].type;
                        options.series[i].data = result.series[i].data;
                    }
                    myChart.hideLoading();
                    myChart.setOption(options);
                }
            },
            error: function (errorMsg) {
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    }

其实这部分最关键，也是整个项目最关键的部分，就是ajax动态加载之后的数据接收处理，由于都是自己的练手代码，所以我都在后台把数据处理好再发送。后端主要有三个主要的方法，EchartData(),Series(),和echartGetData()。EchartData()用于处理图表Option的主要参数，Series()处理series中data和其他相关参数，echartGetData()则是用于处理数据和传输数据的方法。

	@PostMapping(value = "/getEchartData",produces = "application/json;charset=utf-8")
	public EchartData echartGetData() {
		String title = "折线图和柱图";
		
		List<Object> seriesList = new ArrayList<>();//动态数据集
		
		List<String> legend = new ArrayList<>();//图例
		
		legend.add("销量");
		legend.add("售价");

		
		List<String> category = new ArrayList<>();//坐标轴
		category.add("一月份");
		category.add("二月份");
		category.add("三月份");
		category.add("四月份");
		
		List<Integer> xList = new ArrayList<>();
		xList.add(11);
		xList.add(24);
		xList.add(31);
		xList.add(14);