Chuang Ye

Echarts的demo实现

2019-01-15 Echarts
Word count: 1.4k | Reading time: 6min

【一个简单的echarts-demo的实现】

此图表是echarts的demo【google chrome浏览器会把echarts的脚本识别为不安全脚本,点击url栏最后的拦截脚本的安全盾,然后加载不安全脚本就可以看到效果图】
下面是echarts中的力导图的html实现


为ECharts准备一个具备大小(宽高)的Dom

1
<div id="main" style="width: 600px;height:400px;"></div>

引入jquery

1
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

引入echarts.js

1
<script src="js/echarts.js"></script><!-- echarts 新版本不支持force图,只能导入这个本地的(旧版)包-->

在script标签中编写具体代码

对require.config进行编写

引入js文件夹,并命名为 echarts

1
2
3
4
5
require.config({
paths: {
echarts: 'js'
}
});

对require进行编写

导入其他有用的模块(都在js文件夹下)

1
2
3
4
5
6
7
8
9
10
11
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map',
'echarts/chart/force',
'echarts/chart/chord'
],
......//这里省略的代码在下面步骤
)

编辑图表代码(附上全部代码,具体修改见fuction)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<P>SDGYASDGSAJD ASDAS </P>
<!-- 1 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<!-- 2 引入jquery(要在echarts.js前面 -->
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<!-- 3 引入echarts.js-->
<script src="js/echarts.js"></script><!-- echarts 新版本不支持force图,只能导入这个本地的(旧版)包-->
<!--<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>-->

<!-- step4 编写js-->
<!--在这里引入主题文件-->
<script type="text/javascript">
<!-- step4-1 引入js文件夹,并命名为 echarts-->
require.config({
paths: {
echarts: 'js'
}
});

<!-- step4-2 将代码写在require里面-->
require(
<!-- step4-2-1 导入其他有用的模块(都在js文件夹下)-->
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map',
'echarts/chart/force',
'echarts/chart/chord'
],
<!-- step4-2-2 编辑图表代码-->
function (ec) {
<!--step4-2-2-1 设置数据-->
var option={
//------------------------------------------
//此处以下是在官网上调试好的数据代码
title : {
text: '标题',
subtext: '副标题',
x:'right',
y:'bottom'
},
tooltip : {
trigger: 'item',
formatter: '{a} : {b}'
},
toolbox: {
show : true,
feature : {
restore : {show: true},
magicType: {show: true, type: ['force', 'chord']},
saveAsImage : {show: true}
}
},
legend: {
x: 'left',
data:['家人','朋友']
},
series : [
{
type:'force',
name : "人物关系",
ribbonType: false,
categories : [
{
name: '人物'
},
{
name: '家人'
},
{
name:'朋友'
}
],
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#333'
}
},
nodeStyle : {
brushType : 'both',
borderColor : 'rgba(255,215,0,0.4)',
borderWidth : 1
},
linkStyle: {
type: 'curve'
}
},
emphasis: {
label: {
show: false
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
nodeStyle : {
//r: 30
},
linkStyle : {}
}
},
useWorker: false,
minRadius : 15,
maxRadius : 25,
gravity: 1.1,
scaling: 1.1,
roam: 'move',
nodes:[
{category:0, name: '乔布斯', value : 10, label: '乔布斯\n(主要)'},
{category:1, name: '丽萨-乔布斯',value : 2},
{category:1, name: '保罗-乔布斯',value : 3},
{category:1, name: '克拉拉-乔布斯',value : 3},
{category:1, name: '劳伦-鲍威尔',value : 7},
{category:2, name: '史蒂夫-沃兹尼艾克',value : 5},
{category:2, name: '奥巴马',value : 8},
{category:2, name: '比尔-盖茨',value : 9},
{category:2, name: '乔纳森-艾夫',value : 4},
{category:2, name: '蒂姆-库克',value : 4},
{category:2, name: '龙-韦恩',value : 1},
],
links : [
{source : '丽萨-乔布斯', target : '乔布斯', weight : 1, name: '女儿'},
{source : '保罗-乔布斯', target : '乔布斯', weight : 2, name: '父亲'},
{source : '克拉拉-乔布斯', target : '乔布斯', weight : 1, name: '母亲'},
{source : '劳伦-鲍威尔', target : '乔布斯', weight : 2},
{source : '史蒂夫-沃兹尼艾克', target : '乔布斯', weight : 3, name: '合伙人'},
{source : '奥巴马', target : '乔布斯', weight : 1},
{source : '比尔-盖茨', target : '乔布斯', weight : 6, name: '竞争对手'},
{source : '乔纳森-艾夫', target : '乔布斯', weight : 1, name: '爱将'},
{source : '蒂姆-库克', target : '乔布斯', weight : 1},
{source : '龙-韦恩', target : '乔布斯', weight : 1},
{source : '克拉拉-乔布斯', target : '保罗-乔布斯', weight : 1},
{source : '奥巴马', target : '保罗-乔布斯', weight : 1},
{source : '奥巴马', target : '克拉拉-乔布斯', weight : 1},
{source : '奥巴马', target : '劳伦-鲍威尔', weight : 1},
{source : '奥巴马', target : '史蒂夫-沃兹尼艾克', weight : 1},
{source : '比尔-盖茨', target : '奥巴马', weight : 6},
{source : '比尔-盖茨', target : '克拉拉-乔布斯', weight : 1},
{source : '蒂姆-库克', target : '奥巴马', weight : 1}
]
}
]
//此处以上是官网上调试好的数据代码
//------------------------------------------
}

<!--step4-2-2-2 初始化echarts,并且引入主题'chalk'-->
var myChart2 = ec.init(document.getElementById('main'),'chalk'); //,'macarons'主题
<!--step4-2-2-3 为myChart设置数据-->
myChart2.setOption(option);

}
);

</script>
</html>
< PreviousPost
身份证信息识别
NextPost >
Index日常工作