ECharts使用例子

<script type="text/javascript">
        $(function(){
            $("#product0").myScroll({
                visible:7,
            scroll:7,
            speed:1000
            });
        })    
    
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths:{
             echarts:'JS/echarts',
            'echarts/chart/bar' : 'JS/echarts-map',
            'echarts/chart/line': 'JS/echarts-map',
            'echarts/chart/map' : 'JS/echarts-map'
                 
        }
    });


    

var constMaxRadius = 15;
var constMinRadius = 1;



function getNLs(option1,option2,option3,option4){
  require(
                [
                    'echarts',
                    'echarts/chart/bar',
                    'echarts/chart/line',
                    'echarts/chart/map'
                ],
function(ec) {
    //加载溯源数据
    $.post("getResultTrace",{time:Math.random(),sinaTaskId:'${sinaTaskId}'},function(data){
            //--- 加载动态数据 ---
          var myChart = ec.init(document.getElementById('middle'));
              $.each(data.list,function(i,v){
                  if(v.pid==null||v.pid==''||v.pid==0){
                        option1.series[0].nodes.push({name:v.name,value:15,id:v.id,depth:0,category:1});
                    }else{
                         option1.series[0].nodes.push({name:v.name,value:15,id:v.id,depth:1,category:0});
                         option1.series[0].links.push({source:v.parentIndex,target:v.sinaIndex,weight:1});
                        
                    }
              });
              /**
              $.each(data.list,function(i,v){
                  if(v.pid != null && v.pid != 0 ){
                  option1.series[0].links.push({source:v.parentIndex,target:v.sinaIndex,weight:1});
                  }
              });
              */
      
          myChart.setOption(option1);                                        
    },"json");
    //加载转发量时间分布数据
    $.post("getTimeCountTrace",{time:Math.random(),sinaTaskId:'${sinaTaskId}'},function(data){
           //--- 加载动态数据 ---
        var timeChart = ec.init(document.getElementById('time_right'));
          $.each(data.list,function(i,v){
                     option2.xAxis[0].data.push(v.count_date);
                     option2.series[0].data.push(v.count);                    
          });
     
        timeChart.setOption(option2);
    },"json");
    
    //加载转发的详细信息（男女，大V,直接转发（未评论）,单次转发（同一个原创只转发一次））
    $.post("getPieCountTrace",{time:Math.random(),sinaTaskId:'${sinaTaskId}'},function(data){
    
        var detailChart = ec.init(document.getElementById('detail'));
        var male = Math.round((data.maleNum/data.allNum)*100);
        var vip = Math.round((data.vipNum/data.allNum)*100);
        var direct = Math.round((data.directNum/data.allNum)*100);
        var single = Math.round((data.singleNum/data.allNum)*100);
        option3.series[0].data.push( {name:'男士', value:male, itemStyle : labelBottom},  {name:'女士比例', value:100-male,itemStyle : labelTop});
        option3.series[1].data.push( {name:'其他', value:100-vip, itemStyle : labelBottom},  {name:'V', value:vip,itemStyle : labelTop});
        option3.series[2].data.push( {name:'其他', value:100-direct, itemStyle : labelBottom},  {name:'直接转发', value:direct,itemStyle : labelTop});
        option3.series[3].data.push( {name:'其他', value:100-single, itemStyle : labelBottom},  {name:'单次转发', value:single,itemStyle : labelTop});
        detailChart.setOption(option3);
    },"json");
    
    //加载转发量地域分布
    $.post("getProvinceReportsCountTrace",{time:Math.random(),sinaTaskId:'${sinaTaskId}'},function(data){
    
        var chainMapChart = ec.init(document.getElementById('china_map'));
         $.each(data.list,function(i,v){
             option4.series[0].data.push({name: v.provinceName,value: v.repostsCount});
         });
         option4.dataRange.max=data.max;
        chainMapChart.setOption(option4);
    },"json");
});

}


