echarts使用(2) 散点图

news/2024/7/10 0:50:19 标签: echarts, vue, 前端, 图表, 画图

这里展示的是在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);

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

​​​​​​​


http://www.niftyadmin.cn/n/1570751.html

相关文章

echarts使用(3) 曲线图

在vue框架中&#xff0c;我们可以使用echarts来实现图表。 假如我们有x,y,z,a随着时间变动的数据&#xff0c; 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] xyza_time["2014","2015","2016","2017","2018&quo…

echarts使用(4)k线图/箱线图

在vue框架中&#xff0c;下面将展示如何使用echarts画k线图 假如我们有数据&#xff0c; 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] 我们需要实现它们对应的k线图var chartDom document.getElementById("echarts_xyza_k"); var myChart echar…

echars使用(5)直方图

在vue框架中&#xff0c;我们将展示如何使用echars实现直方图。 假如我们一组数据keys&#xff0c;value&#xff0c; 其中keys&#xff0c;value表示关键值及其频数&#xff0c;我们要将它们展示为统计直方图。var chartDom document.getElementById(id); var myChart echa…

vue + element-ui使用

element-ui便于很好地实现表格&#xff0c;方便我们开发。 我们可以使用项目模板&#xff1a;https://github.com/ElementUI/element-starter 也可以参考文档&#xff1a;https://element.eleme.cn/#/zh-CN/component/quickstart 都有利于我们进行开发

ef框架 动态切换数据源信息(切换连接字符串)

在一些特殊的场景&#xff0c;我可能会更换访问的数据库&#xff0c;猜想&#xff08;玩游戏的时候&#xff1a;选择不同的区登录&#xff0c;选区就是更换数据库&#xff0c;比如你用qq登录王者&#xff0c;可登录1区或者2区&#xff0c;两个区中&#xff0c;你的英雄&#xf…

成员变量与局部变量的区别

l在类中的位置不同•成员变量 类中方法外•局部变量 方法内或者方法声明上l在内存中的位置不同•成员变量 堆内存•局部变量 栈内存l生命周期不同•成员变量 随着对象的存在而存在&#xff0c;随着对象的消失而消失•局部变量 随着方法的调用而存在&#xff0c;随着方法的调用完…

面向对象(方法的形式参数是类名的时候如何调用)

/* 形式参数的问题&#xff1a; 基本类型&#xff1a;形式参数的改变不影响实际参数 引用类型&#xff1a;形式参数的改变直接影响实际参数 */ //形式参数是基本类型 class Demo { public int sum(int a,int b) { return a b; } } //形式参数是引用类型 class Student { pub…

this 关键字

/* 我们曾经曰&#xff1a;起名字要做到见名知意。 this:是当前类的对象引用。简单的记&#xff0c;它就代表当前类的一个对象。 注意&#xff1a;谁调用这个方法&#xff0c;在该方法内部的this就代表谁。 this的场景&#xff1a; 解决局部变量隐藏成员变量 */ //定义学生类…