结果:
options配置:
{ tooltip: { padding: 3, backgroundColor: '#ffffff', enterable: true, formatter: function(params, ticket, callback) { var htmlStr = `<div id="tooltipChart" ref='tooltipEchart' style='400px;height:300px'></div>` // 记得重新渲染的时候要进行防抖处理,避免性能影响 callback(that.setTooltipEchart()) //setTimeout(() => { // that.setTooltipEchart() // }, 500) return htmlStr }, position: function(point, params, dom, rect, size) { // 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下 // 提示框位置 var x = 0 // x坐标位置 var y = 0 // y坐标位置 // 当前鼠标位置 var pointX = point[0] var pointY = point[1] // 外层div大小 // var viewWidth = size.viewSize[0]; // var viewHeight = size.viewSize[1]; // 提示框大小 var boxWidth = size.contentSize[0] var boxHeight = size.contentSize[1] // boxWidth > pointX 说明鼠标左边放不下提示框 if (boxWidth > pointX) { x = 5 } else { // 左边放的下 x = pointX - boxWidth } // boxHeight > pointY 说明鼠标上边放不下提示框 if (boxHeight > pointY) { y = 5 } else { // 上边放得下 y = pointY - boxHeight } return [x, y] } }, backgroundColor: '#eff9f7', color: ['#16c7de'], grid: { left: '3%', top: '3%', right: '3%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: [1, 2, 3, 4, 5], splitLine: { lineStyle: { color: '#ade4d3' } }, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: '#16c7de' } }, yAxis: { type: 'value', axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: '#16c7de', formatter: function(params) { var val = '' if (params.length > 4) { val = params.substr(0, 4) + ' ' + params.substr(4) return val } else { return params } } } }, dataZoom: [ { type: 'inside', xAxisIndex: [0], start: 1, end: 100 } ], series: [ { name: '', type: 'bar', barMaxWidth: '50', itemStyle: { emphasis: { // 普通图表的高亮颜色 'color': '#ed6d43' } }, data: [12, 32, 14, 23, 12] } ] }
//初始化echarts
const that = this
that.syqkhzEchart = that.$echarts.init(
that.$refs.syqkhzEchart
)
window.onresize = function() {
that.syqkhzEchart.resize()
}
//设置echarts的点击事件,点击高亮,移出图表后保留高亮样式
that.setClickFn(that.syqkhzEchart, 'syqkhzIndex')
setClickFn代码://type,项目中有多个图表,type为当前图表的类型,用来区分;indexObj用来保存项目中某一个图表中高亮图形的dataIndex,用来移出图表后,保留高亮样式并显示 tooltip
setClickFn(echart, type) { const that = this echart.on('click', function(params) { // console.log(params) // 取消之前高亮的图形 that.indexObj[type] !== '' && echart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: params.currentIndex }) if (that.indexObj[type] === params.dataIndex) { that.indexObj[type] = '' } else { that.indexObj[type] = params.dataIndex } // 高亮当前图形 echart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: params.dataIndex }) // 显示 tooltip echart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: params.dataIndex }) that.getEchartData() }) // 移出当前整个图表 echart.on('globalout', function(params) { // 高亮当前图形 that.indexObj[type] !== '' && echart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: that.indexObj[type] }) // 显示 tooltip that.indexObj[type] !== '' && echart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: that.indexObj[type] }) }) },
悬浮框的图表渲染代码:
setTooltipEchart() { const that = this that.$nextTick(() => { that.tooltipEchart = that.$echarts.init(document.getElementById('tooltipChart')) that.tooltipEchart.setOption(that.syzbOption) }) },
有好的优化,欢迎留言