文档章节

关系树族谱echarts +php

t
 tystys
发布于 2017/02/16 11:07
字数 593
阅读 33
收藏 0
点赞 0
评论 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

百度Echarts图表在Vue项目的完整引入以及按需加载

导语 近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择。项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了。亲自动手实践了下,整理总结,希望对小伙伴提供...

JustBeCoder ⋅ 06/15 ⋅ 0

Echarts视频教程从入门到实战

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

放风筝好不 ⋅ 04/16 ⋅ 0

Echarts-百度地图省分着色

通过Echarts3结合百度地图,对全国省分进行着色。 起因 由于Echarts3中,不再使用china.js文件: ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目...

莫显辉 ⋅ 05/04 ⋅ 0

Vue教程(五)在vue项目中使用echarts

1安装Echart cnpm install echarts --save 2项目页面引用Echart import echarts from 'echarts' 3启动项目 npm run dev...

凌雲木 ⋅ 04/20 ⋅ 0

vue之将echart封装为组件

最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用。本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将...

四小七 ⋅ 05/21 ⋅ 0

ECharts 4.1.0.rc2 发布, 基于 JS 的开源可视化库

ECharts 4.1.0.rc2 发布,ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层...

雨田桑 ⋅ 05/03 ⋅ 0

ECharts 4.1.0.rc1 发布,基于 JS 的开源可视化库

ECharts 4.1.0.rc1 发布,带来一些性能提升和 bug 修复。 更新内容包括: 在大量数据(200K)的情况下启用烛状和条形图渲染并缩放 为树形图添加缩放和拖动交互 在折线图中,使用类别轴时增强...

雨田桑 ⋅ 04/29 ⋅ 0

ssh结合echarts做图表展示

在日常的开发中,我们常常需要使用图表对数据进行展示,在这里作者使用百度的开源图表echarts动态的展示数据。 看过echarts的API都知道,要想使用某种类型的图表展示数据,必须封装好一个JSO...

_Artisan ⋅ 06/04 ⋅ 0

echarts3.0在IE9中,bar图在使用datazoom时,数据显示不完全的问题

我在swt控件中调用browser,然后用echarts来展现我的数据,IE是IE9,柱状图设置了dataZoom,但是当我拖动dataZoom滑竿时,展现的数据没有全部展现出来,只有当dataZoom覆盖全部时,数据才全部...

kmust123 ⋅ 04/26 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

开启远程SSH

SSH默认没有开启账号密码登陆,需要再配置表中修改: vim /etc/ssh/sshd_configPermitRootLogin yes #是否可以使用root账户登陆PasswordAuthentication yes #是都开启密码登陆ser...

Kefy ⋅ 29分钟前 ⋅ 0

Zookeeper3.4.11+Hadoop2.7.6+Hbase2.0.0搭建分布式集群

有段时间没更新博客了,趁着最近有点时间,来完成之前关于集群部署方面的知识。今天主要讲一讲Zookeeper+Hadoop+Hbase分布式集群的搭建,在我前几篇的集群搭建的博客中已经分别讲过了Zookeep...

海岸线的曙光 ⋅ 36分钟前 ⋅ 0

js保留两位小数方法总结

本文是小编针对js保留两位小数这个大家经常遇到的经典问题整理了在各种情况下的函数写法以及遇到问题的分析,以下是全部内容: 一、我们首先从经典的“四舍五入”算法讲起 1、四舍五入的情况...

孟飞阳 ⋅ 54分钟前 ⋅ 0

python log

python log 处理方式 log_demo.py: 日志代码。 #! /usr/bin/env python# -*- coding: utf-8 -*-# __author__ = "Q1mi""""logging配置"""import osimport logging.config# 定义三种......

inidcard ⋅ 今天 ⋅ 0

mysql 中的信息数据库以及 shell 查询 sql

Information_schema 是 MySQL 自带的信息数据库,里面的“表”保存着服务器当前的实时信息。它提供了访问数据库元数据的方式。 什么是元数据呢?元数据是关于数据的数据,如数据库名或表名,...

blackfoxya ⋅ 今天 ⋅ 0

maven配置阿里云镜像享受飞的感觉

1.在maven目录下的conf/setting.xml中找到mirrors添加如下内容,对所有使用改maven打包的项目生效。 <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.al......

kalnkaya ⋅ 今天 ⋅ 0

centos7下创建新用户并授权

1、创建新用户 创建一个用户名为:test adduser test 创建初始密码: passwd test 2、授予root权限 个人用户的权限只可以在/home/test下有完整权限,其他目录要看别人授权。而经常需要roo...

xixingzhe ⋅ 今天 ⋅ 0

求助:TiledMap如何旋转对象呢?

比如我要旋转一个梯子的角度,单纯在TiledMap旋转角度好像没有效果。那是要用代码来控制角度,还是说只能通过导入相对应的斜的图片才可以呢?

花谢自相惜 ⋅ 今天 ⋅ 0

Micronaut 之HelloWorld!

小试一下Micronaut,按照官方文档跑了一下helloworld 第一步克隆,按照官方文档是: git clone git@github.com:micronaut-projects/micronaut-core.git 结果怎么是这样?? 换个方法吧 git ...

桂哥 ⋅ 今天 ⋅ 0

pom文件

Aeroever ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部