echarts使用（2） 散点图

这里展示的是在vue框架中，使用echarts去实现多图例的散点图。

假如有数据：
x=[1,2,3,4,5,6]
y=[1,2,3,4,5,6]
z=[1,2,3,4,5,6]
a=[1,2,3,4,5,6]
且data=[x,y,z,a],我们需要表示出x,y,z,a两两之间的关系。则代码如下：

//处理x,y,z,a数据，生成对应的二维数组
let _len=data[0].length;
let x_y=[];
let x_z=[];
let x_a=[];
let y_x=[];
let y_z=[];
let y_a=[];
let z_x=[];
let z_y=[];
let z_a=[];
let a_x=[];
let a_y=[];
let a_z=[];
for(let i=0;i<_len;i++){
    x_y.push([data[0][i],data[1][i]]);
    x_z.push([data[0][i],data[2][i]]);
    x_a.push([data[0][i],data[3][i]]);
    y_x.push([data[1][i],data[0][i]]);
    y_z.push([data[1][i],data[2][i]]);
    y_a.push([data[1][i],data[3][i]]);
    z_x.push([data[2][i],data[0][i]]);
    z_y.push([data[2][i],data[1][i]]);
    z_a.push([data[2][i],data[3][i]]);
    a_x.push([data[3][i],data[0][i]]);
    a_y.push([data[3][i],data[1][i]]);
    a_z.push([data[3][i],data[2][i]]);
}
      
var chartDom = document.getElementById('echarts_xyza');
var myChart = echarts.init(chartDom);
var option;

option = {
    legend: {
        left:0,
        data: ['x-y', 'x-z','x-a','y-x','y-z','y-a','z-x','z-y','z-a','a-x','a-y','a-z'],
        selected:{
            'x-z':false,
            'x-a':false,
            'y-x':false,
            'y-z':false,
            'y-a':false,
            'z-x':false,
            'z-y':false,
            'z-a':false,
            'a-x':false,
            'a-y':false,
            'a-z':false
        }
    },
    xAxis: {},
    yAxis: {},
    series: [{
        name:"x-y",
        symbolSize: 2,
        data: x_y,
        type: 'scatter'
    },{
        name:"x-z",
        symbolSize: 2,
        data: x_z,
        type: 'scatter'
    },{
        name:"x-a",
        symbolSize: 2,
        data: x_a,
        type: 'scatter'
    },{
        name:"y-x",
        symbolSize: 2,
        data: y_x,
        type: 'scatter'
    },{
        name:"y-z",
        symbolSize: 2,
        data: y_z,
        type: 'scatter'
    },{
        name:"y-a",
        symbolSize: 2,
        data: y_a,
        type: 'scatter'
    },{
        name:"z-x",
        symbolSize: 2,
        data: z_x,
        type: 'scatter'
    },{
        name:"z-y",
        symbolSize: 2,
        data: z_y,
        type: 'scatter'
    },{
        name:"z-a",
        symbolSize: 2,
        data: z_a,
        type: 'scatter'
    },{
        name:"a-x",
        symbolSize: 2,
        data: a_x,
        type: 'scatter'
    },{
        name:"a-y",
        symbolSize: 2,
        data: a_y,
        type: 'scatter'
    },{
        name:"a-z",
        symbolSize: 2,
        data: a_z,
        type: 'scatter'
    }]
};

option && myChart.setOption(option);

如上所示代码，我们可以得到下面的图像：

​​​​​​​