关于ECharts的使用总结——散点图和直角坐标系

一、散点图

散点图要求x、y轴均为数值类型，且不必从0开始。series中type需指定为'scatter'，data的值需要为一个二维数组，如[ [1, 1], [2, 3]......]。

      xAxis: {
        type: 'value',
        scale: true
      },
      yAxis: {
        type: 'value',
        scale: true
      },
      series: [
        {
          type: 'scatter', // 指明图表的类型为散点图
          data: axisData
        }
      ]

可以给散点添加一些特效，这里通过将数据点分为两类，分别指定颜色和大小：

      series: [
        {
          // type: 'scatter',
          type: 'effectScatter', // 指明图表为带涟漪动画的散点图
          showEffectOn: 'render', // 出现涟漪动画的时机 'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
          rippleEffect: {
            scale: 10 // 涟漪动画时, 散点的缩放比例
          },
          data: axisData,
          // symbolSize: 30
          symbolSize: function (arg) { // 控制散点的大小
            // console.log(arg)
            var height = arg[0] / 100
            var weight = arg[1]
            // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
            var bmi = weight / (height * height)
            if (bmi > 28) {
              return 10
            }
            return 5
          },
          itemStyle: { // 控制散点的样式
            color: function (arg) {
              // console.log(arg)
              var height = arg.data[0] / 100
              var weight = arg.data[1]
              // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
              var bmi = weight / (height * height)
              if (bmi > 28) {
                return 'red'
              }
              return 'green'
            }
          }
        }
      ]

效果如下图：

二、直角坐标系

前面我们学习了条形图、折线图和散点图的实现，它们有一个共同点，就是都是在直角坐标系下绘制的。所以我们来看看直角坐标系的一些配置。

grid、xAxis、yAxis、dataZoom

grid：设置坐标轴容器

      grid: { // 坐标轴容器
        show: true, // 是否可见
        borderWidth: 10, // 边框的宽度
        borderColor: 'red', // 边框的颜色
        left: 120, // 边框的位置
        top: 120,
        width: 300, // 边框的大小
        height: 150
      }

可以通过position属性来控制坐标轴的位置：

      xAxis: {
        type: 'category',
        data: xDataArr,
        position: 'top' // 控制坐标轴的位置
      },
      yAxis: {
        type: 'value',
        position: 'right' // 控制坐标轴的位置
      }

可以在dataZoom选项中分别控制x轴和y轴的缩放：

      dataZoom: [ // 控制区域缩放效果的实现
        {
          type: 'slider', // 缩放的类型  slide代表滑块  inside代表依靠鼠标滚轮
          // type: 'inside'
          xAxisIndex: 0
        },
        {
          type: 'slider',
          yAxisIndex: 0,
          start: 0, // 初始化渲染完成后, 数据筛选的初始值, 百分比
          end: 80 // 初始化渲染完成后, 数据筛选的结束值, 百分比
        }
      ],