vue echarts 柱状图x轴取消高亮

在 Vue 与 ECharts 结合使用时，如果你想在柱状图的 X 轴上禁用点击事件以取消数据系列的高亮显示，你可以通过设置 ECharts 的 `emphasis` 对象来控制这个功能。ECharts 提供了一个名为 `itemStyle` 的配置项，其中有一个 `emphasis` 子属性，可以进一步定制鼠标悬停和点击时的样式。

首先，在 Vue 中引用 ECharts 的依赖，并创建一个柱状图实例：

<template>
  <div id="chart" ref="myChart"></div>
</template>

<script>
import { ECharts } from 'echarts-for-vue'

export default {
  components: {
    ECharts
  },
  data() {
    return {
      chartData: ... // 填充你的图表数据
    }
  },
  mounted() {
    this.renderChart()
  },
  methods: {
    renderChart() {
      const myChart = this.$refs.myChart
      const options = {
        series: [
          {
            type: 'bar', // 或者其他的柱状图类型
            data: this.chartData,
            emphasis: {
              itemStyle: { // 配置高亮样式
                normal: {}, // 正常状态下保持不变
                emphasis: {} // 移除高亮
              }
            }
          }
        ],
        xAxis: {
          // 其他X轴配置...
        }
      };
      myChart.setOption(options)
    }
  }
}
</script>

在这里，我们移除了 `emphasis` 对象中的 `normal` 和 `emphasis` 属性，这样就禁止了点击时的数据系列高亮效果。如果你只想禁用悬停高亮，只需去掉 `emphasis.itemStyle.emphasis` 即可。