echarts的柱状图数据交互

### ECharts 柱状图数据交互实现方法

#### 初始化ECharts环境并加载数据
为了使ECharts柱状图能够动态展示来自服务器的数据，在前端页面中需先引入必要的资源文件，包括ECharts库本身。当涉及到Vue框架时，则可以在`<script>`标签内安装依赖或利用CDN链接完成加载工作[^3]。

<!-- 引入 echarts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

对于基于Ajax请求获取远程服务端返回JSON格式的结果集而言，通常会定义一个类似于下面结构的对象用于接收解析后的坐标轴数值：

// 定义响应模型
class EchatsRes {
    constructor(xData, yData) {
        this.xData = xData;
        this.yData = yData;
    }
}

此部分逻辑对应于后端传输过来的信息封装形式[^4]。

#### 设置图表配置项与绑定事件监听器
创建好DOM节点作为绘图区域之后，下一步就是初始化图表实例并向其传递选项参数。这里特别需要注意的是要为series系列设置type属性值为'bar'表示柱形图；同时可以借助emphasis重点样式突出显示被选中的条目效果[^1]。

另外，为了让用户操作更加友好直观，还可以注册click类型的回调处理器以便捕捉到具体的点击动作发生位置及其关联信息。例如下述代码片段展示了如何捕获单击事件并将所选项目的名称打印出来：

myChart.on('click', function (params) {
    console.log(params.name);
});

上述机制允许开发者根据实际需求进一步处理这些反馈信号，比如跳转至详情页查看更详尽的内容或是更新其他组件的状态等。

#### 发起异步请求取得最新统计数据
最后一步便是编写AJAX调用来拉取最新的业务指标概况。考虑到兼容性和易读性的因素，推荐采用fetch API发起GET请求，并将成功接收到的有效载荷转换成之前提到过的实体对象实例化结果供后续渲染流程使用。

async function fetchData() {
    const response = await fetch('/api/data');
    const data = await response.json();
    return new EchatsRes(data.xAxis, data.series);
}

function renderChart(chartContainerId, chartData) {
    var myChart = echarts.init(document.getElementById(chartContainerId));
    
    let option = {
      xAxis: {
          type: 'category',
          data: chartData.xData,
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          name:'销量',
          type:'bar',
          data: chartData.yData
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // 添加点击事件监听
    myChart.on('click', function (params) {
        alert(`您选择了 ${params.name}`);
    });
}

document.addEventListener("DOMContentLoaded", async () => {
    try {
        let res = await fetchData();
        renderChart('main-chart', res);
    } catch(error){
        console.error('Error fetching or rendering the chart:', error);
    }
});

这段脚本实现了从网络接口处抓取消费者行为分析报告的关键要素——时间戳序列以及对应的销售量记录，并最终呈现在可视化界面上让用户一目了然地观察趋势变化情况。