一、技术概述
1.1 定义
ECharts（Enterprise Charts）是由百度开源的数据可视化库，基于JavaScript实现，提供直观、交互丰富的图表展示方案。
1.2 核心特性
多端适配：支持PC/移动端响应式设计
图表类型：30+基础图表（折线/柱状/饼图等）和地理可视化
动态交互：数据缩放、拖拽、详情联动
扩展能力：通过插件支持WebGL/3D图表
二、快速入门
2.1 环境配置
2.2 基础示例（柱状图）
const chart = echarts.init(document.getElementById('chart-container')); chart.setOption({ xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: [120, 200, 150] }] });
三、核心配置解析
3.1 Option对象结构
{ title: {}, // 标题 legend: {}, // 图例 grid: {}, // 布局 xAxis/yAxis: {}, // 坐标轴 series: [] // 数据系列 }
四、最佳实践
性能优化：
大数据量使用large: true开启渐进渲染
定时刷新数据建议使用setOption的notMerge参数
常见问题：
容器未初始化：确保DOM加载完成后执行echarts.init
自适应失效：监听window.onresize并调用chart.resize()
五、扩展资源
官方示例库：gallery.echartsjs.com
主题编辑器：echarts-builder
