echarts 中主要的几个配置项功能，简易版

最新推荐文章于 2024-05-28 00:34:47 发布

原创最新推荐文章于 2024-05-28 00:34:47 发布 · 681 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3

echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了ECharts图表配置项的基本用法，包括tooltip、grid、xAxis、yAxis和series等关键配置项。通过实例展示了如何设置这些选项来实现丰富的图表交互效果。

以下是用到的几个主要的配置项和简单的介绍
一：tooltip，当鼠标移到图表时触发显示，类似hover效果

tooltip: {
				trigger: 'axis',  //  显示触发类型
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				  }
		  },

二：grid ，当前图表的相对位置，设置成距离顶部距离，或左边距离等

grid:{
				top:0,
				left:0,
				containLabel: true
			},

三：xAxis 图表中x轴坐标

xAxis: {
				type: 'value',
				position: 'top',    //这里可以配置X轴的位置，可以在最上面或最下面
				data: ['0','20%','40%','60%','80%','100%'],  //显示在x轴上的数据
				axisLabel: {   //坐标轴刻度标签的相关设置
					show: true,
					textStyle: {
						color: "#aaaaaa"
					}
				},
				axisLine: {   //坐标轴轴线相关设置。
					lineStyle: {
						color: "#aaaaaa"
					}
				},
				splitLine: {  //坐标轴在 grid 区域中的分隔线相关设置
					// show: false
					lineStyle: {
						// width: 4,
						color: "#efefef",
						type: "solid" //'dotted'虚线 'solid'实线
					}
				}
			},

四：yAxis 图表中Y轴坐标，配置和xAxis差不多
五：series 图表中我认为最主要的配置项

series: [{
			name: '地区覆盖度(100%)',   
				type: 'bar',   //图表类型
				label: {     
					show: true,
					position: 'right',
					color: "#000"
				},
				data: []    //图表中主要数据展示
			},
			{
				name: '人口覆盖度(100%)',
				type: 'bar',
				label: {
					show: true,
					position: 'right',
					color: "#000"
				},
				data: []
			},
		]

以上只是工作中个人理解，并不包含完全意思

echarts地址：https://echarts.apache.org/zh/option.html#title