echarts 散点图

Echarts 散点图

散点图，是一种常见的图表类型。散点图由许多“点”组成，有时，这些点用来表示数据在坐标系中的位置（比如在笛卡尔坐标系下，表示数据在 x 轴和 y 轴上的坐标），这些点的大小、颜色等属性也可以映射到数据值，用以表现高维数据。

简单散点图

x轴为类目轴，一个类目对应一个数据点。

option = {
  xAxis: {
    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  },
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
};

笛卡尔坐标系 散点图

xy 轴都是数值轴，数据点我们直接用数组 [x,y] 表示,

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [
        [10, 5],
        [0, 8],
        [6, 10],
        [2, 12],
        [8, 9]
      ]
    }
  ]
};

图形形状

以上的这些都是使用默认的样式配置，当我们需要修改散点样式时。可以修改散点的形状 symbol ， echarts内置提供了一些常用形状，如：圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形，分别对应'circle'、'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'。使用内置形状时，只要将 symbol 属性指定为形状名称对应的字符串即可。

当官方内置的形状满足不了需求时，也可以用图片、svg矢量图去替换图形。

• 图片：以 'image://' 开头，后面跟图片的绝对或相对地址。形如：'image://http://example.com/xxx.png' 或 'image://./xxx.png'
• SVG ： 以'path://' 开头的 SVG 路径即可，使用SVG矢量图不会因为缩放而失真。

import scatterShape from '@/assets/vue.svg'    //引入图片

option = {
   xAxis: {
      data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {},
    series: [
      {
        type: 'scatter',
		//symbol:'arrow'    //默认为圆形，可以使用内置属性替换
         // symbol: `image://${img}`  //   图片替换
		// symbol:'path://M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z'  // SVG方式, 这里后面拼接的内容是svg的 'd'的属性值
        data: [220, 182, 191, 234, 290, 330, 310]
      }
    ]
};

图形的大小

当我们需要实现数据点随着数值大小变化而变化时，即数值越大，图形越大。图形大小可以使用 series.symbolSize 控制。它既可以是一个表示图形大小的像素值，也可以是一个包含两个 number 元素的数组，分别表示图形的宽和高。

除此之外，它还可以是一个回调函数，传入的value 为 data 的数据值，params是其他数据项参数。如下：

 series: [
      {
      ...其他配置, //
        symbolSize: function (value,params) {
           	return value * 2 || [value,value*1.2]    // 可以根据值大小设置图形大小，支持返回数值大小，也支持返回宽高的数组
          }
      }
    ],

图形的颜色

当我们需要实现数据点随着数值大小变化而变化时，即数值越大，颜色越深。图形大小可以使用 series.itemStyle.color属性控制。它支持使用回调函数，传入的 Object包括了数据点的系列（seriesIndex）、data数据值（value）大小等参数，使用如下

 series: [
      {
      ...其他配置, //
        itemStyle: {
          color: function (params) {
            if (params.value > 1) return '#00ffff'     // 这里可以根据值大小设置梯度色值
            return '#e12945'
          }
        }
      }
    ],

以上是散点图的一些基本配置。这些例子都是基于x轴为类目(category)轴,y轴为数值轴的图标，且x轴和y轴的数据都是分开存储的情景。如

XData: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
yData:[220, 182, 191, 234, 290, 330, 310]

如果数据点是以数组的形式去描述 ，即 [‘Sun’,220] 为一个数据点，这样更方便，我们只需要指定x轴为类目轴、y轴为数值轴，然后把数据直接赋给series中的data即可。对于自定义数据点样式需要注意，此时回调函数传入的数据是你在data传入的数据，像 symbolSize 的回调函数传入的value就为 [‘Sun’,220] ，需要通过数组下标将数据取出来。

如果数据点是三维的，即一个数据点包括三种信息，比如 [‘KFC’, ‘8月26’, 4],这样的数据点表示 x轴为‘KFC’，y轴为’8月26’，4才是数值，这样的x轴和y轴都是类目轴的情况，数据点的大小表示数值大小。如下图所示

基于以上的散点图，我们可以得到一个 时间、位置上数据点的信息，比如可以用于绘制数据测量指标变化，在这个基础上可还以在对应的时间上插入事件图（如线图），表示做了什么，然后指标发生了什么样的变化等等。