文档章节

关系树族谱echarts +php

t
 tystys
发布于 2017/02/16 11:07
字数 593
阅读 38
收藏 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
前端知识 | 浅谈在React中使用echarts

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

海说软件
06/26
0
0
NEV与其他图表引擎的横向对比

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

wangyiyungw
05/14
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

没有更多内容

加载失败,请刷新页面

加载更多

Spring MVC 通过@Value注解读取.properties配置内容

第一步: 在applicationContext.xml配置: <bean id="configProperties" class="org.springframework.beans.factory.config.PropertiesFactoryBean"> <property name="locations">......

wangyanbao
14分钟前
1
0
Rancher 2.1全面发布,优化Kubernetes集群运维

GitLab支持、CICD优化、项目配额管理、驱散容器功能等等,Rancher 2.1给你带来一大票惊喜新功能!还有备着【千元大奖】的用户体验计划等你来参与! Rancher 2.1已于近日全面发布! Rancher ...

RancherLabs
21分钟前
2
0
如何优雅的给淘客/京东及拼多多的代理(会员)发工资(佣金)

前段时间有一些做淘客和京东推广的朋友问我能不能开发一个代付系统,这样他们可以用来给代理和网站会员发工资,他们现在还是用的人工手动打款,不仅效率慢,而且还容易出错,我一想,嗯,不难...

千龍
26分钟前
2
0
try-catch-finally

try-catch-finally 一.执行顺序 try-catch-finally 包含的代码块,当 try 里面的代码出现异常的时候,会进入 catch 中,finally 代码块则在最后被执行,即 无论是否出现异常,finally 里面的...

tsmyk0715
31分钟前
2
0
【编程架构实战】——Java并发包基石-AQS详解

目录 1 基本实现原理 1.1 如何使用 1.2 设计思想 2 自定义同步器 2.1 同步器代码实现 2.2 同步器代码测试 3 源码分析 3.1 Node结点 3.2 独占式 3.3 共享式 4 总结   Java并发包(JUC)中提...

java知识分子
32分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部