Incubator-echarts: gráfico de barras echarts3, después de configurar el parámetro barWidth, barMaxWidth no funciona

Creado en 4 ago. 2016  ·  3Comentarios  ·  Fuente: apache/incubator-echarts

Para facilitarnos la reproducción y corrección de errores, siga las especificaciones a continuación para describir su problema.

Resumen de una línea

Para gráficos de barras echarts3, después de establecer el tamaño de barWidth, establezca el tamaño de barMaxWidth. Cuando el tamaño de barWidth excede el tamaño de barMaxWidth, la visualización real se basa en barWidth, es decir, el límite de barMaxWidth establecido aquí no funciona

Versión y entorno

  • Versión ECharts: 3.2.2
  • Versión del navegador (versión del navegador): versión de Chrome 35.0.1916.114 m
  • Tipo y versión del sistema operativo (versión del sistema operativo): versión insignia de win7

    pasos para reproducir

1.1. Introduzca el paquete js de echart3.2.2,
2.atributo de opción ver más abajo

Comportamiento esperado

En un gráfico de barras, después de establecer barWidth y agregar el límite de barMaxWidth, si barWidth excede el rango, el barMaxWidth prevalecerá.

Qué salió mal

Elemento de configuración ECharts (opción ECharts)

Pegue su opción a continuación y tenga cuidado de no eliminar las palabras `` javascript y el final '' a continuación. La mejor opción es que podamos ejecutar directamente. Cómo obtener opciones operativas, consulte las pautas para contribuir arriba
option = {
title : {
                show : true,
                text : '城市天气预报',
                subtext : '杭州天气',
                left : 'center',
                top : 'bottom',
            },
            grid : {
                left : 50,
                top : 60,
                right : 150,
                bottom : 160,
                borderWidth : 0,
            },
            tooltip : {
                show : true,
                showContent : true,
                trigger : 'item',
                triggerOn : 'mousemove',
                formatter : '',
                islandFormatter : '{a} < br/>{b} : {c}',
            },
            legend : {
                show : true,
                orient : 'horizontal',
                left : 'center',
                top : "top",
                selectedMode : true,
                data : [ {
                    name : '蒸发量',
                }, {
                    name : '蒸发量2',
                } ],
            },
            toolbox : {
                show : false,
                orient : 'horizontal',
                feature : {
                    dataZoom : {
                        show : false,
                    },
                    dataView : {
                        show : false,
                        readOnly : false,
                    },
                    magicType : {
                        show : false,
                    },
                    restore : {
                        show : false,
                    },
                    saveAsImage : {
                        show : false,
                    },
                }
            },
            xAxis : [ {
                show : true,
                type : 'category',
                boundaryGap : true,
                name : '',
                nameLocation : '',
                axisLine : {
                    show : true,
                    onZero : true,
                },
                axisTick : {
                    show : true,
                    onGap : false,
                    inside : false,
                },
                axisLabel : {
                    show : true,
                },
                splitLine : {
                    show : true,
                },
                splitArea : {
                    show : false,
                },
                data : ["2:00", "2:15", "2:30", "2:45", "3:00", "3:15", "3:30", "3:45", "4:15", "4:00", "4:30", "4:45"],
            }, ],

            yAxis : [ {
                show : true,
                type : 'value',
                boundaryGap : true,
            }, ],

            series : [ {
                name : '蒸发量',
                z : 0,
                type : 'line',
                data : ["3", "5", "6", "13", "12", "13", "19", "17", "25", "13", "16", "11"],
                markPoint : {
                    data : [ {
                        type : 'max',
                        name : '最大值'
                    }, {
                        type : 'min',
                        name : '最小值'
                    } ]
                },
                markLine : {
                    data : [ {
                        type : 'average',
                        name : '平均值'
                    } ]
                },
            }, {
                name : '蒸发量2',
                z : 0,
                type : 'bar',
                barWidth : 10,
                                barMaxWidth : 30,
                data : [ 13, 15, 17, 23, 22, 23, 29, 27, 25, 28, 22, 27 ],
                markPoint : {
                    data : [ {
                        type : 'max',
                        name : '最大值'
                    }, {
                        type : 'min',
                        name : '最小值'
                    } ]
                },
                markLine : {
                    data : [ {
                        type : 'average',
                        name : '平均值'
                    } ]
                },
            }, ],
}

Otra información (otros comentarios)

Por ejemplo: captura de pantalla o demostración en línea (JSFiddle / JSBin / Codepen) (por ejemplo: captura de pantalla o demostración en línea)

Todos 3 comentarios

barGap tampoco funcionó

barWidth tiene una prioridad más alta que barMaxWidth

Si la prioridad de barWidth es mayor que barMaxWidth, creo que esto no es comprensible, y solo puedo aceptar silenciosamente el hecho de que la prioridad de barWidth es mayor que barMaxWidth.

¿Fue útil esta página
0 / 5 - 0 calificaciones