首页 > 其他分享 >echarts柱状图柱体圆角

echarts柱状图柱体圆角

时间:2023-01-19 17:55:26浏览次数:53  
标签:圆角 list 柱状图 value length let echarts

init_chuangkou_top_list_chart:function(ckmc_list,value_list){
                let myChart = this.$echarts.init(document.getElementById('chuangkou_top_list'));
                var option;
                option = {
                    xAxis: {
                        type: 'category',
                        data: ckmc_list,
                        show: true,
                        axisLabel: {
                            textStyle: {
                                show:true,
                                fontFamily:'微软雅黑',
                                color: "#fff",
                                fontSize: '12',
                            },    
                            // interval:0, //控制X轴刻度全部显示
                            // rotate:30, //倾斜角度
                            interval: 0,  
                            formatter:function(value){ 
                                let len = value.length;
                                let length = 4; //控制一行显示个数
                                let num = Math.ceil(len/length);//循环次数
                                if(num > 1){
                                    let str = '';
                                    for(let i = 0;i<num;i++){
                                        str += value.substring(i*length,(i+1)*length) + '\n';
                                    }
                                    return str;
                                }else{
                                    return value;
                                } 
                            } 
                        }
                    },
                    yAxis: {
                        type: 'value',
                        show: false
                    },
                    color: ['#249A65', '#4BD2EF', '#227176', '#FFFFFF', '#F5A721','#249A65','#249A65'],
                    series: [
                        {
                            data: value_list,
                            type: 'bar',
                            colorBy:'data',
                            label:{
                                show : true
                            },
                            itemStyle: {
                                barBorderRadius:[4,4,0,0]
                            }

                        }
                    ]
                };
                // console.log('------chuangkou_top_list');
                option && myChart.setOption(option);
            },

标签:圆角,list,柱状图,value,length,let,echarts
From: https://www.cnblogs.com/pansidong/p/17061906.html

相关文章