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

来源：互联网发布：淘宝刷销量怎么刷编辑：程序博客网时间：2024/06/16 02:13

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，前台显示

<scripttype="text/javascript"src="/js/jquery-1.7.1.min.js"></script>

<scriptsrc="http://echarts.baidu.com/build/dist/echarts.js"></script>

<divid="main"style="height:400px"></div>

<scripttype="text/javascript">

//路径配置

require.config({

paths: {

echarts: 'http://echarts.baidu.com/build/dist'

}

});

//使用

require(

[

'echarts',

'echarts/chart/line'//使用柱状图就加载bar模块，按需加载

function (ec) {

//基于准备好的dom，初始化echarts图表

var myChart = ec.init(document.getElementById('main'));

option = ${opt};

//为echarts对象加载数据

myChart.setOption(option);

}

);

</script>

前台也是比较简单的，只要有个div的id为main的，js会输出到这个位置，下边的是echarts的框架，当然，这个前台还有优化的地方，包括增加ajax方式的，都可以。

这样图标就输出。其他的可以用同样思路输出。

要注意的是，java是要有jar包导入的，只有一个，包含有其他图形。

Jar包下载地址：我下载的是2.2.6版本。每个版本稍有不同。

http://mvnrepository.com/artifact/com.github.abel533/ECharts

Api地址

http://git.oschina.net/free/ECharts

不要对api抱有什么幻想，写的很粗糙，看瞎眼睛也看不出多少东西。

0 0