echarts相关

最新推荐文章于 2024-04-03 06:20:08 发布

陌然回首7

最新推荐文章于 2024-04-03 06:20:08 发布

阅读量449

点赞数

文章标签： echarts

本文链接：https://blog.youkuaiyun.com/qq_35146059/article/details/121531590

版权

本文介绍了ECharts在柱状图中的几种高级配置方法，包括在柱状图顶部显示数字、设置横坐标字体竖直或倾斜显示，以及自定义柱状图颜色。同时，针对x轴文字显示不全的问题，提供了通过调整grid属性来改善视觉效果的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echats相关操作

1.柱状图上显示数字

series: [{
            name: '人数',
            type: 'bar',
            data: [],        //x轴对应列的值
            itemStyle: {        //上方显示数值
                normal: {
                    label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        textStyle: { //数值样式
                            color: 'black',
                            fontSize: 16
                        }
                    }
                }
            }
        }]

2.柱状图横坐标的字体竖着显示

xAxis ： {
             axisLabel:{
                  interval: 0,
                  formatter: function (value) {
                    //x轴的文字改为竖版显示
                    var str = value.split("");
                    return str.join("\n");
                  }
                },
}

3.柱状图横坐标的字体倾斜45°显示

xAixs : {
      // x轴文字倾斜
                   // x轴文字倾斜
                axisLabel:{
                  interval:0,
                  rotate:45,//倾斜度 -90 至 90 默认为0
                  margin:2,
                  textStyle:{
                    fontWeight:"bolder",
                    color:"#000000"
                  }
                }
}

4.柱状图改变颜色

var option= {
		color:['#98d87d','#ffd86e'],
		title: {
			text: 'xx统计',
			subtext: ''
		}
}

5.echarts 中x轴转为竖着显示显示不全的处理

y2 即控制x轴类目的高度的参数遂将grid加入option

var option= {
		grid:{
           x2:140,
           y2:150
      	},
}