首页 前端知识 Echarts 柱状图聚焦

Echarts 柱状图聚焦

2024-10-30 21:10:28 前端知识 前端哥 740 834 我要收藏

聚焦功能focus,Echarts版本需要≥v5.0.0`

柱条与刻度标签联动聚焦

在这里插入图片描述
绘制一个简易的柱状图

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',
    emphasis: {
      focus: true // 聚焦
    }
  }
]

设置emphasis.focustrue,会触发聚焦效果,默认聚焦效果只会出现在柱条上,x轴标签不会跟着一起联动。
在这里插入图片描述
需要结合事件处理函数on来实现

myChart.on('mouseover', param => {
  myChart.dispatchAction({
    type: "highlight",
    dataIndex: param.dataIndex
  })
  // 通过修改文字颜色实现聚焦效果
  myChart.setOption({
    xAxis: {
      axisLabel: {
        color: (value, index) => {
          return index === param.dataIndex ? '#333' : '#eee'
        }
      }
    }
  })
})
// 鼠标移出恢复
myChart.on('mouseout', param => {
  myChart.dispatchAction({
    type: "downplay"
  })
  myChart.setOption({
    xAxis: {
      axisLabel: {
        color: (value, index) => {
          return '#333'
        }
      }
    }
  })
})

设置xAxis.triggerEvent开启标签响应鼠标事件

xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  triggerEvent: true
}

多柱条相同系列联动

在这里插入图片描述
注意要设置系列名

xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
  type: 'value'
},
series: [
  {
    name: '上月',
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    emphasis: {
      focus: true
    }
    
  },
  {
    name: '本月',
    data: [98, 123, 152, 110, 90, 160, 120],
    type: 'bar',
    emphasis: {
      focus: true
    }
  }
]

同一个系列高亮

myChart.on('mouseover', param => {
  myChart.dispatchAction({
    type: "highlight",
    seriesName: param.seriesName
  });
})
// 这里不需要设置鼠标移出事件也会自动恢复
// myChart.on('mouseout', param => {
//   myChart.dispatchAction({
//     type: "downplay"
//   })
// })
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19677.html
评论
发布的文章

JSON:API Normalizer 项目教程

2024-10-30 21:10:43

json2html 项目教程

2024-10-30 21:10:41

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!