文档章节

关系树族谱echarts +php

t
 tystys
发布于 2017/02/16 11:07
字数 593
阅读 35
收藏 0

前台页面

<script src="http://echarts.baidu.com/build/dist/echarts.js">
    </script>
   <script type="text/javascript" src="__JS__/jquery-2.1.3.min.js">

</script>

<div class="relationTree" style="background: #e6e6e6;height:1000px">
             <div id="main" style="height:800px;"></div>
        </div>

<script>

/*关系树*/ 

        // 路径配置
    require.config({
      paths: {
        echarts: 'http://echarts.baidu.com/build/dist'
      }
    });

// 使用
require(
    [
      'echarts',
      'echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载
      'echarts/chart/force',
      'echarts/chart/tree'
    ],
    function (ec) {
      // 基于准备好的dom,初始化echarts图表
      var myChart = ec.init(document.getElementById('main'));
     //图表显示提示信息
 
        myChart.showLoading({ 
        text: "站点关系图正在努力加载..."
        });
        myChart.hideLoading();
      var option = {
    title : {
        text: '手机品牌',
        subtext: '线、节点样式'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{b}: {c}"
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : false,

    series : []
};
      var ecConfig = require('echarts/config');
      
       $.ajax({    
                   url: "/test/html_css/ajax/index/display_data",   
                               
                    type:'POST',
                   // data:"{}",
                    dataType:'json',                
                    success: function(result){
                    //alert(data); 
                    //option.series[0].data = data.data; 
                    //option.series[0].data.children.data= data.data; 
                    //alert(data.data); 
                     
                    //myChart.setOption(option);                    
                     myChart.setOption({ 
                                        series: [
                                                    {
                                                        name:'树图',
            type:'tree',
            orient: 'horizontal',  // vertical horizontal
            rootLocation: {x: 100, y: '60%'}, // 根节点位置  {x: 'center',y: 10}
            nodePadding: 20,
            symbol: 'circle',
            symbolSize: 40,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'inside',
                        textStyle: {
                            color: '#cc9999',
                            fontSize: 15,
                            fontWeight:  'bolder'
                        }
                    },
                    lineStyle: {
                        color: '#000',
                        width: 1,
                        type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            data:[
                                                            {
                                                                name: '手机',
                                                                value: 6,
                                                                 
                             symbol: 'image://http://www.iconpng.com/png/ecommerce-business/iphone.png',
                                                                 
                                                                children: result.data
                                                            }
                                                        ]
                                                    }
                                        ]
                        });
                  },            
 
                  error: function(){
 
                  }
                  
        });  
                //$("#formImg").submit();
                // 异步加载数据
<!-- $.get('/test/html_css/ajax/index/display_data').done(function (data) { -->
    <!-- // 填入数据 -->
    <!-- myChart.setOption({ -->
         <!-- series: [{ -->
            <!-- // 根据名字对应到相应的系列 -->
            <!-- name: '树图', -->
            <!-- data: data.data -->
        <!-- }] -->
    <!-- }); -->
<!-- }); -->
    
    });
</script>

注释

result.data数据源查看

{"data":[{"name":"\u7528\u62371","value":"23","symbol":"'circle'","children":[{"name":"\u7528\u62371","value":"23","symbol":"'circle'"},{"name":"\u7528\u62372","value":"22","symbol":"'circle'"},{"name":"\u7528\u62373","value":"21","symbol":"'circle'"},{"name":"\u7528\u62374","value":"2","symbol":"'circle'"}]},{"name":"\u7528\u62372","value":"22","symbol":"'circle'"},{"name":"\u7528\u62373","value":"21","symbol":"'circle'","children":[{"name":"\u7528\u62371","value":"23","symbol":"'circle'","children":[{"name":"\u7528\u62371","value":"23","symbol":"'circle'"},{"name":"\u7528\u62372","value":"22","symbol":"'circle'"},{"name":"\u7528\u62373","value":"21","symbol":"'circle'"},{"name":"\u7528\u62374","value":"2","symbol":"'circle'"}]},{"name":"\u7528\u62372","value":"22","symbol":"'circle'"},{"name":"\u7528\u62373","value":"21","symbol":"'circle'"},{"name":"\u7528\u62374","value":"2","symbol":"'circle'"}]},{"name":"\u7528\u62374","value":"2","symbol":"'circle'"}]}

数据库

--
-- 表的结构 `his_zupu`
--

CREATE TABLE IF NOT EXISTS `his_zupu` (
  `symbol` varchar(220) NOT NULL DEFAULT '''image://http://pic.58pic.com/58pic/12/36/51/66d58PICMUV.jpg''',
  `id` smallint(12) NOT NULL AUTO_INCREMENT,
  `name` varchar(12) NOT NULL,
  `value` varchar(12) NOT NULL DEFAULT '2',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

--
-- 转存表中的数据 `his_zupu`
--

INSERT INTO `his_zupu` (`symbol`, `id`, `name`, `value`) VALUES
('''circle''', 1, '用户1', '23'),
('''circle''', 2, '用户2', '22'),
('''circle''', 3, '用户3', '21'),
('''circle''', 4, '用户4', '2');

 

php后台代码

//族谱数据
    public function display_data() {
            $arr=array();
            //$arr['nodes']=D('nodes')->select();
            $arr['data']=D('zupu')->field('name,value,symbol')->select();
            $arr['data'][0]['children']=$arr['data'];
            $arr['data'][2]['children']=$arr['data'];
            //echo'<pre>';
            //var_dump($arr['data']);
            echo  json_encode($arr);              
    }

 

© 著作权归作者所有

共有 人打赏支持
t
粉丝 2
博文 72
码字总数 82272
作品 0
NEV与其他图表引擎的横向对比

本文由 网易云 发布 作者:刘阳 本篇文章仅限内部分享,如需转载,请联系网易获取授权。 NEV与其他图表引擎的横向对比 对比的其他图表库包括vega、HighCharts、 ECharts以及G2 图表类型 柱状...

wangyiyungw
05/14
0
0
前端知识 | 浅谈在React中使用echarts

方法一: echarts-for-react 是一个非常简单的针对于 React 的 Echarts 封装插件。 和使用所有其他插件一样,首先,我们需要 install 它: 第一步: npminstall --save echarts(依赖) npmi...

海说软件
06/26
0
0
Echarts-地图扩展-标准geoJson格式扩展地图-例子

本人菜鸟一枚,最近搞echarts地图。看到官方给的“标准geoJson格式扩展地图-全国主要城市”的例子,瞬间就蒙逼了。(http://echarts.baidu.com/echarts2/doc/example/map20.html ,2016年8月...

夜辰
2015/07/17
0
13
Echarts视频教程从入门到实战

Echarts视频教程从入门到实战 网盘地址:https://pan.baidu.com/s/1p-G9UbKmXFtnuJEdiLSw2w 密码:0e9u 备用地址(腾讯微云):https://share.weiyun.com/5sKBF8E 密码:4ms8rp 有这样一款制...

放风筝好不
04/16
0
0
Echarts使用心得总结(二)

Echarts使用心得总结(二) 前言: 前一段时间一直都挺忙的,各种事,也没来得及每周的总结,趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下,趁着周末跟大家分享一...

双月通天
2014/07/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Nginx防盗链、访问控制、Nginx解析PHP相关配置、Nginx代理

Nginx防盗链 在配置文件里写入以下内容: 用curl测试 访问控制 Nginx限制某些IP不能访问或者只允许某些IP访问。 配置文件写入如下内容: allow 表示允许访问的IP,deny限制访问的IP。 匹配正...

黄昏残影
8分钟前
0
0
自己动手实现RPC服务调用框架

转载 TCP的RPC 引言 本文利用java自带的socket编程实现了一个简单的rpc调用框架,由两个工程组成分别名为battercake-provider(服务提供者)、battercake-consumer(服务调用者)。 设计思路...

雨中漫步的鱼
11分钟前
0
0
Centos6.x安装之后的9件事

Centos6.x安装之后的9件事 这些不是必须都做的,只不过是我个人的习惯,在此记录一下。 1.修改yum源到国内 CentOS系统更换软件安装源 备份你的原镜像文件,以免出错后可以恢复。 mv /etc/yu...

叶云轩
16分钟前
5
0
springboot2 使用jsp NoHandlerFoundException

开发图片上传功能,为验证测试功能是否正常,使用JSP编写表单提交进行测试 开发完成后,请求API提示如下异常: No mapping found for HTTP request with URI [/WEB-INF/jsp/avatar_upload.j...

showlike
22分钟前
0
0
springboot踩坑记--springboot正常启动但访问404

一 spring boot的启动类不能直接放在main(src.java.main)这个包下面,把它放在有包的里面就可以了。 二 正常启动了,但是我写了一个controller ,用的@RestController 注解去配置的controlle...

onedotdot
23分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部