Echarts图表

近期做报表时用到了Echarts图表，因为从前只用过JfreeChart，两者一比较感觉百度做的确实厉害，功能很强大，要是很多。

最近主要用到了，柱状图，折线图，混合图，南丁格尔玫瑰图，桑基图。

有兴趣可以到其官网看，上面讲的非常详细。http://echarts.baidu.com/index.html；

官网API地址：http://echarts.baidu.com/option.html#title

1.柱状图，折线图，混合图

下面代码是实际项目中的用法，具体属性就不多说了，到上面网址去看。最主要的就是数据格式。

图例：data:['蒸发量','降水量','平均温度']；

默认图例显示：selected:['平均温度':false];

后台查询字段：data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];

数据:series:

[

{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'平均温度',
type:'line',
yAxisIndex: 1,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]

其实我建议大家到官网看看文档，我这也是粗略写一下，因为用的少，以后自己看的时候有地方找，主要还是上面的网址管用。。。

/**charts图*/    
function charts(id,url,ny,jgdmQL){
    $("#chart_"+id).html("");
    var str=checkValue(id);
    var startDate=$("#startYear").val()+$("#startMonth").val();
    var endDate=$("#endYear").val()+$("#endMonth").val();
    var myChart = echarts.init(document.getElementById("chart_"+id));
    myChart.showLoading({text:"图表数据正在努力加载..."});
    $.post(url,{"str":str,"startDate":startDate,"endDate":endDate,"ny":ny,"jgdmQL":jgdmQL},function(result){
        var tuLi=eval("("+result.tuLi+")");
        var moRen=eval("("+result.moRen+")");
        var nm=eval("("+result.nm+")");
        var da=eval("("+result.chart+")");
        var option = {
                tooltip: {
                    trigger: 'axis'
                },
                toolbox:{
                    show:true,
                    feature:{
                        saveAsImage:{
                            show:true
                        },
                        dataView:{
                            show:true,
                            readOnly:false
                        },
                        restore:{
                            show:true
                        },
                        magicType:{
                            show:true,
                            type:["line","bar"]
                        }
                    }
                },
                legend: {
                    data:tuLi,//动态图例
                    selected:moRen//初始图例是否显示
                },
                grid:{
                      y:165
                  },
                xAxis: [
                    {
                        type: 'category',
                        axisLabel:{
                            interval:0,
                            rotate:20
                        },
                        data: nm//后台查询字段对象                                
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '金额/万元',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '增幅/%',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                ],
                series: da//数据
        };
        myChart.setOption(option);        
        myChart.hideLoading();
    },"json")
}    

2.桑基图。这个图就有点麻烦，其描述的是，从初始状态至最终形态的变化过程。

name是节点，links是变化过程。

{ target: '张店',source: '淄_博_增_长_比_%',value:10}：表示：张店有10变为了淄_博_增_长_比_%

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    
  <%@include file="../public.jsp"%>
  
      
  
  
  
    

  

转载于:https://www.cnblogs.com/AnswerTheQuestion/p/7340575.html