1. 解决echarts图表x轴文字过长显示异常
//柱状图配置项数据
var barOption = {
tooltip: {
trigger: 'item'
},
grid: {
top: '20%',
left: '15%',
width: '80%',
height: '80%',
containLabel: true
},
xAxis: {
data:data,
axisLabel: {
show: true,
textStyle: {
fontSize: '12px',
color: '#fff',
},
interval: 0,
// formatter设置文字过长换行
formatter: function (value) {
var ret = "";//拼接加\n返回的类目项
var maxLength = 7;//每项显示文字个数
var valLength = value.length;//X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1)//如果类目项的文字大于5,
{
for (var i = 0; i < rowN; i++) {
var temp = "";//每次截取的字符串
var start = i * maxLength;//开始截取的位置
var end = start + maxLength;//结束截取的位置
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; //凭借最终的字符串
}
return ret;
} else {
return value;
}
}
},
axisLine: {
lineStyle: {
color: '#fff',
width: 1,
}
},
axisTick: {
alignWithLabel: true, //柱状图中心是否对齐刻度位置
show: false //不显示刻度
},
},
yAxis: {
//数值轴
type: 'value',
// 轴标签
axisLabel: {
show: true,
textStyle: {
fontSize: '12px',
color: '#fff',
}
},
// 轴线
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 1,
}
},
//网格线
splitLine: {
show: false,
},
axisTick: {
show: true,
alignWithLabel: true,
//x轴刻度线朝内
inside: true,
//x轴刻度线的长
length: 5
}
},
series: {
name: '',
type: 'bar',
barWidth: 20,
data: ['15', '13', '17'],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#3876cd'},
{offset: 0.5, color: '#45b4e7'},
{offset: 1, color: '#54ffff'}
]
),
},
},
},
}
2. tooltip鼠标移入出现页面抖动
在echarts的元素外面加一个div包裹起来，设置overflow:hidden，然后设置tooltip的属性 confine:true,。
tooltip: {
confine:true, trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
},
