echarts 柱状图悬浮显示信息

ECharts是一个基于JavaScript的开源可视化库，用于构建交互式的图表和数据可视化。柱状图是ECharts中的一种常见图表类型，可以通过悬浮显示信息来增强用户体验。

在ECharts中，可以通过设置tooltip属性来实现柱状图的悬浮显示信息。具体步骤如下：

1. 引入ECharts库和相关的样式文件。
2. 创建一个DOM容器，用于显示柱状图。
3. 初始化ECharts实例，并将DOM容器传入。
4. 定义柱状图的配置项，包括x轴、y轴、数据等。
5. 在配置项中设置tooltip属性，配置悬浮显示的内容和样式。
6. 调用ECharts实例的setOption方法，将配置项应用到柱状图上。

下面是一个示例代码，演示了如何使用ECharts创建一个柱状图，并设置悬浮显示信息：

// 引入ECharts库和相关的样式文件
import echarts from 'echarts';
import 'echarts/dist/echarts.min.css';

// 创建一个DOM容器
const container = document.getElementById('chart-container');

// 初始化ECharts实例
const chart = echarts.init(container);

// 定义柱状图的配置项
const option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E'],
  },
  yAxis: {
    type: 'value',
  },
  series: [{
    type: 'bar',
    data: [10, 20, 30, 40, 50],
  }],
  tooltip: {
    trigger: 'axis', // 设置触发类型为坐标轴轴线触发
    axisPointer: { // 坐标轴指示器配置项
      type: 'shadow', // 设置指示器类型为阴影指示器
    },
  },
};

// 调用setOption方法，将配置项应用到柱状图上
chart.setOption(option);

在上述代码中，通过设置tooltip的trigger属性为'axis'，表示当鼠标悬浮在柱状图上时触发显示信息。通过设置axisPointer的type属性为'shadow'，表示使用阴影指示器来显示信息。