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

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

vue框架中,下面将展示如何使用echarts画k线图

假如我们有数据,
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 = echarts.init(chartDom);
var option;

option = {
    legend:{
        data:['x','y','z','a'],
        left:0,
        selected:{
            'y':false,
            'z':false,
            'a':false
        }
    },
    xAxis: {
        data:['x/y/z/a']
    },
    yAxis: {},
    series: [{
        name:"x",
        type: 'k',
        data: [x]
    },
    {
        name:"y",
        type: 'k',
        data: [y]
    },
    {
        name:"z",
        type: 'k',
        data: [z]
    },
    {
        name:"a",
        type: 'k',
        data: [a]
    }]
};

option && myChart.setOption(option);

其图像类似于下面所示:


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

相关文章

echars使用(5)直方图

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

vue + element-ui使用

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

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

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

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

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

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

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

this 关键字

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

成员方发的分类

/*类的组成:成员变量,成员方法今天我们又加入了一个新的成员:构造方法。以后再提类的组成:成员变量构造方法成员方法根据返回值:void类型非void类型形式参数:空参方法非空参方法*/class Student {public St…

一个标准学生类的代码及测试

/* 一个标准代码的最终版。 学生类: 成员变量: name,age 构造方法: 无参,带两个参 成员方法: getXxx()/setXxx() show():输出该类的所有成员变量值 给成员变量赋值: A:setXxx()方法…