ECharts 企業級數據視覺化完整指南：從入門到實戰的全方位解析

ECharts 核心優勢與生態定位

ECharts (Enterprise Charts) 是百度開源的純 JavaScript 圖表庫，基於輕量級 Canvas 引擎 ZRender，支援 PC/移動端全平台、IE6+ 全瀏覽器相容。核心特色：

• 12 大圖表類型 + 7 類交互組件自由組合
• 創新拖拽重計算、數據視圖、值域漫游交互
• 模組化按需載入，極致效能與體積平衡
• 豐富圖表：折線/柱狀/散點/K線/餅圖/雷達/地圖/儀表盤/漏斗/詞雲/樹圖/矩形樹/韋恩圖等

核心名詞體系

五分鐘快速上手：靜態數據柱狀圖

<!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="main" style="width: 600px; height: 400px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('main'));
        var option = {
            title: { text: '某地區蒸發量與降水量', subtext: '純屬虛構' },
            tooltip: { trigger: 'axis' },
            legend: { data: ['蒸發量', '降水量'] },
            toolbox: { 
                show: true, 
                feature: { 
                    magicType: { type: ['line', 'bar'] },
                    saveAsImage: {} 
                } 
            },
            xAxis: { type: 'category', data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] },
            yAxis: { type: 'value' },
            series: [
                { name: '蒸發量', type: 'bar', data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] },
                { name: '降水量', type: 'bar', data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] }
            ]
        };
        chart.setOption(option);
    </script>
</body>
</html>

企業級實戰：Spring MVC + MyBatis + ECharts 動態數據大屏

專案架構

核心實體與 DAO

// Company.java
@Entity @Table(name = "company_stats")
public class Company {
    @Id @GeneratedValue private Integer id;
    private Integer sales;    // 銷量
    private Integer yield;    // 產量
    private String week;      // 週期
    // getter/setter 略
}

// CompanyDao.java
@Repository
public interface CompanyDao {
    @Select("SELECT * FROM company_stats ORDER BY id")
    List findAll();
    
    @Select("SELECT sales FROM company_stats ORDER BY id")
    List findAllSales();
}

Service 與 Controller (Struts2 風格)

// CompanyAction.java
@Controller @Scope("prototype")
public class CompanyAction extends ActionSupport {
    @Resource private CompanyService companyService;
    private String result; // JSON 字串
    
    // 柱狀圖頁面
    public String barView() {
        result = new Gson().toJson(companyService.findAll());
        return "barView";
    }
    
    // 異步 API
    public String barData() {
        result = new Gson().toJson(companyService.findAll());
        return SUCCESS; // struts.xml 配置 type="json"
    }
    
    // 餅圖頁面
    public String pieView() { ... }
}

前端動態渲染：bar_db.jsp

<%@ page pageEncoding="utf-8"%>
<% String ctx = request.getContextPath(); %>
<html>
<head>
    <script src="<%=ctx%>/js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 100%; height: 500px;"></div>
    <script>
        var list = ${result}; // Struts2 將 result 註入頁面上下文
        var weeks = [], sales = [], yields = [];
        for (var i = 0; i < list.length; i++) {
            weeks.push(list[i].week);
            sales.push(list[i].sales);
            yields.push(list[i].yield);
        }
        
        var chart = echarts.init(document.getElementById('main'));
        var option = {
            title: { text: '公司週銷量產量趨勢', left: 'center' },
            tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
            legend: { data: ['銷量', '產量'] },
            toolbox: { feature: { dataView: {}, magicType: { type: ['line', 'bar'] }, saveAsImage: {} } },
            xAxis: { type: 'category', data: weeks, axisTick: { alignWithLabel: true } },
            yAxis: { type: 'value' },
            series: [
                { name: '銷量', type: 'bar', barWidth: '60%', data: sales,
                  markPoint: { data: [{type: 'max'}, {type: 'min'}] },
                  markLine: { data: [{type: 'average'}] } },
                { name: '產量', type: 'line', data: yields }
            ]
        };
        chart.setOption(option);
    </script>
</body>
</html>

餅圖實現：pie_db.jsp

<script>
var list = ${result};
var weeks = [], pieData = [];
$.each(list, function(i, item) {
    weeks.push(item.week);
    pieData.push({ value: item.yield, name: item.week });
});

var chart = echarts.init(document.getElementById('main'));
var option = {
    title: { text: '週產量佔比', subtext: '虛構數據', x: 'center' },
    tooltip: { trigger: 'item', formatter: '{a} 
{b}: {c} ({d}%)' },
    legend: { orient: 'vertical', left: 'left', data: weeks },
    series: [{
        name: '產量', type: 'pie', radius: '55%', center: ['50%', '60%'],
        data: pieData,
        itemStyle: { emphasis: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.5)' } }
    }]
};
chart.setOption(option);
</script>

模組化載入最佳實踐 (ECharts 5+)

<!-- 推薦：單檔案完整版（含 AMD 載入器） -->
<script src="echarts.min.js"></script>

<script>
require(['echarts', 'echarts/chart/bar', 'echarts/chart/line'], function(ec) {
    var chart = ec.init(document.getElementById('main'));
    chart.setOption({ ... });
});
</script>

<!-- 按需載入減小體積 -->
<!-- dist/chart/bar.js, line.js, pie.js 等獨立模組 -->

實例核心 API 速查

進階配置精要

series 通用屬性

• type：'line'/'bar'/'pie'/'scatter'/'map'...
• data：陣列，元素為數值或 {value, name, itemStyle...}
• label：文字標籤顯示設定 {show: true, position: 'top'}
• markPoint/markLine/markArea：標註極值/平均線/區域
• animationDuration/updateAnimation：動畫微調

餅圖專屬配置

• radius：['40%', '70%'] 環形圖，單值為實心
• center：['50%', '50%'] 圓心座標
• roseType：'radius'/'area' 南丁格爾玫瑰圖
• avoidLabelOverlap：標籤防重疊

常見問題與優化建議

1. 大數據量渲染：開啟 progressive 漸進式渲染、使用 large: true 優化散點/柱狀
2. 響應式容器：監聽 window.resize 呼叫 chart.resize()
3. 主題定制：使用 echarts/theme/ 或自訂 color 陣列
4. SSR 支援：Node 端用 echarts/node-canvas 預渲染
5. TypeScript：安裝 @types/echarts 享受型別提示