Echarts 柱状图聚焦

聚焦功能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"
//   })
// })复制