Los cierres de procesamiento numérico en eCharts

En eCharts, el elemento de configuración proporciona un número de funciones para establecer la propiedad. Estas funciones sólo se pueden conocer los datos del punto de procesamiento actual, los datos temporales no pueden conocer antes del primer tratamiento. En algunos casos, los datos de tiempo de procesamiento necesario antes de su uso, para proporcionar una base para este proceso. Las variables globales pueden causar contaminación entre diferentes datos gráficos y cierres pueden ser la solución perfecta a este problema.

En primer lugar, los escenarios de aplicación

1. En el patrón de tipo barra, con base en el valor de la dataIndex eje horizontal, color de la pantalla cilíndrica, un cambio de color cada 1.000;
2. En el patrón de tipo barra, en base al valor del eje horizontal, el color de visualización; por ejemplo, formato numérico 404-22: 01,404-22: 02,500-22: 02, de las cuales una pantalla a color de 404, mostrada como 500 otro color;

Los gráficos son los siguientes:

En segundo lugar, para lograr análisis

En eCharts, el control de color gráfico de barras para ajustar los siguientes parámetros:

    {
        series:{
            type: "bar",
            itemStyle: {
                normal: {
                    color: ""//可以是function(){},控制颜色
                }
            }
        }
    }

    //颜色列表
    var colorList=['#191970','#1C86EE','#37A2DA','#67E0E3','#3C6188','#529BFF','#7CAE6B','#EAB839','#6ED0E0','#D48265', '#6E7074','#00FFFF']
    var colorCount = 2;

Una escena:
Ajuste el color de base directa dataIndex% 1000, para cumplir con los requisitos

    {
        series:{
            type: "bar",
            itemStyle: {
                normal: {
                    color:function(param){
                        var idx = parseInt(params.dataIndex/1000);
                        return colorList[idx%colorCount];
                    }//可以是function(){},控制颜色
                }
            }
        }
    }

Escena 2:
Desde el gráfico de barras se basa en el cambio de color en el valor del eje X, este cambio depende de un valor anterior [404-10: 22] y el valor actual: [404] sección comparativo [404 a 1023], si el mismo que el valor anterior, el cambio de color, si el valor cambia a un cambio de color;

Proceso de análisis: En un parámetro valor anterior sin parámetros, sólo el valor del valor actual, lo que requerirá el acceso a la parte delantera y un valor anterior del color, si la variable global, no habrá contaminación cruzada entre los diferentes patrones; escena Sólo el cierre, sólo para satisfacer esta demanda, de la siguiente manera:

    {
        series:{
            type: "bar",
            itemStyle: {
                normal: {
                    color:colorSwitchbyValue(colorCount,xAxisFormatter)//可以是function(){},控制颜色
                }
            }
        }
    }
    //依据数值处理颜色,闭包实现
    function colorSwitchbyValue(colorCountp,f) {
        var LastVal=""
        var colorIndex=0
        return function(params){
            var color=colorList[params.dataIndex%colorCountp];           
            var curVal=f(params.name)  
            if (curVal==LastVal){               
                 color= colorList[colorIndex%colorCountp]; 
            }else{
                colorIndex=(colorIndex+1)%colorCountp
                color= colorList[colorIndex]; 
            }
            LastVal=curVal        
            return  color;        
        }     
    }
    //对X轴数值进行处理的
    function xAxisFormatter(value){
        if (typeof value == "string"){
            var indexStr=value.indexOf("-")    
            return value.substring(0,indexStr)
        }
        return value
    }