本文共 3493 字，大约阅读时间需要 11 分钟。

最近要做一个任务，统计一个时间段，不同应用商城本公司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的模板，其实他本身就可以画一个图了，但是要实用的话，我们必须让他和后台交互才行。

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

   
    
            一周        一个月        一个季度    
   

   
    
    小米    
    魅族    
    华为    
    苹果
   

然后设置点击超链接的时候发送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
   
     time = Arrays.asList("7-2", "7-3", "7-4", "7-5", "7-6","7-7","7-8");    List
    
      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