导航
导航
文章目录
  1. 地图
    1. 引入百度地图
    2. 设置参数
  2. 字符云图
    1. 引入字符云
      1. 直接下载js文件并引入
      2. webpack引入
    2. 设置参数
  3. 画热力图
    1. 参数设置

echarts画图实例讲解

前两天分享了一个项目(http://hyuhan.com/2016/11/17/A-data-display-platform/),里面用到了echarts(一个纯Javascript的图表库)来画图,项目中用到了它的字符云图,地图,柱状图,饼图等,今天就给大家分享一些一些实现的细节。建议先去看看五分钟上手Echarts再来看这篇博客。

地图

Echarts百度地图扩展,可以在百度地图上进一步展现点图,线图,热力图等,我主要在百度地图上展现的是气泡图。

引入百度地图

  • 首先引入百度地图的jssdk,需要使用在百度地图开发者平台申请的ak
  • 然后引入Echarts
  • 最后引入百度地图扩展bmap(已经打包在echarts包中)
1
2
3
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
<script src="echarts/dist/echarts.min.js"></script>
<script src="echarts/dist/extension/bmap.min.js"></script>

设置参数

百度地图引入之后,主要就是设置参数了,以我画的最喜爱建筑分布图为例:

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
option = {
// 设置标题样式
title: {
// 标题文本
text: '学生最喜爱学校建筑分布',
// 标题离容器左侧的距离,center表示水平居中
left: 'center',
top: 15,
// 标题文本的样式设置
textStyle: {
fontSize: 24,
fontFamily: 'Helvetica',
fontWeight: 400
}
},
// 提示框设置为由数据项图形触发
tooltip: {
trigger: 'item'
},
// 添加保存为图片和数据视图工具工具栏
toolbox: {
feature: {
saveAsImage: {},
dataView: {}
},
right: 15,
top: 10
},
// 加载bmap组件
bmap: {
// 百度地图中心经纬度(设置为你需要的地图中心即可)
center: [114.427877, 30.517249],
// 百度地图缩放比例(按需配置)
zoom: 15,
// 是否开启拖拽缩放
roam: true,
// 设置百度地图样式(可参考http://developer.baidu.com/map/jsdevelop-11.htm)
mapStyle: {
style: 'light'
}
},
series: [
{
name: '最喜爱建筑',
// 图标类型设置为气泡图
type: 'scatter',
// 设置坐标系为前面提到的bmap
coordinateSystem: 'bmap',
// 数据
data: [{}],
// 气泡标记大小
symbolSize: ,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: 'rgba(11, 110, 72, 1)'
}
}
},
]
}

另外给大家推荐一个百度的拾取坐标系统,挺好用的。

字符云图

之前一直觉得字符云是个很酷炫的东西,所以这次也就强行把它用上了,嘿嘿。里面的数据是我根据群聊记录分析出来的高频词汇。Echarts的字符云是基于wordcloud2.js的。

引入字符云

直接下载js文件并引入

1
2
<script src="echarts.min.js"></script>
<script src="echarts-wordcloud.min.js"></script>

webpack引入

1
npm install echarts-wordcloud
1
2
import echarts from 'echarts'
import 'echarts-wordcloud'

设置参数

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
option = {
title: {
text: title,
textStyle: {
fontSize: 26,
fontFamily: 'Helvetica',
fontWeight: 400
},
left: 'center',
top: 20
},
toolbox: {
feature: {
saveAsImage: {},
dataView: {}
},
right: 20,
top: 20
},
series: [{
// 设置图表类型为'wordCloud'
type: 'wordCloud',
// 设置cloud的形状
shape: 'cardioid',
// shape: 'pentagon',
// shape: 'circle',
left: 'center',
top: 30,
width: '75%',
height: '80%',
// 设置字符字体大小的范围
sizeRange: [12, 75],
// 设置字符旋转的角度范围
rotationRange: [-90, 90],
rotationStep: 45,
// 字符间距
gridSize: 8,
// 字符字体样式
textStyle: {
normal: {
fontFamily: 'Microsoft Yahei',
fontWeight: 'bold',
// 字符字体颜色用一个函数随机设置
color: function() {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')'
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
// data必选包含name和value选项,name即为显示的字符,value越大字符字体大小越大
data: [{
name: '',
value: ,
textStyle: {
normal: {},
emphasis: {}
}
},{...},...]
}]
}

画热力图

根据班级群聊数据分析出来的同学之间亲密度,思前想后最后决定用热力图。热力图不需要额外的插件,直接讲参数设置。

参数设置

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
option = {
title: {
text: '通信1502班同学关系密切度分析图(仅通过群聊数据分析)',
// 子标题
subtext: '数值越大两者越亲密',
subtextStyle: {
fontSize: 16
},
left: 'center',
top: 4,
textStyle: {
fontSize: 22,
fontFamily: 'Helvetica',
fontWeight: 400
}
},
tooltip: {
trigger: 'item'
},
toolbox: {
feature: {
saveAsImage: {},
dataView: {}
},
right: 15
},
grid: {
height: '78%',
bottom: '14%'
},
// x轴设置
xAxis: {
// 坐标轴为类目轴
type: 'category',
// 数组,x轴显示的刻度标签
data: [...],
// 刻度标签相关设置
axisLabel: {
// 如果水平放不下,可以旋转
rotate: 60,
// 刻度标签显示间隔
interval: 0
},
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: [...],
splitArea: {
show: true
}
},
// 视觉映射组件,也就是项目展示中热力图最小面现实的那个组件
visualMap: {
// 组件允许的最小值和最大值
min: 0,
max: 100,
calculable: true,
// 组件高度
itemheight: 300,
// 组件水平放置
orient: 'horizontal',
left: 'center',
bottom: '3%'
},
series: [
{
name: '亲密度',
// 图标类型为heatmap
type: 'heatmap',
// 二维数组,每个数据项都是一个一维的数组,前两个值表示直角坐标系上的x,y,第三个至表示大小。
data: [[0,0,2],[]...],
label: {
normal: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}

饼图和条形图比较基础,可以参考官方实例,建议仔细阅读官方配置文档,可以自己画出各种有趣的图形来。