echarts配置相关

最新推荐文章于 2023-06-08 10:26:53 发布

WebCsDn_TDCode

最新推荐文章于 2023-06-08 10:26:53 发布

阅读量224

点赞数

CC 4.0 BY-SA版权

分类专栏： Echarts 文章标签： echarts 配置

本文链接：https://blog.youkuaiyun.com/qq_42396791/article/details/98619604

Echarts 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍如何使用ECharts进行图表的高级定制，包括调整图表与div间的留白、设置xy轴字体颜色与大小、配置网格线、实现指数倍增长的y轴、线条上显示文字、自定义工具栏及图例组件的位置等。通过这些技巧，可以大幅提升图表的视觉效果和信息传达效率。

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

1.调整图表与div间上下左右留白，则设置grid属性

grid:{
   x:25,
   y:45,
   x2:5,
   y2:20,
   borderWidth:1
},
//或者
grid: {
 left: '3%',
 right: '4%',
 bottom: '3%',
 containLabel: true
},

2.xy轴的字体颜色大小，坐标线颜色，以及网格线的设置

xAxis和yAxis 添加

axisLabel: {
 textStyle: {color: '#f1f1f1'},//字体颜色
 interval:0,//横轴信息全部显示
 //rotate:-15,//-15度角倾斜显示  
 formatter:function(val){//多余省略
  return val.length > 5 ? val.substr(0,4) + "..." : val;
 }
},
	         axisLine: {
	            //show: true,
	            lineStyle: {
	                type: 'solid',
	                color: '#3B526C',//下边线的颜色
	                width:'1'//坐标线的宽度
	            }
	        },
	        splitLine: {
	         	show: true,//垂直线
	            lineStyle:{
	                 color: '#3B526C'
	            }
	        }

设置yaxis的type为category类型的，然后把要展示的10的X次方放在data属性里实现指数倍增长

3.线条显示文字设置series中

label: {
	normal: {
	   show: true,
	   formatter: '{b}\n{d}%\n{c}(项)',
	   fontSize: 13
	}
}

4.工具栏toolbox

toolbox: {
	show: true,
	showTitle: false, // 隐藏默认文字，否则两者位置会重叠
	right: '22', //工具栏组件离容器右侧的距离
	feature: {
		dataView: { //列表
			show: true,
			readOnly: false
		},
		magicType: { //统计图
			show: true,
			type: ['line', 'bar'] //折线图/柱状
		},
		restore: { show: true }, //刷新
		saveAsImage: { show: true } //下载
	}
}

5.legend图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示