Echarts 柱状图聚焦

最新推荐文章于 2024-02-17 15:59:30 发布

ZionHH

最新推荐文章于 2024-02-17 15:59:30 发布

阅读量733

点赞数 1

分类专栏： ECharts 文章标签： echarts 前端 focus 联动

本文链接：https://blog.csdn.net/z291493823/article/details/130600505

版权

ECharts 专栏收录该内容

17 篇文章 11 订阅

订阅专栏

聚焦功能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.focus为true，会触发聚焦效果，默认聚焦效果只会出现在柱条上，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"
//   })
// })