关系树族谱echarts +php
博客专区 > tystys 的博客 > 博客详情
关系树族谱echarts +php
tystys 发表于10个月前
关系树族谱echarts +php
  • 发表于 10个月前
  • 阅读 29
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

前台页面

<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);              
    }

 

共有 人打赏支持
粉丝 3
博文 72
码字总数 82272
×
tystys
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: