ECharts怎么配置

ECharts 是一个基于 JavaScript 的可视化图表库，配置方式比较灵活。下面我按从入门到常用配置给你一个清晰说明，你可以按需取用。

一、基础使用（快速上手）

1. 引入 ECharts

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

2. 准备容器

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

3. 初始化并配置

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

// 配置项
const option = {
  title: {
    text: '示例柱状图'
  },
  tooltip: {},
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [120, 200, 150, 80, 70]
    }
  ]
};

// 渲染
chart.setOption(option);

二、核心配置项说明

1️⃣ title（标题）

title: {
  text: '主标题',
  subtext: '副标题',
  left: 'center'
}

2️⃣ tooltip（提示框）

tooltip: {
  trigger: 'axis', // 或 'item'
  formatter: '{b}: {c}'
}

3️⃣ legend（图例）

legend: {
  data: ['销量'],
  top: 30
}

4️⃣ xAxis / yAxis（坐标轴）

xAxis: {
  type: 'category',
  data: ['A', 'B', 'C']
},
yAxis: {
  type: 'value'
}

常见类型：

• value：数值轴
• category：类目轴
• time：时间轴

5️⃣ series（系列，最重要）

series: [
  {
    name: '销量',
    type: 'bar', // line / pie / scatter 等
    data: [10, 20, 30]
  }
]

三、常见图表配置示例

✅ 折线图

series: [{
  type: 'line',
  data: [10, 30, 25, 40]
}]

✅ 饼图

series: [{
  type: 'pie',
  radius: '50%',
  data: [
    { value: 40, name: 'A' },
    { value: 60, name: 'B' }
  ]
}]

✅ 多系列柱状图

series: [
  { name: '2023', type: 'bar', data: [1, 2, 3] },
  { name: '2024', type: 'bar', data: [3, 2, 1] }
]

四、响应式 & 高级配置

1. 自适应窗口

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

2. 主题

echarts.init(dom, 'dark');

3. 动态更新数据

chart.setOption({
  series: [{ data: [5, 10, 15] }]
});

五、在框架中使用

• Vue：ref + onMounted
• React：useRef + useEffect
• Vue3 推荐：vue-echarts

如果你愿意，可以告诉我：

• 使用的框架（Vue / React / 原生）
• 想画什么图（折线 / 柱状 / 地图 / 漏斗）
• 是否有后端数据

我可以直接给你完整可运行示例。