Echarts学习系列之dataset

标签： Echarts 分类： Javascript 创建时间：2020-06-19 08:50:26 更新时间：2025-01-17 10:39:22

1.基础用法

echarts4增加了dataset数据集的概念，管网和很多的文章中也都是提供了如何使用数组形式的dataset进行示例开发，我这篇文章想详细的说明，如何使用对象数组的dataset进行数据的指定，因为我们从后台返回的数据一般都是这种形式，比如springboot jpa返回的List对象数组,这种情况下如何绘制数据呢，比如我的x舟是时间，纵轴是overHeat1。

[
    {sectionId: 1, recordTime: "2020-06-18 16:26:20.0", overHeat1: 116.528, overHeat2: 57.794, hLoss: 128.622 },
    {sectionId: 1, recordTime: "2020-06-18 16:26:20.0", overHeat1: 116.528, overHeat2: 57.794, hLoss: 128.622 },
    {sectionId: 1, recordTime: "2020-06-18 16:26:20.0", overHeat1: 116.528, overHeat2: 57.794, hLoss: 128.622},
    {sectionId: 1, recordTime: "2020-06-18 16:26:20.0", overHeat1: 116.528, overHeat2: 57.794, hLoss: 128}
]

在option.dataset中，一个重要的地方就是dimensions,我的理解就是，dimensions的第一项，就是指定了X轴，第二项往后，就是指定的Y轴的数据

var myChart = echarts.init(document.getElementById(id));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '过热度',
        x:'center',
        y:'top',
        textAlign:'center'
    },
    tooltip: {},
    dataset: {
        // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
        // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
        dimensions: ['recordTime','overHeat1'],
        source: data

    },
    xAxis: {
        type: 'category',
    },
    yAxis: {},
    series: [
        {
            type: 'line',
            smooth: true
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

指定了X轴和Y轴之后，显示的效果如下：

参考文章：
1.Echarts 定制化封装之dataset (管网的翻版)
2.dataset (管网)
3.ECharts加载json数据解决方案（以折线图为例）

2.数据更新

我的本意是对数据集进行更新，但是通过setOption进行操作，似乎不太可行。

/刷新数据
var option = chart.getOption();

console.log("tt",data);
option.dataset[0].source =data;
let dataset={
    // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
    // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
    dimensions: ['recordTime','flowMass','flowHeat'],
    source: data

};
option.dataset=dataset;
// console.log("dd",option.dataset[0].source)
chart.setOption(option);

当我重新创建了一个一模一样的option，也就是说这个option不是使用chart.getOption()获取的，然后使用chart.setOption(option)进行刷新的话，是可以正常的显示最新的数据的。但是如果这个option使用的是chart.getOption()获取到的option，就无法直接更新。

于是新的数据更新方法就产生了

// 创建图表实例
var myChart=echarts.init(dom);
// 指定图表的配置项和数据
var option = {
    dataset: {
        // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
        // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
        dimensions: [],
        source: data

    }
};
// 保存option
myChart.option=option;
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);


// 更新数据时先获取绑定到实例上的option，切记不要使用getOption，否则无效
let option = this.flowHeat_flowMas_chart.option;
// 更新数据
optiond.dataset.source=data;
// 更新图表
myChart.setOption(option);

参考文章：
1.数据更新的示例 (这里更多的是一个原先的使用series系列的时候，使用的数据更新方法，但是拿到我的项目中，就是不起作用)
2.Echarts 定制化封装之dataset (这里讲了很多的关于dataset的功能的和作用，也没有找到我需要的更新数据的方法)
3.echartsInstance. appendData (这个appendData方法倒是挺适合我的思路的，但是也是有使用限制的，不支持dataset，只能用data,而且是百万数量级的更新)
4.2018-08-10(echarts更新数据) (我遇到的问题就是当我调用了clear之后，这个获取到的option就变成了空的);
5.有关echarts数据更新后，图表没有更新的情况 (这种情况也不符合，就是设置了setOption的第二个参数为true，)
6.echarts中画布的清空 (调用了clear()方法，但是我调用了之后，图表是清空了，但是完全看不见了，而且setOption之后，也没有出现)
7.echartsInstance. setOption (重新设置数据的示例,这里也是直接更新了option，而不是使用的getOption获取到的参数)
8.ECharts 异步加载数据
9.appendData()调用方式有限制么 (这个没怎么看)
10.echarts图表动态刷新数据不能请空问题 (这里面的代码，其实也是没有使用getOption进行获取option对象)

往期推荐

文章目录

1. 1.基础用法
2. 2.数据更新

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。