将echart的官方实例关系图发布到Web工程上

1、准备工作

      下载三个js文件和一个数据文件,js文件分别为jquery.js、echarts.js、dataTool.js,数据文件为les-miserables.gexf;

     注意:官网里可以找到前两个js文件,第三个js和数据文件不好找,为节省大家时间,在此提供我的js和数据文件:

     百度网盘链 接:https://pan.baidu.com/s/1i5adq7N 密码: jje6


2、将echart文件变成jsp文件(代码分段解析)


      1)写上jsp的开头代码(编码格式、路径、网页大小等)

              <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
           <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
           <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>  
           <%
           String path = request.getContextPath();
           String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
           %>
          <!DOCTYPE html>
          <html style="height: 100%" lang="zh">


    2)在网页的〈head〉中加载所需的js文件(路径非常重要,建议放在系统的js文件下,最好采用绝对路径,以免出错)

         <head>
       <meta charset="utf-8">
       <title>ECharts关系图</title>
    
       <!-- 引入 echarts.js -->
       <script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/echart/jquery.js"></script> 
       <script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/echart/echarts.js"></script>
       <script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/echart/dataTool.js"></script>

       </head>


    3)在网页的〈body〉中 为echarts  准备一个具有高和宽的容器dom并初始化

          <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript">
       // 基于准备好的dom,初始化echarts实例
       var dom = document.getElementById("container");
       var myChart = echarts.init(dom);
       var app = {};
       option = null;


  4)添加echarts关系图代码

         myChart.showLoading();

       //加载数据及其处理函数
       $.get('${pageContext.request.contextPath }/assets/data/les-miserables.gexf', function (xml) {     

      //数据路径太重要,必须正确,为避免错误,建议采用绝对路径(如上)
      myChart.hideLoading();//关闭loading

      var graph = echarts.dataTool.gexf.parse(xml);
      var categories = [];                    
          for (var i = 0; i < 9; i++) {         
             categories[i] = {
                 name: '类目' + i                     
             };
         }
         graph.nodes.forEach(function (node) {     
             node.itemStyle = null;
             node.value = node.symbolSize;
             node.symbolSize /= 1.5;
             node.label = {
                 normal: {
                     show: node.symbolSize > 30
                 }
             };
             node.category = node.attributes.modularity_class;
         });
         option = {
             title: {
                 text: 'Les Miserables',
                 subtext: 'Default layout',
                 top: 'bottom',
                 left: 'right'
             },
             tooltip: {},
             legend: [{
                 // selectedMode: 'single',
                 data: categories.map(function (a) {
                     return a.name;
                 })
             }],
             animationDuration: 1500,
             animationEasingUpdate: 'quinticInOut',
             series : [
                 {
                     name: 'Les Miserables',
                     type: 'graph',
                     layout: 'none',        
                     data: graph.nodes,
                     links: graph.links,
                     categories: categories,
                     roam: true,
                     label: {
                         normal: {
                             position: 'right',
                             formatter: '{b}'    
                         }
                     },
                     lineStyle: {
                         normal: {
                             color: 'source',
                             curveness: 0.3    
                         }
                     }
                 }
             ]
         };


         myChart.setOption(option);  
     }, 'xml');


   5)写上jsp的尾代码(保证也页面代码的完整性)

       </script>
     </body>
     </html>


3、ssm框架下编写controller文件

        详见本人另一篇博客:http://blog.csdn.net/qq_37321253/article/details/76512241

      

     


          

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值