echarts的柱状图如何赋值

在 ECharts 里给柱状图赋值，一般要借助配置项中的 `series` 数组来设定数据。以下是一个简单示例，展示怎样创建并给 ECharts 柱状图赋值。步骤 1. 引入 ECharts 库：可以通过 CDN 或者本地文件引入。 2. 准备 DOM 容器：创建一个用于显示图表的 DOM 元素。 3. 初始化 ECharts 实例：使用 `echarts.init` 方法初始化实例。 4. 配置图表选项：设定 `xAxis`、`yAxis` 和 `series` 等选项。 5. 赋值数据：在 `series` 数组里的对象中设置 `data` 属性。 6. 渲染图表：使用 `setOption` 方法渲染图表。代码示例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ECharts Bar Chart</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> </head> <body>  <div id="main" style="width: 600px;height:400px;"></div> <script> // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('main')); // 配置图表选项 var option = { // x 轴配置 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // x 轴数据 }, // y 轴配置 yAxis: { type: 'value' }, // 系列配置 series: [{ name: '销量', type: 'bar', data: [120, 200, 150, 80, 70, 110, 130] // 柱状图数据 }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 代码解释 - `xAxis` 的 `data` 属性定义了 x 轴的类目数据。 - `series` 数组中的对象代表一个系列，`type` 为 `bar` 表示柱状图，`data` 数组存放具体的柱状图数据。 - `yAxis` 是一个数值轴，用于显示数据的大小。动态赋值要是你想动态更新数据，可使用 `setOption` 方法重新设置配置项。 ```javascript // 新的数据 var newData = [150, 220, 180, 100, 90, 130, 160]; // 更新 series 中的数据 option.series[0].data = newData; // 重新渲染图表 myChart.setOption(option); ``` 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 要确保 `xAxis` 和 `series` 中的数据长度一致，不然图表可能无法正确显示。 2. 动态更新数据时，要注意更新的是正确的 `series` 对象，避免更新错误导致数据显示异常。 3. 引入 ECharts 库时，要确保版本兼容，避免因版本不兼容引发的问题。 [2026-01-30 17:25:19 | AI写代码神器 | 855点数解答]

echarts的柱状图如何赋值

服务商

更多选项

快捷项

直通车