zoukankan      html  css  js  c++  java
  • ECharts的x轴和y轴均使用数值类型

    今天有个需求,就是需要ECharts的x轴和y轴都要使用数值类型,即xAxis.type和yAxis.type均为value,然后我按照我以为的方式修改了下,发现图崩了

    发现问题:

    然后我打开了ECharts的官方在线编辑器做测试,首先写了自认为对的代码

    option = {
        xAxis: {
            type: 'value',
            data: [1, 2, 3, 4, 5, 6, 7],
            name: 'x轴'
        },
        yAxis: {
            type: 'value',
            name: 'y轴'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        }]
    };

    然后实际的图是有问题的,如下图,可以发现柱状图的左上角那个点的x和y的值是相等的,从左往右分别是70,80,110,120,130,150,200(没错,就是series里的那一组数据)

    解决问题:

    1、首先打开ECharts的官方文档

    2、我看到xAxis.data[i]的文档内容,它里面提到xAxis的data是类目数据。那这也就意味着,当type='value'时,data里面存放的数据是无效的

    类目数据,在类目轴(type: 'category')中有效。

    如果没有设置 type,但是设置了 axis.data,则认为 type 是 'category'

    如果设置了 type 是 'category',但没有设置 axis.data,则 axis.data 的内容会自动从 series.data 中获取,这会比较方便。不过注意,axis.data 指明的是 'category' 轴的取值范围。如果不指定而是从 series.data 中获取,那么只能获取到 series.data 中出现的值。比如说,假如 series.data 为空时,就什么也获取不到。

    3、再定位到type='line'的series.data,里面有提到

    通常来说,数据用一个二维数组表示。如下,每一列被称为一个『维度』

    特别地,当只有一个轴为类目轴(axis.type 为 'category')的时候,数据可以简化用一个一维数组表示

         

    4、那么也就是说,我需要在xAxis.type='value'的时候,把x轴的数据存放到series.data里面去。我按这个思路修改了代码,效果立马显现

    option = {
        xAxis: {
            type: 'value',
            name: 'x轴'
        },
        yAxis: {
            type: 'value',
            name: 'y轴'
        },
        series: [{
            data: [
                [1,120],
                [2,200],
                [3,150],
                [4,80],
                [5,70],
                [6,110],
                [7,130]
            ],
            type: 'bar'
        }]
    };

    5、还可以使用新特性dataset来设置,代码如下,效果和上图一致

    option = {
        xAxis: {
            type: 'value',
            name: 'x轴'
        },
        yAxis: {
            type: 'value',
            name: 'y轴'
        },
        series: [{
            type: 'bar'
        }],
        dataset: {
            source: [
                [1, 120],
                [2, 200],
                [3,150],
                [4,80],
                [5,70],
                [6,110],
                [7,130]
            ]
        }
    };
  • 相关阅读:
    中高级PHP程序员应该掌握哪些技术
    如何在FOXMAIL添加网易邮箱
    subline text 3快捷键
    【sublime】sublime Text 3 javaScript代码自动提示插件&安装步骤 &启动Debug模式
    PHPStorm常用快捷键
    怎么样快速修改HOSTS文件?让火绒等小工具来帮忙
    windows系统 右键新建菜单添加新建php文件
    给初学编程的人的干货
    安装Adobe Dreamweaver CC时出现安装失败及解决方法
    win10系统每次打开软件都会弹出账户控制如何解决
  • 原文地址:https://www.cnblogs.com/kumu/p/10931362.html
Copyright © 2011-2022 走看看