前两天分享了一个项目(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',// 设置坐标系为前面提到的bmapcoordinateSystem: '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: '亲密度',// 图标类型为heatmaptype: 'heatmap',// 二维数组，每个数据项都是一个一维的数组，前两个值表示直角坐标系上的x,y，第三个至表示大小。data: [[0,0,2],[]...],label: {normal: {show: true}},itemStyle: {emphasis: {shadowBlur: 10,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
}

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