?? ECharts數據可視化魔法指南
?? ECharts：數據的藝術畫筆
生活類比：
想象ECharts是一家魔法餐廳，你只需告訴廚師(代碼)你想要的菜品類型(圖表類型)和口味偏好(配置項)，它就能將你的原料(數據)轉變成視覺盛宴。不同于普通餐廳，這家餐廳的菜品會根據食材的變化而自動調整(響應式)，甚至能根據顧客的互動改變形態(交互功能)。
?? ECharts基本使用流程
?? Hello World示例
<!DOCTYPE html>
<html>
<head><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body><!-- 1? 準備容器 --><div id="main" style="width: 600px; height: 400px;"></div><script>// 2? 初始化實例const chart = echarts.init(document.getElementById('main'));// 3? & 4? 準備配置和數據const option = {title: {text: '我的第一個圖表'},tooltip: {},legend: {data: ['銷量']},xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 5? & 6? 設置選項并渲染chart.setOption(option);</script>
</body>
</html>
?? ECharts配置系統：樂高積木式構建
mindmaproot((ECharts配置項))標題(title)主標題副標題圖例(legend)位置圖標提示框(tooltip)觸發方式格式化坐標軸(axis)x軸y軸系列(series)圖表類型數據視覺映射(visualMap)顏色范圍大小范圍交互(event)點擊縮放
生活類比：
ECharts的配置系統就像搭建樂高模型——每個配置項是一塊特定功能的積木。主體積木(series)決定你在建造什么(柱狀圖、折線圖)，裝飾積木(title、legend)增加細節，交互積木(tooltip、事件)讓模型具有動態特性。這些積木可以獨立調整，也能協同工作，創造出精確符合你期望的視覺效果。
?? ECharts常用圖表：視覺百寶箱
?? 展示基礎圖表類型
// 柱狀圖示例
const barOption = {xAxis: {type: 'category',data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(220, 220, 220, 0.8)'}}]
};// 折線圖示例
const lineOption = {xAxis: {type: 'category',data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}]
};// 餅圖示例
const pieOption = {tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: '訪問來源',type: 'pie',radius: '50%',data: [{ value: 1048, name: '搜索引擎' },{ value: 735, name: '直接訪問' },{ value: 580, name: '郵件營銷' },{ value: 484, name: '聯盟廣告' },{ value: 300, name: '視頻廣告' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};
生活類比：
不同類型的圖表就像廚房中的各種烹飪工具：
- 柱狀圖像多格冰格模具，清晰分隔不同類別的對比
- 折線圖像溫度計讀數記錄，展示數據隨時間的變化趨勢
- 餅圖像分切的蛋糕，直觀顯示整體中各部分的占比
- 散點圖像撒在畫布上的星星，揭示數據點之間的分布關系和可能的聚類
?? ECharts數據流：從原始到視覺的魔法轉化
?? 數據轉換示例
// 原始數據(可能來自API)
const rawData = [{ month: 'Jan', sales: 1000, profit: 500 },{ month: 'Feb', sales: 1500, profit: 70
