前端开发笔记4-总结一周中遇到的问题及解决方法

1.echarts Candlestick关键字的坑

Candlestick是绘制k线图的关键字，最近一直再做k线图相关的需求，分享给大家我遇到的坑，有遇到过的同学可以留言讨论哟。

先上图

selected是控制data栏目数据显示的关键字 ，但是有一个特殊情况，当selected隐藏类型为candlestick，设置为false会报错：传入数据不能为空，报错位置在echarts源码23600多行。

由于我的需求是要隐藏k线并且不断更新setoption，所以不能直接隐藏，只能另辟捷径，在此总结两个方法。

1.echarts支持多个画布

一个画布可以绑定一个实例，根据需求创建多个实例，将k线图的数据一次性全部加载，存放在单独的画布上，由于数据一次性被加载出，不需要重复更新setoption，可以随意隐藏k线。

注意不要混淆，k线图是可以被隐藏的，但是不能在隐藏状态下更新setoption。

代码类似于这样

var myChart = echarts.init(document.getElementById('main'));
var myChartCopy = echarts.init(document.getElementById('mainCopy'));

2.隐藏candlestick类型之前，更改为其他类型

如“line”，“bar”，由于这些类型没有特殊性，可以在隐藏状态下随意更新setoption

myEchart.on('legendselectchanged', function (params)

legendselectchanged关键字可以监听点击实例的具体信息

当监听到k线图要显示时，将k线图类型由“line“改回 “candlestick”，selected由false改为true，就可以完成想要的需求。

1方法的加载数据非常快，同样的数据量相当于两个人再搬动数据，但是管理维护相比要麻烦一点

2方法的加载数据速度相较于而言就逊色很多，但是胜在维护管理起来比较方便

这俩个方法均在项目中使用过，各有优缺点，在实际使用时应该多多综合考虑。

 

2.js清空数组/键值对的方法

在使用全局变量数组并且结合echarts后，经常会出现数组保留上一次的数据，使用 array = [] 无法清空数组。

可以使用其他方法代替 = []

其中包括数组清空方法

array.length = 0     //Java中会报错，编译通不过。而JS中则可以，且将数组清空了，
ary.splice(0,ary.length);     // 输出 []，空数组，即被清空了
ary = [];          // 赋值为一个空数组以达到清空原数组

键值对清空方法

  for (let key in UserTimeDataByQuotesSort) {
        delete UserTimeDataByQuotesSort[key]
    }

//通过循环彻底清除键值对

 

3.echarts获取屏幕显示数据的多种方法

1.首先要说的是

        var startValue = myChart.getModel().option.dataZoom[0].startValue;
        var endValue = myChart.getModel().option.dataZoom[0].endValue;

myChart是创建的实例，通过 getModel().option 方法可以获取echarts上的任何数据，可以说是万能方法。

2.监听获取数据

 name.on('datazoom', function (params)

.on是echarts监听的关键字，里面的参数'datazoom'可以替换为任意支持的关键字如：‘click’等等。

返回值是partams，里面带有当前参数具有的值，比如datazoom负责区域上的缩放拖动，返回值也会是当前显示的位置百分比，位置值，位置索引等。

3.'legendselectchanged'关键字监听小图标的事件

 

4.echarts的多数关键字都支持函数作为值

至少我遇到的需要用到函数作为返回值的都能成功设置为函数。

当然这里面是有一点点技巧的，比如：

xAxis.max number, string
[ default: null ]
坐标轴刻度最大值。

可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。

不设置时会自动计算最大值保证坐标轴刻度的均匀分布。

在类目轴中，也可以设置为类目的序数（如类目轴 data: ['类A', '类B', '类C'] 中，序数 2 表示 '类C'。也可以设置为负数，如 -3）。

当设置成 function 形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。如：

max: function(value) {
    return value.max - 20;
}

官网给的例子是比较容易实现的，只有一行代码，但是如果我的计算逻辑非常复杂呢，需要几十甚至几百行代码处理呢，我总不能十个地方用到复制十份吧，那样维护代码的人是不是要骂死你。

如果不想被骂，那就要用到这个小技巧，将函数作为返回值

max: function(value) {
    return aaa(value)
}


function aaa(value){
...
....
.....
return max
}

 

当然还有一个终极大招

max: function(value) {
    return ttt
}


ttt = aaa()


function aaa(){

value == 全局变量
...
....
.....
return max
}

将value赋值为全局变量value，并且使用aaa函数调用，aaa返回值赋值到全局变量ttt中，关键字的值为全局变量ttt。

这个方法就是绕个圈子完成某些无法直接完成的需求，一般而言不要使用，因为要用到多个全局变量，维护起来也是比较麻烦。

但是这个方法是解决一些特殊问题的法宝，不一定要在项目中使用，但一定要知道这种方法，脑瓜要活。

 

5.'formatter'是控制x轴时间显示的关键字，通过该关键字可以控制显示内容的变化

解决思路是通过name.on('datazoom', function (params)监听区域相关的值，根据显示值的数量分别显示年月日

// 监听缩放，根据屏幕存在数据量进行判断，
function monitorDatazoom(name) {
    name.on('datazoom', function (params) {
        var startValue = myChart.getModel().option.dataZoom[0].startValue;
        var endValue = myChart.getModel().option.dataZoom[0].endValue;

        var diff = endValue - startValue
        if (diff < 500 && diff >= 0) {
            timeValue = 0
        } else if (diff < 2000 && diff >= 500) {
            timeValue = 1
        } else if (diff >= 2000) {
            timeValue = 2
        }
        if (timeValue == timeDiff) {
            return
        }
        //作用是拖动时，上方判断进行return，因为拖动没有改变屏幕的数据量，只是改变显示的数据
        timeDiff = timeValue
    });
}

//根据显示区域数量显示时间
function timePart(value) {
    switch (timeValue) {
        case 0:
            return timePartDeploy(value, ":00", 'hh:mm ')
            break;
        case 1:
            return timePartDeploy(value, ":00", 'MM/dd ')
            break;
        case 2:
            return timePartDeploy(value, ":00", 'yyyy/MM/dd ')
            break;
    }
}

//echarts关键字
formatter: function (value) {
                    return timePart(value)
                }

//

//设置时间随缩放变换
function timePartDeploy(timeValue, timeArea, timeFormat) {
    if (timeArea == undefined || timeFormat == undefined) {
        return timeValue
    }
    if (timesPart == '4h') {
        if (timeValue.indexOf(timeArea) > 0) {
            return echarts.format.formatTime(timeFormat, timeValue);
        }
    } 
}

本周的分享到此结束，欢迎大家交流。