echarts使用笔记
前段时间由于项目需要,对echarts的关系图进行了简单的了解,虽然都是一些简单的用法,很久不用还是会忘,好记性不如烂笔头,还是写下来吧。
首先,以官网中的http://echarts.baidu.com/demo.html#graph-simple 为例
创建图示关系图可分为三步:1. 引入echarts.js文件 2 .为关系图准备一个div并设置好宽高 3.创建echarts实例,通过option指定图表的配置项和数据。如下图
关于option里面的配置项,主要用到的是series
详细如下
data属性,详细如下
links属性,详细如下
如果要用图片替换节点图标,可在series下或每个节点中添加symbol属性,如:symbol:'image://./img/server.png'
以下为上图代码,只在官网的例子上改动了一点点
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <script src="js/echarts.js"></script>
- </head>
- <body>
- <div id="main" style="width: 600px;height:400px;"></div>
- <script type="text/javascript">
- // 基于准备好的dom,初始化echarts实例
- var myChart = echarts.init(document.getElementById('main'));
- // 指定图表的配置项和数据
- var option = {
- title: {
- text: 'Graph 简单示例'
- },
- tooltip: {},
- animationDurationUpdate: 1500,
- animationEasingUpdate: 'quinticInOut',
- series : [
- {
- type: 'graph',
- layout: 'none',
- symbol:'image://./img/server.png',
- symbolSize: [60,80],//设置节点宽高,为一个数字时,则宽高相同
- roam: true,
- label: {
- normal: {
- show: true
- }
- },
- edgeSymbol: ['circle', 'arrow'],
- edgeSymbolSize: [4, 10],
- edgeLabel: {
- normal: {
- textStyle: {
- fontSize: 20
- }
- }
- },
- data: [{
- name: '节点1',
- x: 300,
- y: 300
- }, {
- name: '节点2',
- x: 800,
- y: 300
- }, {
- name: '节点3',
- x: 550,
- y: 100
- }, {
- name: '节点4',
- x: 550,
- y: 500
- }],
- links: [{
- source: 0,
- target: 1,
- symbolSize: [5, 20],
- label: {
- normal: {
- show: true
- }
- },
- lineStyle: {
- normal: {
- width: 5,
- curveness: 0.2
- }
- }
- }, {
- source: '节点2',
- target: '节点1',
- label: {
- normal: {
- show: true
- }
- },
- lineStyle: {
- normal: { curveness: 0.2 }
- }
- }, {
- source: '节点1',
- target: '节点3'
- }, {
- source: '节点2',
- target: '节点3'
- }, {
- source: '节点2',
- target: '节点4'
- }, {
- source: '节点1',
- target: '节点4'
- }],
- lineStyle: {
- normal: {
- opacity: 0.9,
- width: 2,
- curveness: 0
- }
- }
- }
- ]
- };
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
- </script>
- </body>
- </html>
上面提到的两个没试出来的属性,有知道的小伙伴可以交流一下。