0

No puedo encontrar la manera de indicarle a la serie en qué punto del eje X dibujarse, La barra "Draw in Axis2" se dibuja en el "axis1".

Actual:

Actual

Esperado:

Esperado

Fiddle: http://jsfiddle.net/kfbp5j9z/1/

 // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

var lightBlue = {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: 'rgba(1, 50, 67, 1)' // 0% 处的颜色
    }, {
        offset: 1,
        color: 'rgba(1, 50, 67, 0.5)' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}
var gradientGreen = {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: 'rgba(1, 140, 50, 1)' // 0% 处的颜色
    }, {
        offset: 1,
        color: 'rgba(1, 140, 50, 0.5)' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}


var option = {
    "title": {
        "text": "Test", 
        "x": "center"
    }, 
    "tooltip": {
        "trigger": "axis", 
        "axisPointer": {
            "type": "shadow"
        },
    }, 
    "grid": {
        "borderWidth": 0, 
        "y2": 120
    }, 
    "legend": {
         data: ['axis1', 'axis2'],
    }, 
    "toolbox": {
        "show": true
    }, 
    "calculable": true, 
    "xAxis":
             
        {
            "data": ["axis1","axis2"],
            "type": "category", 
            "splitLine": {
                "show": true
            }, 
            "axisTick": {
                "show": false
            },
            "splitArea": {
                "show": false
            }, 

       
    }, 
    "yAxis": 
        {
            "axisLine": {"show": true}, 
            "axisTick": {"show": true}, 
        },
   
    "series": [
{
            "name": "test1", 
            "type": "bar", 
        
            "itemStyle": {
                "normal": {
                    "color": gradientGreen,
                    "label": {
                        "show": true, 
                        "textStyle": {
                            "fontFamily":"monospace",
                            "fontSize":"20",
                            "color": "white",
                        }, 
                        "position": "inside",
                      formatter : function(params) {
                                     return 'Test' 
	                                            }
                   }
                }
            }, 
            "data": [30]
        }, 
        {
            "name": "test2", 
            "type": "bar", 
            "itemStyle": {
                "normal": {
                    "color": lightBlue,
                    "label": {
                        "show": true, 
                        "textStyle": {
                            "fontFamily":"monospace",
                            "fontSize":"20",
                            "color": "white",
                        }, 
                        "position": "inside",
                      formatter : function(params) {
                                     return 'Draw in' + '\n' + 'Axis 2' 
	                                            }
                   }
                }
            }, 
            "data": [30]
        }, 
   
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.common.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

1 respuesta 1

0

no conosco muy bien la libreria pero testeando me di cuenta que espera 2 parametros por default si no los agrupa en la primera la solucion mas simple que vi es mandarle 2 en data 30,0 y 0,30

 // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

var lightBlue = {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: 'rgba(1, 50, 67, 1)' // 0% 处的颜色
    }, {
        offset: 1,
        color: 'rgba(1, 50, 67, 0.5)' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}
var gradientGreen = {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: 'rgba(1, 140, 50, 1)' // 0% 处的颜色
    }, {
        offset: 1,
        color: 'rgba(1, 140, 50, 0.5)' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}


var option = {
    /*"title": {
        "text": "Test", 
        "x": "center"
    },*/ 
    "tooltip": {
        "trigger": "axis", 
        "axisPointer": {
            "type": "shadow"
        },
    }, 
    "grid": {
        "borderWidth": 0, 
        "y2": 120
    }, 
    "legend": {
         data: ['test1', 'test2'],
    }, 
    "toolbox": {
        "show": true
    }, 
    "calculable": true, 
    "xAxis":
             
        {
            "data": ["axis1","axis2"],
            "type": "category", 
            "splitLine": {
                "show": true
            }, 
            "axisTick": {
                "show": false
            },
            "splitArea": {
                "show": false
            }, 

       
    }, 
    "yAxis": 
        {
            "axisLine": {"show": true}, 
            "axisTick": {"show": true}, 
        },
   
    "series": [
{
            "name": "test1", 
            "type": "bar", 
        
            "itemStyle": {
                "normal": {
                    "color": gradientGreen,
                    "label": {
                        "show": true, 
                        "textStyle": {
                            "fontFamily":"monospace",
                            "fontSize":"20",
                            "color": "white",
                        }, 
                        "position": "inside",
                      formatter : function(params) {
                                     return 'Test' 
	                                            }
                   }
                }
            }, 
            "data": [30,0]
        }, 
        {
            "name": "test2", 
            "type": "bar", 
            "itemStyle": {
                "normal": {
                    "color": lightBlue,
                    "label": {
                        "show": true, 
                        "textStyle": {
                            "fontFamily":"monospace",
                            "fontSize":"20",
                            "color": "white",
                        }, 
                        "position": "inside",
                      formatter : function(params) {
                                     return 'Draw in' + '\n' + 'Axis 2' 
	                                            }
                   }
                }
            }, 
            "data": [0,30]
        }, 
   
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.common.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.