效果图
<div v-if="flag" ref="chart" class="charts-box" />
更改option的formatter配置
option: {
// backgroundColor: new this.$echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
// offset: 0,
// color: '#f7f8fa'
// }, {
// offset: 1,
// color: '#cdd0d5'
// }]),
// title: {
// text: '检索热词',
// left: '0',
// top: '3%',
// textStyle: {
// height: 80,
// color: '#606266',
// fontSize: 18,
// fontWeight: 400,
// fontFamily: "Microsoft YaHei"
// }
// },
color:['#FF9514', '#3F9BF6', '#33A07B','#A776E4','#FFD491','#B3D8FF','#F78989','#FBC4C4','#A6D8CA','#FFD800','#8BA6FF','#DC4640'],
legend: {
// right: '10%',
// top: '3%',
data: []
},
grid: {
left: '8%',
top: '10%',
height:'75%',
// width:'80%'
},
xAxis: {
type: 'category',
splitLine: {
interval: 0,
lineStyle: {
type: 'dashed'
}
},
interval: 0,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#DCDFE6',
//这里是为了突出显示加上的
//横轴信息全部显示
}
},
axisLabel: {
fontWeight: 400,
fontFamily: 'Microsoft YaHei',
fontSize: 18,
color: '#303133',
margin: 20,
showMinLabel: true,
showMaxLabel: true,
align: 'left',
interval: 0,//使x轴文字显示全
rotate:-30,
},
// scale: false,
data: []
},
// visualMap: {
// show: false,
// inRange: {
// symbolSize: [20, 50]
// }
// },
yAxis: {
type: 'category',
//重点一定要设置y轴的点击事件
triggerEvent: true,
axisTick: {
show: false
},
interval: 0,
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: '#DCDFE6',
//这里是为了突出显示加上的
//横轴信息全部显示
}
},
axisLabel: {
fontWeight: 400,
fontFamily: 'Microsoft YaHei',
fontSize: 18,
color: '#303133',
showMinLabel: true,
showMaxLabel: true,
// align: 'left',
interval: 0,//使x轴文字显示全
margin:20,
//此处是重点实现文字实现换行以及过长...
formatter: function (params) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 6; //一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
//两行展示
for (var p = 0; p < 2; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
//换行时....
newParamsName = newParamsName.substring(0, newParamsName.length-1)+'...'+' '
} else {
newParamsName = params;
}
//调取生成浮窗的函数
that.extension(that.chart)
return newParamsName
},
},
data: [],
scale: false
},
series: {
type: 'scatter',
// data: []
}
// SDATA.map((d, i) => {
// return {
// type: 'scatter',
// label: {
// show: true,
// // formatter: function (params) {
// // return data[params.seriesIndex].num;
// // }
// },
// symbolSize:d[2]*5,
// data:d,
// itemStyle:{
// color:this.getColor(d[0])
// }
// // data: [
// // [
// // xData.indexOf(d.tech),
// // yData.indexOf(d.business)
// // ]
// // ]
// }
// })
}
生成toolTip的函数
extension(chart) {
// 注意这里,是以X轴显示内容过长为例,如果是y轴的话,需要把params.componentType == 'xAxis'改为yAxis
// 判断是否创建过div框,如果创建过就不再创建了
// 该div用来盛放文本显示内容的,方便对其悬浮位置进行处理
var elementDiv = document.getElementById('extension')
if (!elementDiv) {
var div = document.createElement('div')
div.setAttribute('id', 'extension')
div.style.display = 'block'
document.querySelector('html').appendChild(div)
}
chart.on('mouseover', function (params) {
if (params.componentType == 'yAxis') {
//用来判断需要toolTip的时候,文字长度大于11时才会出现
if(params.value.length > 11) {
var elementDiv = document.querySelector('#extension')
//设置悬浮文本的位置以及样式
var elementStyle =
'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
elementDiv.style.cssText = elementStyle
elementDiv.innerHTML = params.value
document.querySelector('html').onmousemove = function (event) {
var elementDiv = document.querySelector('#extension')
var xx = event.pageX - 10
var yy = event.pageY + 15
// console.log('22', xx)
elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px'
}
}
}
})
chart.on('mouseout', function (params) {
//注意这里,我是以X轴显示内容过长为例,如果是y轴的话,需要改为yAxis
if (params.componentType == 'yAxis') {
var elementDiv = document.querySelector('#extension')
elementDiv.style.cssText = 'display:none'
}
})
},