玩转ECharts制作图表之散点图

散点图适用于三维数据集，但其中只有两维需要比较。

散点图

1. ECharts基本构建代码结构
2. 准备x轴和y轴数据，二维数组[[身高,体重],[]…]
3. 将type的值设置为scatter，x轴和y轴的type都是value

准备和处理json数据

//准备数据 数据太多只拿出一部分
var data = [{
          
   
                "gender": "female",
                "height": 161.2,
                "weight": 51.6
            }, {
          
   
                "gender": "female",
                "height": 167.5,
                "weight": 59
            }, {
          
   
                "gender": "female",
                "height": 159.5,
                "weight": 49.2
            }, {
          
   
                "gender": "female",
                "height": 157,
                "weight": 63
            }, {
          
   
                "gender": "female",
                "height": 155.8,
                "weight": 53.6
            }]
            //处理数据
             var axisData = []
        for (var i = 0; i < data.length; i++) {
          
   
            var height = data[i].height
            var weight = data[i].weight
            var newArr = [height, weight]
            axisData.push(newArr)
        }

准备ECharts图表容器

<div style="width: 600px;height:400px"></div>

初始化ECharts实例

var mCharts = echarts.init(document.querySelector("div"))

配置配置项

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

将配置项设置给echarts实例

mCharts.setOption(option)

散点图样式

缩放，脱离0值比例 -scale

xAxis: {
          
   
                    type: value,
                    //缩放，脱离0值比例
                    scale: true
                },
                yAxis: {
          
   
                    type: value,
                    scale: true
                },

带涟漪动画的散点图

type: effectScatter

出现涟漪动画的时机

//render 绘制完成后显示 emphasis  高亮的显示
showEffectOn: emphasis

涟漪动画时, 散点的缩放比例

rippleEffect: {
          
   
                        scale: 10 // 涟漪动画时, 散点的缩放比例
                    },

控制散点的样式 -itemStyle 控制散点的大小 -symbolSize