echarts画图实例讲解

前两天分享了一个项目(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)'
                }
            }
        }
    ]
}

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