echarts图表x轴文字显示不全问题及柱状图颜色调整

Posted 2022-05-04 caoxen

var myChart= echarts.init(document.getElementById(‘myChart‘));
    option = 
        title: 
            // text: ‘纯属虚构‘,
        ,
        tooltip: 
            trigger: ‘axis‘
        ,
        grid: 
            left: ‘5%‘,//左边距
            right: ‘5%‘,//走边距
            top: 10,//上边距
            bottom: 50,//下边距
            containLabel: true
        ,
        xAxis: [
            
                type: ‘category‘,
                data: xArray,
                axisLabel://把文字竖着放
                    formatter:function(value)
                        return value.split("").join("\n")
                    
                
            
        ],
        yAxis: [
            
                type: ‘value‘
            
        ],
        series: [
            
                name: ‘哈哈‘,
                type: ‘bar‘,
                // barWidth: 15,
                // barGap: ‘-10%‘,
                data: yArray,
                markPoint: 
                    data: [
                        name: ‘最高‘,
                        name: ‘最低‘
                    ]
                ,
                itemStyle: 
                    color: function(params) //柱状体颜色
                        // build a color map as your need.
                        var colorList = [
                            ‘#FF80AA‘,‘#F8568C‘,‘#C71848‘,‘#F61B63‘,‘#7ED321‘,
                            ‘#00C47B‘,‘#FF894A‘,‘#8782F7‘,‘#24A8BF‘,‘#1CCCB5‘,
                            ‘#158EFE‘,‘#68B671‘,‘#FEDB65‘,‘#2CD1C0‘,‘#AE54B5‘

                        ];
                        return colorList[params.dataIndex]
                    ,
                
            
        ]
    ;
    myChart.setOption(option);