//溯源转发图
 var    traceOption = {
    title : {
        text: '溯源',
        subtext: '数据来自新浪微博',
        x:'right',
        y:'bottom'
    },
    tooltip : {
        trigger: 'item',
        formatter: '{a} : {b}'
    },
     toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : false,
            restore : true,
            saveAsImage : true
        }
    },
    legend: {
        x: 'left',
        data:['源作者','作者']
    },
    series : [
        {
            type:'force',
            name : "Force tree",
            categories : [
                {
                    name: '作者',
                    itemStyle: {
                        normal: {
                            color : '#ff7f50'
                        }
                    }
                },
                {
                    name: '源作者',
                    itemStyle: {
                        normal: {
                            color : '#46B024'
                        }
                    }
                }
            ],
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        position:'outer',
                        textStyle: {
                            color: '#502000',
                            fontSize:12
                        }
                    },
                    nodeStyle : {
                        brushType : 'both',
                        strokeColor : 'rgba(255,215,0,0.6)',
                        lineWidth : 1
                    }
                },
                emphasis: {
                    label: {
                        show: false
                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                    },
                    nodeStyle : {
                        r: 20
                    },
                    linkStyle : {}
                }
            },
            minRadius : constMinRadius,
            maxRadius : constMaxRadius,
            density : 5,
            attractiveness: 1.2,
            nodes : [],
            links : []
        }
    ]
};



//时间分布
var timeOption = {
    title : {
        text: '转发量时间走势',
        subtext: '数据来自新浪微博'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['转发量']
    },

        toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : true,
            dataView : {readOnly: false},
            magicType:['line', 'bar'],
            restore : true,
            saveAsImage : true
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : []
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: ''
            },
            splitArea : {show : true}
        }
    ],
    series : [
        {
            name:'转发量',
            type:'line',
            itemStyle: {
                normal: {
                    lineStyle: {
                        shadowColor : 'rgba(0,0,0,0.4)'
                    }
                }
            },
            data:[]
        }
    ]
};
//  详细数据
var labelTop = {
    normal : {
        label : {
            show : true,
            position : 'center',
            textStyle: {
                baseline : 'bottom'
            }
        },
        labelLine : {
            show : false
        }
    }
};
var labelBottom = {
    normal : {
        color: '#ccc',
        label : {
            show : true,
            position : 'center',
            formatter : function(a,b,c){return 100 - c + '%'},
            textStyle: {
                baseline : 'top'
            }
        },
        labelLine : {
            show : false
        }
    },
    emphasis: {
        color: 'rgba(0,0,0,0)'
    }
};
var radius = [70, 90];
detailOption = {
    legend: {
        x : 'center',
        y : 'center',
        data:[
            '女士比例','V','直接转发','单次转发'
        ]
    },
    title : {
        text: '转发详细信息',
        subtext: '数据来自新浪微博',
        x: 'center'
    },
    toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            dataView : {readOnly: false},
             mark : true,
            restore : true,
            saveAsImage : true
        }
    },
    series : [
        {
            type : 'pie',
            center : ['25%', '30%'],
            radius : radius,
            data : []
        },
        {
            type : 'pie',
            center : ['75%', '30%'],
            radius : radius,
            data : []
        },
        {
            type : 'pie',
            center : ['25%', '75%'],
            radius : radius,
            data : []
        },
        {
            type : 'pie',
            center : ['75%', '75%'],
            radius : radius,
            data : []
        }
       
    ]
};


provinceOption = {
    title : {
        text: '转发分布',
        subtext: '数据来自新浪微博',
        x:'center'
    },
    tooltip : {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        x:'left',
        data:['转发量']
    },
      dataRange: {
        min: 0,
        max: 2500,
        text:['高','低'],           // 文本，默认为数值文本
         color:['#0D93FC','#B2DEFF'],
        calculable : true,
        textStyle: {
            color: 'black'
        }
    },

    toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : true,
            dataView : {readOnly: false},
            restore : true,
            saveAsImage : true
        }
    },
    series : [
        {
            name: '转发量',
            type: 'map',
            mapType: 'china',
            itemStyle:{
                normal:{label:{show:true}},// for legend
                emphasis:{label:{show:true}}
            },
            data:[ ]
        }
    ]
};
                    



