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

曾经终败给现在 2022-06-10 00:35 200阅读 0赞

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

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

![Center][]

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

实现如下:

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的模板：

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

@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

[Center]: /images/20220610/51041045cb7e4120baabffc383a87fa2.png