您的位置：首页 > 编程语言 > Java开发

ECharts图表使用实例（多条折线图）--JAVA

2017-01-19 13:14 3035 查看

ECharts图表使用实例（多条折线图）--JAVA

1，关于Echarts

大家可以到这个网址看一下，还是比较详细的。
http://echarts.baidu.com/doc/example.html
这个功能还是很强大的，对于喜欢做数据统计来说是美味的。
里面也有详尽的api，但是想搞懂，还是太苦涩。通过自己摸索，改良了一下，针对JAVA的，简单易懂多了。
此实例只是针对多条折线图来说，其他的并不比这个难。

2，多条折线图

就是这个熊样的图。
Echarts给出的js代码是：
option = {
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show:true},
            dataView : {show:true, readOnly: false},
            magicType : {show:true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show:true},
            saveAsImage :{show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap :false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132,101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182,191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232,201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[320, 332,301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            data:[820, 932,901, 934, 1290, 1330, 1320]
        }
    ]
};
请看好这个结构，分别有什么：
tooltip      图形属于哪一类，比如折线图的标识是 'axis'，饼状图是bar
legend               这个其实就是有几条折现的类目
Toolbox      图的右上角有个工具条，这些工具条都包含哪些工具
calculable 这个固定的
xAxis        x是横轴，是横轴上都有哪些数据
yAxis        y是纵轴，是纵轴上有哪些数据，这里用value，会自动计算你的数据的宽度，                     然后自行安排最大值，最小值，每一格代表多少值
series        折现节点数据集合。横轴和竖轴的每一格节点数据
结构其实并不复杂，网上有很多实例，弄了很多属性，当然是有用的，但是对于初学者会增加难度，甚至是误导。
然后咱来看看这里面都有哪些数据，折现类目，横轴跨度数据，节点数据。然后把这些数据按察进去就可以了，其他的图形你也可以按照这个思路来。

3，组装数据代码（JAVA）

Map<String,SzcDic> sdMap=new HashMap<String,SzcDic>();
        for(SzcDicsd:sdlist){
            sdMap.put(sd.getCreateDate()+"_"+sd.getMname(), sd);
        }
        GsonOption goption =
new GsonOption();
        goption.tooltip(Trigger.axis);
        goption.toolbox().show(true).feature(Tool.mark,Tool.dataView,newMagicType(Magic.line,Magic.bar),Tool.restore,Tool.saveAsImage);
        goption.calculable(true);
        CategoryAxis categoryAxis =
new CategoryAxis();
        categoryAxis.axisLabel().formatter("{value}");
        categoryAxis.boundaryGap(false);
        List<String> dateList=new ArrayList<String>();
        for(int i=1;startDate.before(endDate);i++){
            StringcreateDate=DateUtil.dateToString(startDate,"yyyy-MM-dd");
            categoryAxis.data(createDate);
            dateList.add(createDate);
            startDate=DateUtil.addDiffDay(startDate, 1);
        }
        for(Managermanager:managerList){
            Stringmname=manager.getMname().trim();
            goption.legend().data(mname);
            Line line =
new Line();
            for(String d:dateList){
                SzcDic sd=sdMap.get(d+"_"+mname);
                if(sd!=null){
                    line.smooth(true).name(mname).data(sd.getAcount());

                }else{
                    line.smooth(true).name(mname).data(0);
                }
            }
            goption.series(line);
        }
        goption.xAxis(categoryAxis);
        ValueAxis vAxisy =
new ValueAxis();
        vAxisy.axisLabel().formatter("{value}篇");
        goption.yAxis(vAxisy);

///////////----
    model.addAttribute("opt",JSONObject.fromObject(goption.toString()));
这是一个统计后台人员添加文章的篇数，按照开始时间和结束时间查询。所以横轴就是时间，竖轴为篇数，每条折现代表一个管理员。输出结果为json，这样既可以作为ajax使用，直接输出值也是可以的。

4，前台显示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航