echarts图表鼠标悬浮显示数据

最新推荐文章于 2024-04-08 16:46:45 发布

清水

最新推荐文章于 2024-04-08 16:46:45 发布

阅读量1.3w

点赞数 5

分类专栏：前端文章标签： echarts 前端 javascript

原文链接：https://blog.csdn.net/weixin_50418353/article/details/118937575

版权

前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

在 option 配置里添加 tooltip

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }],
   tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
     trigger: 'axis',
     backgroundColor: 'rgba(32, 33, 36,.7)',
     borderColor: 'rgba(32, 33, 36,0.20)',
     borderWidth: 1,
     textStyle: { // 文字提示样式
       color: '#fff',
       fontSize: '12'
     },
     axisPointer: { // 坐标轴虚线
       type: 'cross',
       label: {
           backgroundColor: '#6a7985'
       }
     },
   }
};