前两天分享了一个项目(http://hyuhan.com/2016/11/17/A-data-display-platform/)，里面用到了echarts（一个纯Javascript的图表库）来画图，项目中用到了它的字符云图，地图，柱状图，饼图等，今天就给大家分享一些一些实现的细节。建议先去看看五分钟上手Echarts再来看这篇博客。
地图
Echarts百度地图扩展，可以在百度地图上进一步展现点图，线图，热力图等，我主要在百度地图上展现的是气泡图。
引入百度地图
- 首先引入百度地图的jssdk，需要使用在百度地图开发者平台申请的ak
- 然后引入Echarts
- 最后引入百度地图扩展bmap（已经打包在echarts包中）
<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>
设置参数
百度地图引入之后，主要就是设置参数了，以我画的最喜爱建筑分布图为例:
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文件并引入
<script src="echarts.min.js"></script>
<script src="echarts-wordcloud.min.js"></script>
webpack引入
npm install echarts-wordcloud
import echarts from 'echarts'
import 'echarts-wordcloud'
设置参数
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: {}
}
},{...},...]
}]
}
画热力图
根据班级群聊数据分析出来的同学之间亲密度，思前想后最后决定用热力图。热力图不需要额外的插件，直接讲参数设置。
参数设置
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)'
}
}
}
]
}
