Echarts使用，使用springmvc完成数据交互

最近要做一个任务，统计一个时间段，不同应用商城本公司APP的下载量趋势图。

大概效果是这样的，你先选择时间，然后点击不同的商城，就会画出该渠道的下载量趋势图：

选择不同商城，会画出不同的曲线。

实现如下:

echarts本身就已经实现了很多功能，我们需要的是完成数据的填入：

var option = {
    title: {
        text: '下载量趋势图',
        subtext: 'test'
    },
    tooltip: {
        trigger: 'axis',
    },
    legend: {
        data: ['下载量'],
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['一', '二', '三', '四', '五', '六', '日']
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                formatter: '{value} 个'
            }
        }
    ],
    series: [
        {
            name: '下载量',
            type: 'line',
            data: [0, 0, 0, 0, 0, 0, 0],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ]
};

这是echarts的模板，其实他本身就可以画一个图了，但是要实用的话，我们必须让他和后台交互才行。

首先，要把前台的数据传给后台，我们这里要传的就是时间段和哪个商场：

<div style="height:50px;width: 100%" align="right">
    <select id="regularTime">
        <option>一周</option>
        <option>一个月</option>
        <option>一个季度</option>
    </select>
</div>

<div style="height:50px;width: 100%" align="center">
    <a href="#" id="xiaomi">小米</a>
    <a href="#" id="meizu">魅族</a>
    <a href="#" id="huawei">华为</a>
    <a href="#" id="pingguo">苹果</a>
</div>

然后设置点击超链接的时候发送ajax请求，然后对响应的结果去填充echarts的模板：

var allA = $('a');
for (var i = 0; i < allA.length; i++) {
    allA.eq(i).bind('click', function () {
        var y = $(this).attr('id');//找到点击了哪个超链接
        var myChannel = {};//构建json数据，用于发送给后台
        myChannel.channel = y;
        myChannel.time = document.getElementById("regularTime").value;
        document.getElementById("currentId").innerHTML = '当前：' + y;//给标题赋值，标明现在的折线图是那个商城的
        $.ajax({//发送请求
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "/jsontest",
            data: JSON.stringify(myChannel),
            dataType: "json",
            error: function (dataa) {
                alert("出错了！！:" + dataa);
            },
            success: function (dataa) {
                option.xAxis[0].data = dataa.time;//对echarts模板进行数据填充
                option.series[0].data = dataa.number;
                myChart.setOption(option);//重新啊显示
            }
        });
    })
}

后台获取数据，并根据获取的数据做不同的数据返回：

@RequestMapping(value = "/jsontest", produces = "application/json;charset=UTF-8")//接收为json数据，自动转化
public @ResponseBody Echarts json(@RequestBody MyChannel myChannel) {
    System.out.println(myChannel);
    Echarts echarts = new Echarts();
    List<String> time = Arrays.asList("7-2", "7-3", "7-4", "7-5", "7-6","7-7","7-8");
    List<Integer> number = null;
    if ("xiaomi".equals(myChannel.getChannel())) {//这里我们根据不同的前台数据，给出不同的注册量
        number = Arrays.asList(2, 4, 6, 2, 8, 8, 4, 8, 2, 4, 6, 4, 2, 1, 9);
    } else if ("meizu".equals(myChannel.getChannel())) {
        number = Arrays.asList(3, 5, 6, 12, 3, 8, 2, 9, 1, 5, 9, 5, 4, 6, 8);
    } else if ("huawei".equals(myChannel.getChannel())) {
        number = Arrays.asList(2, 5, 1, 3, 6, 4, 2, 5, 5, 8, 1, 6, 23, 1, 4);
    } else {
        number = Arrays.asList(4, 8, 2, 4, 6, 3, 1, 9, 5, 2, 5, 6, 3, 4, 2);
    }
    echarts.setTime(time);
    echarts.setNumber(number);
    return echarts;
}

完整代码地址：https://github.com/zhanxupeng/echarts