如何用echarts画柱状图

下面用 ECharts 画一个最基础的柱状图示例，从环境准备到完整代码，一步步说明。

一、引入 ECharts

方式 1：CDN（最简单）

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

方式 2：npm（项目中使用）

npm install echarts

import * as echarts from 'echarts';

二、准备 HTML 容器

<div id="chart" style="width: 600px; height: 400px;"></div>

三、初始化 ECharts 并画柱状图

<script>
  // 初始化
  const chart = echarts.init(document.getElementById('chart'));

  // 配置项
  const option = {
    title: {
      text: '月度销售额'
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: [120, 200, 150, 80, 170]
      }
    ]
  };

  // 渲染
  chart.setOption(option);
</script>

四、常见柱状图变体

1️⃣ 多系列柱状图

series: [
  {
    name: '产品A',
    type: 'bar',
    data: [120, 200, 150, 80, 170]
  },
  {
    name: '产品B',
    type: 'bar',
    data: [90, 140, 110, 60, 130]
  }
]

2️⃣ 横向柱状图

xAxis: { type: 'value' },
yAxis: { type: 'category', data: ['A', 'B', 'C'] },
series: [{ type: 'bar', data: [10, 20, 30] }]

3️⃣ 堆叠柱状图

series: [
  { name: '线上', type: 'bar', stack: 'total', data: [120, 200] },
  { name: '线下', type: 'bar', stack: 'total', data: [80, 100] }
]

五、响应式（窗口变化）

window.addEventListener('resize', () => {
  chart.resize();
});

六、完整最小示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts 柱状图</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>
  <script>
    const chart = echarts.init(document.getElementById('chart'));
    chart.setOption({
      xAxis: { type: 'category', data: ['A', 'B', 'C'] },
      yAxis: { type: 'value' },
      series: [{ type: 'bar', data: [10, 20, 30] }]
    });
  </script>
</body>
</html>

如果你有 具体数据 / 业务场景（如销售、成绩、财务），我可以帮你定制更合适的柱状图配置。