Echarts数据可视化：图表篇（4）—— 散点图、散点气泡图、散点气泡地图

项目地址

系列推荐

《JavaScript设计模式与开发实践》最全知识点汇总大全

使用场景

1. 直角坐标系中，能够展现多个维度或者度量之间的关系（至少4个）
2. 地理坐标系，能够展现地理位置和度量之间的关系

图形特色

1. 展现信息丰富（相比于基础图表）

常见属性

1. coordinateSystem：该系列使用的坐标系，默认使用二维直角坐标系（cartesian2d），还能够选择极坐标系（polar）、地理坐标系（geo）
2. symbol：标记的图形，默认使用圆点（circle），若是须要自定义，能够经过 'image://url' 设置为图片，最好设置为矢量图，这样在调整大小和颜色时就不会出现失真的状况了
3. large：是否开启大数据量优化，默认不开启（false），可是开启后就不能自定义单个数据项的样式了

示例分析

1. 1990与2015年各国家人均寿命与GDP散点气泡图

模型分析：

维度：时间、国家、GDP、人均寿命、人数

其中，人数是组合维度，是GDP和人均寿命二者结合起来决定的

数据分析：

假设咱们如今有此模型的数据，如何将其转换成散点图？

一般来讲，数据用一个二维数组展现

散点气泡图数据格式

data: [
    // 维度X   维度Y   其余维度 ...
    [  3.4,    4.5,   15,   43],
    [  4.2,    2.3,   20,   91],
    [  10.8,   9.5,   30,   18],
    [  7.2,    8.8,   18,   57]
]
复制代码

每一列都是对应的维度，对应到以上模型，数组第一二列则分别为GDP、人均寿命，后面三列则是人数、国家、时间了

2. 全国主要城市空气质量

模型分析：

维度：坐标信息、PM2.5指数大小

数据分析：

假设咱们如今有各地经纬度坐标、以及对应的PM2.5数值，想在地图上将各地PM2.5的状况展现出来，数值越大，散点气泡越大，如何实现？

散点气泡地图数据格式

data: [
    {name: "海门" , value: [121.15, 31.89, 9]},
    ...
]
复制代码

其中，name表示地理名称，value为数组, value[0],value[1]分别表明经纬度，value[2]则是PM2.5的数值大小

相关思考

1. 如何定制散点样式以知足实际须要
2. 基础散点图，不须要气泡，如何实现