开发过程中的echarts参数记录_常用的echarts配置_随时更新的前端图表
2024-11-24 03:40:25
echarts的每个参数都可以做一篇文章,此文章主要记录在开发过程中需要用到的某些配置,做一个记录
1548

*数据点过多,并且宽度过小的话,会有部分点位无法hover

legend: {
	textStyle: {
		color: '#666'
	},
	itemGap: 24,
	data:[]
}

legend:操作栏,用户控制此条线是否显示

textStyle:操作栏的字体颜色

itemGap:每个操作栏的间隔

data:标题数据

注意:

*文字长度应该一样 比如01与10 和 1与10 他们的长度是不一样的

xAxis: {
	type: 'category',
	data: [],
	axisLabel: {
		formatter: function(value) {
			return value.split(' ')[1];
		},
		interval: 35
	},
    boundaryGap: false
},

xAxis:x轴的配置

xAxis.data:x轴数据,例如 1:00 2:00 3:00

xAxis.axisLabel:x轴文本

xAxis.axisLabel.interval:x轴显示的间隔,例如每五分钟一个点,设置35则可以显示三小时作为一个刻度

xAxis.axisLabel.formatter:显示刻度,可以格式化显示文本

xAxis.boundaryGap:true显示在刻度中间,false显示在刻度下面

tooltip: {
	backgroundColor: 'rgba(255,255,255,0.95)',
	padding: 12,
	axisPointer: {
		type: 'line',
		z: 2,
		lineStyle: {
			type: 'dashed',
			width: 0.5
		}
	},
	extraCssText: 'box-shadow: 2px 6px 16px 0px #D9D9D9;',
	formatter: params => {
		return  `<div >test</div>`;
	},
	trigger: 'axis'
}

tooltip:悬浮框样式

tooltip.backgroundColor:悬浮框背景

tooltip.padding:内边距

tooltip.axisPointer:hover上去图标竖线样式

tooltip.axisPointer.z:此值用于显示竖线是否在最上层

tooltip.extraCssText:悬浮框阴影

tooltip.formatter:悬浮框格式化内容,可传入html

series: [{
	name: '',
	data: [],
	type: 'line',
	showSymbol: false,
	smooth: true,
	yAxisIndex: 0
}]

series:y轴的数据

series.showSymbol:是否显示数据点

series.smooth 是否显示平滑曲线