开发过程中的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 是否显示平滑曲线