引言
写论文的时候想要画一个好看的知识图谱，接触了echarts，在此记录一下从安装到使用的过程。
安装
可以参见菜鸟教程上的安装过程Echarts的三种安装方法，在此我使用的是第一种安装方法，就是下载一个.js文件，放在你的指定目录下，后期再编写.html文件的时候，导入js的路径，就是你的存放路径。使用浏览器打开对应的html文件，就可以看到效果了。
假设我的保存路径为：My_code/echarts.js
那么我在编辑html文件的时候，在引入echarts.js的地方，就要写清楚路径，如果是和echarts.js在同一个目录下，假设在My_code下，我们创建了一个将要编辑的graph.html文件，那么在引入echarts的时候，可以直接写<script src="echarts.js">
否则就要写清楚相对路径或者绝对路径。
撰写html文件
这里给出一个我编写好的模板，具体的语法规则，可以自行查阅网上的一些资料即可。在此，给出一个关于Graph的html文件，当然你也可以建立图表的文件，可以在网上搜到相应的模板。
推荐一个网址，关于Echarts的一些教程和信息，可以在此查阅。
Echarts可以好好研究一下这个网址内容。
菜鸟教程 Echarts这是=也是一个入门教程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
</head>
<body>
<div id="main" style="width:1000px;height:800px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var categories = [];
for (var i = 0; i < 2; i++) {
categories[i] = {
name: '类目' + i
};
}
option = {
// 图的标题
// title: {
// text: 'ECharts 关系图'
// },
// 提示框的配置
tooltip: {
formatter: function (x) {
return x.data.des;
}
},
// 工具箱
toolbox: {
// 显示工具箱
show: true,
feature: {
mark: {
show: true
},
// 还原
restore: {
show: true
},
// 保存为图片
saveAsImage: {
show: true
}
}
},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a) {
return a.name;
})
}],
series: [{
type: 'tree', // 类型:关系图
//layout: 'force', //图的布局，类型为力导图
layout: 'radial',
symbolSize: 5, // 调整节点的大小
top: '30%', //距离上
left: '30%', //左
bottom: '20%', //下
right:"30%",
//width："5%"，
//top='18%',
//bottom='14%',
initialTreeDepth:5,
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
//edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: 3,
label: { //每个节点所对应的标签的样式
normal: {
show:true,
//position: 'left', //标签的位置
//verticalAlign: 'middle',//文字垂直对齐方式，默认自动。可选：top，middle，bottom
//align: 'right', //文字水平对齐方式，默认自动。可选：top，center，bottom
fontSize: 10 ,
color:'blue' //标签文字大小
}
},
leaves: { //叶子节点的特殊配置，如上面的树图示例中，叶子节点和非叶子节点的标签位置不同
label: {
normal: {
//position: 'right',
//verticalAlign: 'middle',
//align: 'left',
fontSize: 12,
color:'black'
}
}
},
// edgeLabel: {
// normal: {
// textStyle: {
// fontSize: 20
// }
// }
// },
force: {
repulsion: 2500,
edgeLength: 30
},
draggable: true,
lineStyle: {
normal: {
width: 2,
color: '#4b565b',
curveness :0.5
}
},
// edgeLabel: {
// normal: {
// show: true,
// formatter: function (x) {
// return x.data.name;
// }
// }
// },
// label: {
// normal: {
// show: true,
// textStyle: {}
// }
// },
// 数据
data: [{name: "Data:Wikipedia",
label: { //每个节点所对应的标签的样式
normal: {
//show:true,
position: ['50%', '50%'], //标签的位置
//verticalAlign: 'middle',//文字垂直对齐方式，默认自动。可选：top，middle，bottom
//align: 'right', //文字水平对齐方式，默认自动。可选：top，center，bottom
fontSize: 16 ,
//fontWeight：'bold',
color:'red' //标签文字大小
}
},
children: [
{
name: "Used-for",
// label: { //每个节点所对应的标签的样式
// normal: {
// //show:true,
// position: 'top', //标签的位置
// verticalAlign: 'middle',//文字垂直对齐方式，默认自动。可选：top，middle，bottom
// align: 'right', //文字水平对齐方式，默认自动。可选：top，center，bottom
// fontSize: 13 ,
// //fontWeight：'bold',
// color:'blue' //标签文字大小
// }
// },
children: [
{name: "Process:learn predictive expreseeions"},
{name: "Process:automatically label free texts", value: 3938},
{name: "Process:train LSA model", value: 3938},
{name:"Data:as input paragraph"},
{name: "Task:medical query translation", value: 3938},
{name:"Task:strong domain dependence"}]},
{name: "Feature-of",
children: [
{name: "Data:comprehensive information on various topics", value: 3938},
{name: "Data:stubs" },
{name: "Metrics:definitional in style", value: 6714},
{name: "Project:online collaborative editing projects"}],
},
{name: "Uses",
children: [
{name: "Method:LDA", value: 3938},
{name: "Tool:Word2vec", value: 6714},
],
},
{name: "Part-of",
children: [
{name: "Data:24 copular verbs", value: 3938},
{name: "Data:992 Wikipedia articles", value: 3812},
{name: "Data:>2800,000 for English"},
{name: "Data:the alignment between YAGO and Freebase", value: 3812},
],
},
{name: "Conjunction",
children: [
{name: "Data:New York Times corpora", value: 3938},
{name: "Data:the British National Corpus", value: 3812},
{name:"Data:UMLS corpus"},
{name:"Data:Unified Medical Language System corpus"},
],
}]}],
categories: categories,
}]
};
myChart.setOption(option);
</script>
</body>
</html>
将文件保存为.html格式，然后用浏览器打开，即可得到你创建的图像。可以下载下来。
生成高精度矢量图片
通过上述方法（编辑html文件–>浏览器打开–>下载图片）获得到的图片,放大后会失真，而论文中，我们常常需要插入一个高精度的图片。本文介绍一种方法。
为了解决这个问题，浏览了网页上介绍的各种方案，很多都失败了，由于过去的时间有点久了，我也记不清到底有哪些方案了，在此只给出，我的最终解决方案。
- 安装PhantomJS，根据自己的系统自行搜索安装方案。 MAC系统的可以参见这里参考1(推荐)、参考2phantomjs下载网址
- 安装 snapshot 。 pip install snapshot-phantomjs
- 使用命令
snapshot graph.html png就可以生成一个名为“output.png”的图片，图片内容就是graph.html的编辑信息。
其他使用echart的途径
python-echarts了解一下
可以参考这些资料参考1、参考2
如果出现：错误信息：（但我其实已经将phantomjs添加入环境变量啊） ‘phantomjs’ 不是内部或外部命令，也不是可运行的程序或批处理文件。 No phantomjs found in your PATH. Please install it!
我记得是版本的问题，可以更换python-echarts的版本，降低一下。（我记忆中是这个样子）
命令行生成：snapshot graph.html pdf
需要注意的问题：版本匹配
6519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