//调用接口

getNLs(traceOption,timeOption,detailOption,provinceOption);
            

    </script>

    </head>
 
 
  <body>
      <div class="main">
          <div class="top">
              <div class="top_left">
                  <div class="author_src">
                      <img class="header_image" src="${rootContent.sinaUser.profileImageUrl}" title="作者"  />
                      <p><a  href="${rootContent.blogUrl}"><img  class="sina_enter" src="<%=basePath%>pages/blogtrace/images/sinapic.png" /></a></p>
                  
                  <div class="author_info">
                      <div class="root_name">
                          <a href="http://weibo.com/u/${rootContent.sinaUser.id}">${rootContent.sinaUser.screenName}<c:if test="${rootContent.sinaUser.verified}"><img src="<%=basePath%>pages/blogtrace/images/icon_v.png"/></c:if></a>
                      </div>
                      <div> <c:if test="${rootContent.sinaUser.gender=='m'}"><img src="<%=basePath%>pages/blogtrace/images/icon_man.png"/></c:if>
                          <c:if test="${rootContent.sinaUser.gender=='f'}"><img src="<%=basePath%>pages/blogtrace/images/icon_woman.png"/></c:if> &nbsp;${rootContent.sinaUser.location}</div>
                      <div>关注:${rootContent.sinaUser.friendsCount}&nbsp;粉丝:${rootContent.sinaUser.followersCount}&nbsp;微博:${rootContent.sinaUser.statusesCount}</div>
                      <div class="root_description">简介:<br />${rootContent.sinaUser.description}</div>                                            
                  </div>
                  </div>
                  <div style="clear:both;"></div>
              </div>
              <div class="top_right">
                  <span class="img_right"><img style="vertical-align:middle;" title="look" border="1px" width="120px"  src="<c:if test="${rootContent.original_pic==null}"><%=basePath%>pages/blogtrace/images/logo.png</c:if>${rootContent.original_pic}"  title="look"  /></span>
                  <div class="text" >${rootContent.text}</div>
              </div>
              <div style="clear:both;"></div>
          </div>

          <div class="middle" id="middle">
              
          </div>
          
          <div class="key_user" style="text-align:center;">
              <div class="myScroll" id="product0">
        <!-- <p class="myPrevBtn">前进</p>
            <p class="myNextBtn">后退</p>  -->    
            <a id="userListPrev" class="myPrevBtn" href="javascript:void(0);"></a>
            <div class="myBlock">
            <ul id="ulUserList">
            <c:forEach items="${keyUsers}" var="key">
                  <li>
                     <div class="ulist_licontent">
                        <div class="ullist_img"><a href="javascript:void(0)"><img src="${key.sinaUser.profileImageUrl}" alt="${key.sinaUser.screenName}"/></a></div>
                        <div class="ulist_title"><a href="http://weibo.com/u/${key.sinaUser.id}">${key.sinaUser.screenName}<c:if test="${key.sinaUser.verified}"><img src="<%=basePath%>pages/blogtrace/images/icon_v.png"/></c:if></a></div>
                        <div class="ullist_count">被转发:${key.reposts_count}次</div>
                      </div>
                      
                  </li>    
             </c:forEach>        
            </ul>
            </div>
            <a id="userListNext" class="myNextBtn" href="javascript:void(0);"></a>
            <div style="clear:both;"></div>
            </div>
              
          </div>
          <div id="time_count" class="time_count">
              <div class='time_left'></div>
              <div class="time_right" id="time_right"></div>
          </div>
          <div class="detail" id = "detail">
          
          </div>
          <div class="china_map" id="china_map">
          </div>
          
          <div class="tc" style="display: none;" id="box10">
          
          </div>
      </div>
  </body>
</html>