使用Echarts呈现天善用户的关系图
原文发表于
前一个博客：""提到了怎么获取天善用户的关系数据，但没有说如何更好呈现关系图，这次介绍一下使用Echarts的实现。
1.获取人员及其关系的基本数据
如何获取见上一个博客
a.用户的基本信息示例
b.用户之间的关联示例
2.使用Echarts呈现关系图
数据拿到了，就需要考虑如何呈现用户之间的关系了。
而Echart有关系图提供，就考虑使用这个了。
具体看Echarts的示例()
a. 准备工作
需要引入3个js文件
&&& &&span class="hljs-title"&script src="echarts.js"&&/&span class="hljs-title"&script&
&&& &&span class="hljs-title"&script src="jquery.js"&&/&span class="hljs-title"&script&
&&& &&span class="hljs-title"&script src="dataTool.js"&&/&span class="hljs-title"&script&&& &
其中2个从以下网址获取&&
b.前1000用户关系的示意图
里面有一位同学和新的朋友们都没联系了
c.实现原理
step 1: copy模板
&&span class="hljs-title"&html&
&&span class="hljs-title"&head&
&&& &&span class="hljs-title"&meta charset="utf-8"&
&&& &&span class="hljs-title"&title&ECharts&/&span class="hljs-title"&title&
&&& &&span class="hljs-title"&script src="echarts.js"&&/&span class="hljs-title"&script&
&&& &&span class="hljs-title"&script src="jquery.js"&&/&span class="hljs-title"&script&
&&& &&span class="hljs-title"&script src="dataTool.js"&&/&span class="hljs-title"&script&&& &
&/&span class="hljs-title"&head&
&&span class="hljs-title"&body&
&&& &&span class="hljs-title"&div id="main" style="width: 800height:500"&&/&span class="hljs-title"&div&
&&& &&span class="hljs-title"&script type="text/javascript"&
&&&&&&& // 基于准备好的dom，初始化echarts实例
&&&&&&& var myChart = echarts.init(document.getElementById('main'));
/////////////////////////////
//填写图形脚本
/////////////////////////////
&&& &/&span class="hljs-title"&script&
&/&span class="hljs-title"&body&
&/&span class="hljs-title"&html&
step 2: 填上具体的图形代码
按官方示例复制即可
step 3 修改数据
这个关系图gxef格式的数据，按格式修改即可。
d.gxef格式的数据简介
一种描述网络结构的语言,指定的节点和边的关系图,以及用户定义的属性。
具体可以到这个UTRL看
这次给出的只是一个简单示例，复杂还是需要工具生成。
先以实际的示例介绍一下基本内容：
attributes设置属性，node设置点，edge设置点的关系。
&&span class="hljs-title"&gexf xmlns:viz="http://www.gexf.net/1.1draft/viz" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.gephi.org/gexf/1.1draft" xmlns:ns0="xsi" version="1.1" ns0:schemaLocation="http://www.gephi.org/gexf/1.1draft http://gephi.org/gexf/1.1draft.xsd"&
& &&span class="hljs-title"&meta lastmodified="T02:13:40.776892"&
&&& &&span class="hljs-title"&creator&Gephi.org&/&span class="hljs-title"&creator&
&&& &&span class="hljs-title"&description&A userid network&/&span class="hljs-title"&description&
& &/&span class="hljs-title"&meta&
& &&span class="hljs-title"&graph defaultedgetype="directed" label="A Web network" mode="static"&
&&& &&span class="hljs-title"&attributes class="node" mode="static"&
&&&&& &&span class="hljs-title"&attribute id="dataclass" title="id category" type="integer"&&/&span class="hljs-title"&attribute&
&&&&& &&span class="hljs-title"&attribute id="datasize" title="id connect" type="integer"&&/&span class="hljs-title"&attribute&
&&& &/&span class="hljs-title"&attributes&
&&& &&span class="hljs-title"&nodes&
&&span class="hljs-title"&node id="1" label="梁勇"&&&span class="hljs-title"&attvalues&&&span class="hljs-title"&attvalue for="datasize" value="5914"/&&&span class="hljs-title"&attvalue for="dataclass" value="5"/&&/&span class="hljs-title"&attvalues&&/&span class="hljs-title"&node&
&&span class="hljs-title"&node id="2" label="子呆不呆"&&&span class="hljs-title"&attvalues&&&span class="hljs-title"&attvalue for="datasize" value="5686"/&&&span class="hljs-title"&attvalue for="dataclass" value="5"/&&/&span class="hljs-title"&attvalues&&/&span class="hljs-title"&node&
&&span class="hljs-title"&node id="3" label="冰咖啡"&&&span class="hljs-title"&attvalues&&&span class="hljs-title"&attvalue for="datasize" value="5622"/&&&span class="hljs-title"&attvalue for="dataclass" value="5"/&&/&span class="hljs-title"&attvalues&&/&span class="hljs-title"&node&
&& &/&span class="hljs-title"&nodes&
&&& &&span class="hljs-title"&edges&
&&span class="hljs-title"&edge id="1" source="1" target="2" weight="1"/&
&&span class="hljs-title"&edge id="2" source="2" target="3" weight="1"/&
&& &/&span class="hljs-title"&edges&
& &/&span class="hljs-title"&graph&
&/&span class="hljs-title"&gexf&
e.注意事项
用户数多了，关系图就画不出不来了，目前最多使用了2000个点，但是关系多一点没有问题。
f.下一步考虑
可以考虑使用Gephi生成，位置可以不要在动态计算了。
3.天善的前10个用户关系图示例：
示例页面见附件，注意由于安全性问题，不能应用本地的gxef，需要把这些放到http server上。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。所有回答(1)
&&&您需要以后才能回答，未注册用户请先。ECharts，缩写来自Enterprise Charts，商业级数据图表，基于【HTML5】Canvas （ZRender），纯Javascript图表库，是百度的一个开源的数据可视化工具，业界给予了很多赞誉，这里不多说，需要了解详情的同学参见官网。我简略看了下，最贴切的地方在于本地化支持，比如对于中国地图的支持。
名词解释 & &
是指一个完整的图表，如折线图，饼图等&基本&图表类型或由基本图表组合而成的&混搭&图表，可能包括坐标轴、图例等
直角坐标系中的一个坐标轴，坐标轴可分为类目轴和数值轴
直角坐标系中的横轴，通常并默认为类目轴
直角坐标系中的纵轴，通常并默认为数值轴
直角坐标系中除坐标轴外的绘图网格
图例，表述数据和图形的关联
值域选择，常用于展现地域数据时选择值域范围
数据区域缩放，常用于展现大数据时选择可视范围
辅助工具箱，辅助功能，如添加标线，框选缩放等
气泡提示框，常用于展现更详细的数据
时间轴，常用于展现同一组数据在时间维度上的多份数据
数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
折线图，堆积折线图，区域图，堆积区域图。
柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。
散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图
K线图，蜡烛图。常用于展现股票交易数据。
饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。
雷达图，填充雷达图。高维度数据展现的常用图表。
和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据
力导布局图。常用于展现复杂关系网络聚类布局。
地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。
引入Echarts的方式
echarts提供多种引入方式，请根据你的项目类型选择合适的方式：
1 模块化包引入&&&&&& 需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时文件的连
require.config({
packages:[{
name:'echarts',
location:'../js/echarts',
main:'echarts'
name:'zrender',
location:'../js/zrender',//zrender与echarts，在同一级目录,模块化包引入
main:'zrender'
首先下载Zrender到本地，和ECharts放在同一目录下。
&& 在echarts/doc/example/www文件中建立一个HTML文件，所使用的js文件都包含在js文件中。 && 包含echarts.js、echarts-map.js、esl.js三个，其实只用到两个，echarts-map.js并不用。
2&模块化单文件引入（推荐）&&&&& 如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发，这种方式只是我们预先帮你把常用图表组合连接合并在一起，你只需一个符合AMD规范的加载器，同时引入一个echarts相关js即可。如你所发现的，build文件夹下已经生成了不同组合的多个单文件见下，根据你的需求场景只需要使用其中一个即可：
例子：&& 在这里我们只是用line图表，其他的不用，如果你不用的话打包在一起就非常浪费，这时候就可以通过build目录下的build.js文件来构建一个更加贴身的echarts单文件。 总结来说模块化如何引入ECharts，你都需要如下4步： 1、引入一个模块加载器，如esl.js或者require.js 2、为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的） 3、为模块加载器配置echarts的路径，从当前页面链接到echarts.js，见上述说明 4、动态加载echarts然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）
首先下载下载完成后，安装好node。 打开build文件夹，看到如下文件：
这里我已经建立了一个新的build01.bat 就是单一生成echarts.js
node build.js optimize=true plain=false exclude=map output=echarts.js
当然也可以在终端里通过命令行参数方式运行 node.js构建脚本。
具体语法：
node build.js optimize=true exclude=map,force,line output=echarts.js plain=true
是否压缩, 默认false
不打包的图表，多个图表使用逗号分割, 默认使用所有图表
输出打包地址，默认为echarts.js
是否打包esl, 打包的话可以直接使用scripts标签引入, 默认false
config-tpl.js文件修改为：
// appDir: './',
baseUrl: '../src',
name: 'echarts',
packages: [
name: 'zrender',
location: '../../zrender/src',
main: 'zrender'
name: 'echarts',
location: '.',
main: 'echarts'
'echarts/chart/line'
out: 'echarts.js'
完成后，将echarts.js拷贝到doc/example/www/js文件中，并将原有的覆盖
HTML配置如下：
require.config({
echarts: '../js/echarts', //echarts.js的路径　　　　　　　　　　'echarts/chart/bar'&:&'./js/echarts',&&&&&&&&&&'echarts/chart/line':&'./js/echarts'&&
require.config配置后后就可以通过动态加载使用echarts。
'echarts',
'echarts/chart/line',
// 按需加载所需图表
'echarts/chart/bar'
function (ec) {
var myChart = ec.init(domMain);
var option = {
myChart.setOption(option);
3 标签式单文件引入&&&&& 如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签
式引入，忘掉require，srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，但是需要注意的是excanvas依赖body标签插入Canvas节点
去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。
标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')
可以直接引入的单文件如下：
echarts.js : 经过压缩，包含除地图外的全部图表echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据
&script src="example/www2/js/echarts-plain.js"&&/script&
var myChart = echarts.init(domMain);
var option = {
myChart.setOption(option);
牛刀小试----代码解析柱状图
今天在学习Echarts练习时，总是在路径的配置上出现错误，作为入门，总结一下，在此分享给大家，希望有用。
ECharts主页： &
ECharts-2.2.0下载地址： &&
ECharts官方实例： &
ECharts官方API文档： &
需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender，当然对于大部分图表而言不需要ZRender的，但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现，建议大家在下载ECharts时同时也要下载ZRender。
ZRender下载地址：
1、项目结构
js文件夹：&下载了ECharts之后，解压缩，如解压后的根目录是echarts-2.2.0，则到echarts-2.2.0\doc\example\www路径下，把里面的js文件夹直接复制粘贴到项目的 WebRoot根目录下即可。ZRender插件放在与ECharts的同一目录下，即zrender-master\src
这里有以下几点需要说明：
l& 所有的跟ECharts有关的文件全部都在echarts文件夹下
l& echarts文件夹的内容分为两部分
1)&&&&&& 一部分是以echarts开头的js文件，这些文件全部来自于1.中的ECharts文件目录中的js文件夹下的文件，也就是1.中的图中红框标注的js下的文件。如下：
2)&&&&&& 另一部分是一个名为zrender的文件夹，这里需要特别注意的是该文件夹的命名必须为zrender，因为在echarts的js文件中对zrender的引用都是以zrender为根目录的，zrender文件夹的内容即为1.中zrender文件目录中的src文件夹下的内容，如下：
dem1：index.html：在WebRoot根目录下新建index.html
&!DOCTYPE html&
&title&ECharts&/title&
&meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&
&meta http-equiv="description" content="this is my page"&
&meta http-equiv="content-type" content="text/ charset=UTF-8"&
&!--&link rel="stylesheet" type="text/css" href="./styles.css"&--&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id="main" style="height:400px"&&/div&
&!-- ECharts单文件引入 --&
&script src="js/echarts.js"&&/script&
&script type="text/javascript"&
// 路径配置
require.config({
echarts: './js'
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line'
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
data:['销量']
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
type : 'value'
series : [
name:"销量",
type:"bar",
data:[5, 20, 40, 10, 10, 20]
},//折线图
name:"销量",
type:"line",
data:[5, 20, 40, 10, 10, 20],
//绘制平均线
markLine : {
type : 'average',
name: '平均值'
//绘制最高最低点
markPoint : {
type : 'max',
name: '最大值'
type : 'min',
name: '最小值'
// 为echarts对象加载数据
myChart.setOption(option);
dem2：echarts.jsp：同上
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&title&ECharts-基本线性图及其配置要求&/title&
&!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--&
&!--Step:1 为ECharts准备一个具备大小（宽高）的Dom--&
&div id="main" style="height:500border:1px solid #padding:10"&&/div&
&div id="mainMap" style="width:500height:500border:1px solid #padding:10"&&/div&
&!--Step:2 Import echarts.js--&
&!--Step:2 引入echarts.js--&
&script src="js/echarts.js"&&/script&
&script type="text/javascript"&
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
echarts: './js'
//echarts.js所在的路径
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
function (ec) {//渲染ECharts图表
，可单独写出来作为回调函数
//--- 折柱 ---
//图表渲染的容器对象
var chartContainer = document.getElementById("main");
//""、''这里均可以
//加载图表
var myChart = ec.init(chartContainer);
myChart.setOption({
tooltip : {
trigger: 'axis'
data:['蒸发量','降水量']
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
calculable : true,
name : '月份',
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
name : '数值',
type : 'value',
splitArea : {show : true}
series : [
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
// --- 地图 ---
var myChart2 = ec.init(document.getElementById('mainMap'));
var option = {
tooltip : {
trigger: 'item',
formatter: '{b}'
series : [
name: '中国',
type: 'map',
mapType: 'china',
selectedMode : 'multiple',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
{name:'广东',selected:true}
myChart2.setOption(option); // 为echarts对象加载数据
完成以上的步骤后，把项目发布到服务器，在浏览器上访问echarts.jsp(由于本实例还没有跟后台进行交互，只是先做一个前台用法介绍，所以可以把echart.jsp直接修改成echarts.html文件,把它跟js文件夹放在同一级目录下，然后直接用浏览器打开echarts.html)，即可看到效果。好了，这次总结就先到这里！
阅读(...) 评论()百度echarts官方实例动态数据怎么跑起来？一直粘贴官方代码，就是跑不起来。这是基础代码，option是空的&divid=""main""style=""height:400px""&&
百度echarts官方实例动态数据怎么跑起来？一直粘贴官方代码，就是跑不起来。
这是基础代码，option是空的 &div id=""main"" style=""height:400px""&&/div&
&script src=""/build/dist/echarts.js""&&/script&
&script type=""text/javascript""&
require.config({
echarts: '/build/dist'
'echarts'
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
function (ec)
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option =
myChart.setOption(option);
&/script&这是官方代码（进入百度echarts官网，实例，其他，动态数据即是）： option = {
text: '动态数据'
subtext: '纯属虚构'
tooltip : {
trigger: 'axis'
data:['最新成交价' '预购队列']
toolbox: {
show : true
feature : {
mark : {show: true}
dataView : {show: true readOnly: false}
magicType : {show: true type: ['line' 'bar']}
restore : {show: true}
saveAsImage : {show: true}
dataZoom : {
show : false
type : 'category'
boundaryGap : true
data : (function (){
var now = new Date();
var res = [];
var len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^D*/''));
now = new Date(now - 2000);
type : 'category'
boundaryGap : true
data : (function (){
var res = [];
var len = 10;
while (len--) {
res.push(len + 1);
type : 'value'
scale: true
name : '价格'
boundaryGap: [0.2 0.2]
type : 'value'
scale: true
name : '预购量'
boundaryGap: [0.2 0.2]
series : [
name:'预购队列'
type:'bar'
xAxisIndex: 1
yAxisIndex: 1
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push(Math.round(Math.random() * 1000));
name:'最新成交价'
type:'line'
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push((Math.random()*10 + 5).toFixed(1) - 0);
]};var lastData = 11;var axisDclearInterval(timeTicket);timeTicket = setInterval(function (){
lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
lastData = lastData.toFixed(1) - 0;
axisData = (new Date()).toLocaleTimeString().replace(/^D*/'');
// 动态数据接口 addData
myChart.addData([
Math.round(Math.random() * 1000) // 新增数据
// 新增数据是否从队列头部插入
// 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
lastData // 新增数据
// 新增数据是否从队列头部插入
// 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
// 坐标轴标签
]);} 2100);这段官方代码要怎么放？或者直接给我一份完整的html最好不过了
我觉得你没理解echarts的机制，可以多读读源码。下面这样，无非实现一个动态更新数据。 &div id=""main"" style=""height:400px""&&/div&
&script src=""/build/dist/echarts.js""&&/script&
&script type=""text/javascript""&
require.config({
echarts: '/build/dist'
'echarts'
'echarts/chart/line'
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
function (ec)
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
text: '动态数据'
subtext: '纯属虚构'
tooltip : {
trigger: 'axis'
data:['最新成交价' '预购队列']
toolbox: {
show : true
feature : {
mark : {show: true}
dataView : {show: true readOnly: false}
magicType : {show: true type: ['line' 'bar']}
restore : {show: true}
saveAsImage : {show: true}
dataZoom : {
show : false
type : 'category'
boundaryGap : true
data : (function (){
var now = new Date();
var res = [];
var len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^D*/''));
now = new Date(now - 2000);
type : 'category'
boundaryGap : true
data : (function (){
var res = [];
var len = 10;
while (len--) {
res.push(len + 1);
type : 'value'
scale: true
name : '价格'
boundaryGap: [0.2 0.2]
type : 'value'
scale: true
name : '预购量'
boundaryGap: [0.2 0.2]
series : [
name:'预购队列'
type:'bar'
xAxisIndex: 1
yAxisIndex: 1
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push(Math.round(Math.random() * 1000));
name:'最新成交价'
type:'line'
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push((Math.random()*10 + 5).toFixed(1) - 0);
myChart.setOption(option);
var lastData = 11;var axisDvar timeTclearInterval(timeTicket);timeTicket = setInterval(function (){
lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
lastData = lastData.toFixed(1) - 0;
axisData = (new Date()).toLocaleTimeString().replace(/^D*/'');
// 动态数据接口 addData
myChart.addData([
Math.round(Math.random() * 1000) // 新增数据
// 新增数据是否从队列头部插入
// 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
lastData // 新增数据
// 新增数据是否从队列头部插入
// 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
// 坐标轴标签
]);} 2100);
解决方案二：
【云栖快讯】集合阿里巴巴、阿里云技术干货！历届云栖社区在线峰会技术荟萃专题出炉，赶紧收藏吧~&&
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
开发者常用软件，超百款实用软件一站式提供