Echarts_总结

云深不知处

于 2019-11-20 10:39:00 发布

阅读量283

点赞数

CC 4.0 BY-SA版权

分类专栏： Echarts

本文链接：https://blog.csdn.net/u012485897/article/details/103157762

Echarts 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在ECharts中自定义柱状图的标题位置、颜色及内容，包括使用方法formatter进行个性化设置。同时，针对x轴数据过多导致显示不全的问题，提供了通过dataZoom组件实现x轴滚动查看的解决方案。

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

1.柱状图的标题[位置、内容自定义]

series: [{
		name: '标题',
		type: 'bar',
		data: titleArray,
		label: {
		    normal: {
		        position: 'top',
		        show: true,
                color:'rgb(1,1,1)',//设置标题的颜色
                //通过方法formatter自定义柱状图的标题
                formatter:function(param){
					return "第" + param.value + "名"
				}
			}
		}]
在option series下的label position的-设置柱状体的title的位置

(1). Inside自适应，柱状内部中央
     top 柱状外的正上方
     bottom 柱状外的正下方
     left 柱状外的左边
     right 柱状外的右边
(2).坐标[x，y]以柱状图的顶部为原点
(3).insideTop 柱状内部靠顶部
    insideBottom 柱状内部靠下方
    insideRight(柱状内部靠右边)，
    insideLeft(柱状内部靠左边)

2.因为目录过多导致x轴显示不下的问题

在option中加入以下代码，就可实现按x轴滚动查看

dataZoom: [{
    id: 'dataZoomX',
    type: 'inside',
    //设置x轴缩放比例
    start: 0,//x轴起始位置
    end:15,//显示比例
 }],