码迷,mamicode.com
首页 > 其他好文 > 详细

Echarts图表

时间:2017-08-10 19:39:47      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:tip   字段   context   item   ado   odi   src   gets   tle   

近期做报表时用到了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+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>桑基图</title>
  <%@include file="../public.jsp"%>
  <script type="text/javascript" src="../../js/charts/charts.common.extend.js"></script>
  <script type="text/javascript">
  function format(v){  // 格式化矩形框内显示的文字,如需要换行矩形框内的数据name节点需要添加下滑线_,如桑_基_图,这种格式的文字才可以垂直显示
         var name = v.name;
         if(name.indexOf(‘_‘) > -1){
            var str = ‘‘;
            var strArr = name.split(‘_‘);
            for (var i = 0; i < strArr.length;i++) {
               str += strArr[i] + ‘\n‘;
            }
            return str;
         }
    }

    function toolTipformat(v){ // 转化工具提示栏中的文字,默认写法无需修改
        alert(v);
         var name = v.name;
        if(name.indexOf(‘_‘) > -1){
           var str = ‘‘;
           var strArr = name.split(‘_‘);
           for (var i = 0; i < strArr.length;i++) {
              str += strArr[i];
           }
           return str;
        }else{
            return v.name;
        }
    }
          $(function(){
              var option = {
                     title: {
                       text: ‘‘
                },
                tooltip: {
                     trigger: ‘item‘,
                     triggerOn: ‘mousemove‘
                 },
                 series: [
                        {
                        type: ‘sankey‘,
                        width:‘40%‘,
                        nodeWidth:50,
                        data:[{
                            name:‘淄_博_收_入_额‘,
                            value:0,
                            label:{//该矩形节点中文本标签的样式
                                 normal:{//常规样式
                                    textStyle:{fontSize:16,color:‘black‘,fontWeight:‘bold‘}
                                }/*,
                               emphasis:{//着重突出的样式                      
                                    textStyle:{
                                       fontSize:16,
                                       color:‘black‘,
                                        fontWeight:‘bold‘
                                    }
                               }*/
                         },
                         itemStyle:{//矩形节点的样式
                             normal:{shadowColor:‘#FF9900‘,color:‘#FF9900‘}
                         }
                        },
                      {name: ‘张店‘,value: 10,label:{normal:{position: ‘insideRight‘}}}, 
                      {name: ‘临淄‘,value: 20,label:{normal:{position: ‘insideRight‘}}},
                      {name: ‘博山‘, value: 20,label:{normal:{position: ‘insideRight‘}}}, 
                      {name: ‘周村‘,value: 10,label:{normal:{position: ‘insideRight‘}}}],
                        links:[{ source: ‘张店‘,target: ‘淄_博_收_入_额‘,value:10}, {source: ‘临淄‘,target: ‘淄_博_收_入_额‘,value:20},
                             { source: ‘博山‘, target: ‘淄_博_收_入_额‘,value:20}, {source: ‘周村‘,target: ‘淄_博_收_入_额‘,value:10}],
              label:{//描述每个矩形节点中文本的样式
                       normal:{
                          position: ‘inside‘,//在矩形节点内部
                          formatter:function(v){
                            return format(v)
                        }
                     }
                      
                },
            itemStyle: {//描述每个矩形节点的样式
                normal: {//常规的
                    opacity: 0.6,
                    color:‘#FFFF00‘,
                    borderWidth: 0,
                    shadowColor:‘#FFFF00‘
                }
            },
            lineStyle: {//矩形节点之间连线的样式
                normal: {
                    opacity:0.6,
                    color:‘#FFFF00‘,
                    shadowColor:‘#FFFF00‘
                }
            },
            tooltip:{//本系列特定的提示信息
               formatter:function(v){
                            return toolTipformat(v);
                        }
                }
            },
            {
                  type: ‘sankey‘,
                  width:‘40%‘,
                  left:‘46%‘,
                  nodeWidth:50,
                  data:[{
                      name:‘淄_博_增_长_比_%‘,
                      value:0,
                      label:{//该矩形节点中文本标签的样式
                           normal:{//常规样式
                              textStyle:{fontSize:16,color:‘black‘,fontWeight:‘bold‘}
                          }/*,
                         emphasis:{//着重突出的样式                      
                              textStyle:{
                                 fontSize:16,
                                 color:‘black‘,
                                  fontWeight:‘bold‘
                              }
                         }*/
                   },
                   itemStyle:{//矩形节点的样式
                       normal:{shadowColor:‘#009900‘,color:‘#009900‘}
                   }
                  },
                {name: ‘张店‘,value: 10,label:{normal:{position: ‘insideLeft‘}}}, 
                {name: ‘临淄‘,value: 20,label:{normal:{position: ‘insideLeft‘}}},
                {name: ‘博山‘, value: 20,label:{normal:{position: ‘insideLeft‘}}}, 
                {name: ‘周村‘,value: 10,label:{normal:{position: ‘insideLeft‘}}}],
                  links:[{ target: ‘张店‘,source: ‘淄_博_增_长_比_%‘,value:10}, {target: ‘临淄‘,source: ‘淄_博_增_长_比_%‘,value:20},
                       { target: ‘博山‘, source: ‘淄_博_增_长_比_%‘,value:20}, {target: ‘周村‘,source: ‘淄_博_增_长_比_%‘,value:10}],
        label:{//描述每个矩形节点中文本的样式
                 normal:{
                    position: ‘inside‘,//在矩形节点内部
                    formatter:function(v){
                      return format(v)
                  }
               }
                
          },
      itemStyle: {//描述每个矩形节点的样式
          normal: {//常规的
              opacity: 0.6,
              color:‘#00FF00‘,
              borderWidth: 0,
              shadowColor:‘#00FF00‘
          }
      },
      lineStyle: {//矩形节点之间连线的样式
          normal: {
              opacity:0.6,
              color:‘#00FF00‘,
              shadowColor:‘#00FF00‘
          }
      },
      tooltip:{//本系列特定的提示信息
         formatter:function(v){
                      return toolTipformat(v);
                  }
          }
      }
                ]
           };
              var myChart = echarts.init(document.getElementById("aa"));
            myChart.setOption(option);    
          })
  </script>    
  
  </head>
  <body>
    <div id="aa" style="width: 100%;height: 100%"></div>
  </body>
</html>

Echarts图表

标签:tip   字段   context   item   ado   odi   src   gets   tle   

原文地址:http://www.cnblogs.com/AnswerTheQuestion/p/7340575.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!