ECharts入门学习教程，从入门到精通，ECharts 数据可视化入门介绍(1）

知识分享小能手2026-04-18 14:54

ECharts 数据可视化入门介绍

任务一：认识数据可视化

知识点1：数据可视化的概念和作用

概念

数据可视化是利用图形、图表等视觉元素将数据中的模式、趋势和关联直观呈现的技术。

作用
  • 清晰传达信息：一图胜千言
  • 发现隐藏规律：识别数据中的异常、聚类、趋势
  • 辅助决策：支持数据驱动的业务决策
  • 交互探索：允许用户动态分析数据
案例代码：对比表格 vs 图表
html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据可视化作用演示</title>
    <style>
        .container {
            display: flex;
            justify-content: space-around;
            padding: 20px;
        }
        .data-table {
            border-collapse: collapse;
            width: 300px;
        }
        .data-table th, .data-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        .chart-container {
            width: 400px;
            height: 300px;
        }
    </style>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 左侧：原始数据表格 -->
        <div>
            <h3>原始数据表格（不易发现趋势）</h3>
            <table class="data-table">
                <tr><th>月份</th><th>销售额(万)</th></tr>
                <tr><td>1月</td><td>120</td></tr>
                <tr><td>2月</td><td>135</td></tr>
                <tr><td>3月</td><td>142</td></tr>
                <tr><td>4月</td><td>130</td></tr>
                <tr><td>5月</td><td>168</td></tr>
                <tr><td>6月</td><td>189</td></tr>
            </table>
            <p>📊 问题：哪个月增长最快？趋势如何？不直观</p>
        </div>

        <!-- 右侧：可视化图表 -->
        <div>
            <h3>可视化图表（趋势一目了然）</h3>
            <div id="salesChart" class="chart-container"></div>
            <p>✅ 优势：一眼看出5-6月快速增长，整体呈上升趋势</p>
        </div>
    </div>

    <script>
        // 初始化图表实例
        var chartDom = document.getElementById('salesChart');
        var myChart = echarts.init(chartDom);
        
        // 配置图表选项
        var option = {
            title: {
                text: '上半年销售额趋势',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',  // 坐标轴触发提示框
                formatter: '{b}月销售额: {c} 万元'  // 自定义提示格式
            },
            xAxis: {
                type: 'category',  // 类目轴
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                name: '月份'
            },
            yAxis: {
                type: 'value',  // 数值轴
                name: '销售额(万元)'
            },
            series: [{
                data: [120, 135, 142, 130, 168, 189],
                type: 'line',  // 折线图
                smooth: true,  // 平滑曲线
                areaStyle: {    // 区域填充样式
                    color: 'rgba(64, 158, 255, 0.3)'
                },
                lineStyle: {
                    color: '#409EFF',
                    width: 3
                },
                itemStyle: {
                    color: '#FF6B6B'
                }
            }]
        };
        
        myChart.setOption(option);
    </script>
</body>
</html>

知识点2：数据可视化基本流程

流程图解
复制代码 
需求分析 → 数据采集 → 数据处理 → 选择图表 → 可视化编码 → 交互设计 → 测试优化
案例代码：完整流程演示
html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据可视化完整流程演示</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .step { background: #f5f5f5; margin: 10px 0; padding: 10px; border-left: 4px solid #409EFF; }
        #chart { width: 800px; height: 400px; margin: 20px auto; }
    </style>
</head>
<body>
    <h2>📋 数据可视化完整流程 - 电商销售分析案例</h2>
    
    <div class="step">
        <strong>步骤1：需求分析</strong> → 分析不同品类商品销售占比
    </div>
    <div class="step">
        <strong>步骤2：数据采集</strong> → 原始销售数据
        <pre>const rawData = [
    { category: "电子产品", sales: 45000 },
    { category: "服装鞋包", sales: 32000 },
    { category: "家居生活", sales: 28000 },
    { category: "美妆护肤", sales: 21000 }
];</pre>
    </div>
    <div class="step">
        <strong>步骤3：数据处理</strong> → 提取类别和数值，计算百分比
    </div>
    <div class="step">
        <strong>步骤4：选择图表</strong> → 饼图（适合展示占比关系）
    </div>
    
    <div id="chart"></div>
    
    <div class="step">
        <strong>步骤5：可视化编码</strong> → 颜色映射品类，角度映射销售额
    </div>
    <div class="step">
        <strong>步骤6：交互设计</strong> → 添加提示框、图例点击筛选
    </div>

    <script>
        // ========== 步骤2：原始数据 ==========
        const rawData = [
            { category: "电子产品", sales: 45000 },
            { category: "服装鞋包", sales: 32000 },
            { category: "家居生活", sales: 28000 },
            { category: "美妆护肤", sales: 21000 }
        ];
        
        // ========== 步骤3：数据处理 ==========
        // 提取类别和数值
        const categories = rawData.map(item => item.category);
        const salesValues = rawData.map(item => item.sales);
        
        // 计算总销售额和百分比
        const totalSales = salesValues.reduce((sum, val) => sum + val, 0);
        const percentages = salesValues.map(val => ((val / totalSales) * 100).toFixed(1));
        
        console.log("处理后数据：", { categories, salesValues, percentages });
        
        // ========== 步骤5-6：创建图表（可视化编码+交互设计） ==========
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);
        
        const option = {
            title: {
                text: '各品类销售占比分析',
                subtext: `总销售额: ¥${totalSales.toLocaleString()}`,
                left: 'center',
                textStyle: { fontSize: 16 }
            },
            tooltip: {
                trigger: 'item',  // 饼图使用 item 触发
                formatter: function(params) {
                    // 自定义提示框内容：品类 | 销售额 | 占比
                    return `${params.name}<br/>
                            销售额: ¥${params.value.toLocaleString()}<br/>
                            占比: ${params.percent}%`;
                }
            },
            legend: {
                orient: 'vertical',  // 图例垂直排列
                left: 'left',
                data: categories
            },
            series: [{
                name: '销售占比',
                type: 'pie',  // 饼图类型
                radius: '55%',  // 圆半径
                center: ['50%', '50%'],
                data: rawData.map(item => ({
                    name: item.category,
                    value: item.sales
                })),
                // 可视化编码：颜色映射
                color: ['#5470c6', '#fac858', '#ee6666', '#73c0de'],
                label: {
                    show: true,
                    formatter: '{b}: {d}%',  // {b}:品类名, {d}:百分比
                    fontWeight: 'bold'
                },
                emphasis: {  // 高亮效果
                    scale: true,
                    label: { show: true, fontWeight: 'bold' }
                }
            }],
            // 交互：工具箱（保存图片、数据视图等）
            toolbox: {
                feature: {
                    saveAsImage: { title: '保存为图片' },
                    dataView: { title: '查看数据', readOnly: true }
                }
            }
        };
        
        myChart.setOption(option);
        
        // 步骤7：测试优化（监听窗口大小变化，自适应图表）
        window.addEventListener('resize', () => myChart.resize());
    </script>
</body>
</html>

任务二：初识 ECharts

知识点3：ECharts 下载方式

四种下载方式对比
方式 命令/链接 适用场景
CDN https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js 快速原型、在线演示
npm npm install echarts --save Vue/React 项目
下载文件 官网下载 echarts.min.js 离线开发
在线构建 定制构建页面 按需打包减小体积
案例代码：CDN 引入与本地文件引入
html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 下载方式演示</title>
    
    <!-- 方式1：CDN 引入（推荐用于学习） -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    
    <!-- 方式2：本地文件引入（需要先下载到项目中） -->
    <!-- <script src="./lib/echarts.min.js"></script> -->
    
    <style>
        .demo-box {
            display: inline-block;
            width: 45%;
            margin: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .chart { width: 100%; height: 300px; }
    </style>
</head>
<body>
    <h2>📦 ECharts 下载方式对比演示</h2>
    
    <div class="demo-box">
        <h3>✅ CDN 引入方式</h3>
        <p>优点：无需下载，开箱即用</p>
        <div id="cdnChart" class="chart"></div>
        <code>&lt;script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"&gt;&lt;/script&gt;</code>
    </div>
    
    <div class="demo-box">
        <h3>✅ npm 安装方式（模拟）</h3>
        <p>命令：<code>npm install echarts --save</code></p>
        <div id="npmChart" class="chart"></div>
        <pre><code>// ES6 导入方式
import * as echarts from 'echarts';
// 或按需引入
import { init } from 'echarts';</code></pre>
    </div>

    <script>
        // 验证 ECharts 是否成功加载
        if (typeof echarts !== 'undefined') {
            console.log('ECharts 加载成功，版本：', echarts.version);
        }
        
        // 使用 CDN 方式创建图表
        const cdnChart = echarts.init(document.getElementById('cdnChart'));
        cdnChart.setOption({
            title: { text: 'CDN 方式创建的图表' },
            xAxis: { data: ['A', 'B', 'C'] },
            yAxis: {},
            series: [{ type: 'bar', data: [10, 20, 30] }]
        });
        
        // 模拟 npm 方式（实际使用相同 API）
        const npmChart = echarts.init(document.getElementById('npmChart'));
        npmChart.setOption({
            title: { text: 'npm 方式创建的图表' },
            tooltip: { trigger: 'axis' },
            xAxis: { data: ['Vue', 'React', 'Angular'] },
            yAxis: {},
            series: [{ type: 'line', data: [85, 92, 68] }]
        });
    </script>
</body>
</html>

知识点4：ECharts 开发工具

推荐工具配置
html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 开发环境搭建</title>
    
    <!-- 1. VS Code 推荐插件 -->
    <!-- 
        - ECharts Helper（代码提示）
        - Live Server（实时预览）
        - Prettier（代码格式化）
    -->
    
    <style>
        body { font-family: 'Microsoft YaHei', sans-serif; margin: 20px; background: #1e1e2e; color: #fff; }
        .tool-card {
            background: #2d2d3f;
            border-radius: 12px;
            padding: 20px;
            margin: 15px 0;
            border-left: 5px solid #409EFF;
        }
        .code-block {
            background: #1a1a2a;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 14px;
        }
        pre { margin: 0; color: #c9d1d9; }
        .keyword { color: #ff79c6; }
        .string { color: #50fa7b; }
        .comment { color: #8b949e; }
    </style>
</head>
<body>
    <h1>🛠️ ECharts 开发环境配置指南</h1>
    
    <div class="tool-card">
        <h2>📝 VS Code 配置文件（.vscode/settings.json）</h2>
        <div class="code-block">
            <pre>{
  <span class="comment">// 编辑器配置</span>
  <span class="string">"editor.fontSize"</span>: 14,
  <span class="string">"editor.tabSize"</span>: 2,
  <span class="string">"editor.formatOnSave"</span>: true,
  
  <span class="comment">// ECharts 代码提示</span>
  <span class="string">"html.autoCreateQuotes"</span>: true,
  
  <span class="comment">// Live Server 配置</span>
  <span class="string">"liveServer.settings.port"</span>: 5500,
  <span class="string">"liveServer.settings.root"</span>: "/",
  <span class="string">"liveServer.settings.CustomBrowser"</span>: "chrome"
}</pre>
        </div>
    </div>

    <div class="tool-card">
        <h2>📦 项目结构建议</h2>
        <div class="code-block">
            <pre>my-echarts-project/
├── index.html          <span class="comment"># 主页面</span>
├── css/
│   └── style.css       <span class="comment"># 样式文件</span>
├── js/
│   ├── echarts.min.js  <span class="comment"># ECharts 库文件</span>
│   └── main.js         <span class="comment"># 图表初始化代码</span>
├── data/
│   └── sales.json      <span class="comment"># 数据文件</span>
└── .vscode/
    └── settings.json   <span class="comment"># VS Code 配置</span></pre>
        </div>
    </div>

    <div class="tool-card">
        <h2>🚀 Live Server 使用示例</h2>
        <div class="code-block">
            <pre><span class="comment">&lt;!-- 在 VS Code 中右键点击此文件，选择 "Open with Live Server" --&gt;</span>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;ECharts Demo&lt;/title&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="chart" style="width: 800px; height: 400px;"&gt;&lt;/div&gt;
    &lt;script&gt;
        <span class="comment">// 图表代码会自动热更新</span>
        const chart = echarts.init(document.getElementById('chart'));
        chart.setOption({
            series: [{ type: 'bar', data: [5, 20, 36, 10, 10, 20] }]
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
        </div>
    </div>

    <div class="tool-card">
        <h2>🔧 实际运行效果演示</h2>
        <div id="liveDemo" style="width: 100%; height: 350px;"></div>
    </div>

    <script>
        // 演示实际图表效果
        const demoChart = echarts.init(document.getElementById('liveDemo'));
        demoChart.setOption({
            title: {
                text: '开发环境测试图表',
                textStyle: { color: '#fff' }
            },
            tooltip: { trigger: 'axis' },
            legend: { data: ['销售额'], textStyle: { color: '#fff' } },
            grid: { containLabel: true },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五'],
                axisLabel: { color: '#fff' }
            },
            yAxis: {
                type: 'value',
                axisLabel: { color: '#fff' }
            },
            series: [{
                name: '销售额',
                type: 'bar',
                data: [120, 200, 150, 80, 70],
                itemStyle: {
                    borderRadius: [5, 5, 0, 0],
                    color: '#409EFF'
                }
            }]
        });
    </script>
</body>
</html>

任务三：ECharts 数据可视化流程

知识点5：ECharts 五步法（核心流程）

标准流程代码模板
html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 标准五步法</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', sans-serif; }
        .card { background: white; border-radius: 20px; padding: 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); width: 1000px; }
        h1 { text-align: center; color: #333; margin-bottom: 20px; }
        .steps { display: flex; justify-content: space-between; margin-bottom: 30px; flex-wrap: wrap; }
        .step-badge { background: #409EFF; color: white; padding: 8px 16px; border-radius: 30px; font-size: 12px; margin: 5px; }
        #mainChart { width: 100%; height: 400px; }
        .annotation { background: #f0f9ff; padding: 15px; border-radius: 10px; margin-top: 20px; font-size: 14px; color: #0056b3; }
    </style>
</head>
<body>
<div class="card">
    <h1>📊 ECharts 标准五步法详解</h1>
    <div class="steps">
        <span class="step-badge">第1步：创建DOM容器</span>
        <span class="step-badge">第2步：引入ECharts</span>
        <span class="step-badge">第3步：初始化实例</span>
        <span class="step-badge">第4步：配置图表选项</span>
        <span class="step-badge">第5步：渲染图表</span>
    </div>
    
    <!-- 第1步：创建DOM容器（必须指定宽度和高度） -->
    <div id="mainChart"></div>
    
    <div class="annotation" id="codeAnnotation"></div>
</div>

<script>
    // ==================== 第1步：DOM容器已创建 ====================
    
    // ==================== 第2步：引入ECharts（已在head中引入） ====================
    
    // ==================== 第3步：初始化ECharts实例 ====================
    // 语法：echarts.init(domElement, theme, options)
    // 参数1：DOM元素（必需）
    // 参数2：主题（可选，如 'dark'）
    // 参数3：渲染器选项（可选，如 { renderer: 'canvas' }）
    const chartDom = document.getElementById('mainChart');
    const myChart = echarts.init(chartDom);
    
    // ==================== 第4步：配置图表选项（核心） ====================
    // option 对象包含所有图表配置
    const option = {
        // ----- 基础配置 -----
        title: {
            text: '2024年季度销售分析',      // 主标题
            subtext: '数据来源：财务系统',     // 副标题
            left: 'center',                   // 水平位置：left/center/right
            top: 0,                          // 垂直位置
            textStyle: {
                color: '#333',
                fontSize: 18,
                fontWeight: 'bold'
            }
        },
        
        // ----- 提示框配置 -----
        tooltip: {
            trigger: 'axis',        // 触发类型：axis(坐标轴)/item(图形)/none
            axisPointer: {          // 坐标轴指示器
                type: 'shadow'      // 阴影指示器
            },
            formatter: function(params) {
                // params 是数据数组，自定义提示内容
                return `${params[0].axisValue}<br/>
                        📈 销售额: ${params[0].value} 万元<br/>
                        📊 环比: ${params[0].value > 150 ? '↑增长' : '↓下降'}`;
            }
        },
        
        // ----- 图例配置 -----
        legend: {
            data: ['销售额', '利润'],    // 图例数据，需与series的name对应
            orient: 'horizontal',       // 水平排列
            left: 'left',               // 左对齐
            top: 30,
            textStyle: { color: '#333' }
        },
        
        // ----- 工具栏 -----
        toolbox: {
            feature: {
                saveAsImage: { title: '保存图片' },    // 保存为图片
                dataZoom: { title: { zoom: '区域缩放', back: '还原' } },  // 数据缩放
                restore: { title: '还原' }              // 还原
            }
        },
        
        // ----- X轴配置 -----
        xAxis: {
            type: 'category',           // 类目轴（适用于离散数据）
            data: ['Q1', 'Q2', 'Q3', 'Q4'],  // 类目数据
            name: '季度',               // 轴名称
            nameLocation: 'middle',     // 名称位置：start/middle/end
            nameGap: 30,               // 名称与轴线距离
            axisLabel: {
                rotate: 0,              // 标签旋转角度
                fontSize: 12
            },
            axisLine: {
                lineStyle: { color: '#999' }
            }
        },
        
        // ----- Y轴配置 -----
        yAxis: {
            type: 'value',              // 数值轴（适用于连续数据）
            name: '金额（万元）',
            min: 0,                     // 最小值
            max: 300,                   // 最大值（可自动计算）
            splitLine: {                // 网格线
                lineStyle: { type: 'dashed', color: '#ddd' }
            },
            axisLabel: {
                formatter: '{value} 万'  // 数值格式化
            }
        },
        
        // ----- 数据系列（核心） -----
        series: [
            {
                name: '销售额',           // 系列名称，对应legend
                type: 'bar',             // 图表类型：bar柱状图
                data: [180, 220, 250, 280],  // 数据值
                barWidth: '35%',         // 柱宽度
                itemStyle: {
                    borderRadius: [5, 5, 0, 0],  // 圆角
                    color: '#409EFF',            // 柱颜色
                    shadowBlur: 10,
                    shadowColor: 'rgba(64, 158, 255, 0.5)'
                },
                label: {                 // 数据标签
                    show: true,
                    position: 'top',
                    formatter: '{c}万'
                }
            },
            {
                name: '利润',
                type: 'line',            // 折线图
                data: [45, 58, 72, 88],
                smooth: true,            // 平滑曲线
                lineStyle: {
                    width: 3,
                    color: '#67C23A',
                    type: 'solid'
                },
                symbol: 'circle',        // 标记点形状
                symbolSize: 8,
                itemStyle: {
                    color: '#67C23A',
                    borderColor: '#fff',
                    borderWidth: 2
                },
                areaStyle: {             // 区域填充
                    color: 'rgba(103, 194, 58, 0.1)'
                }
            }
        ],
        
        // ----- 网格配置 -----
        grid: {
            containLabel: true,          // 包含轴标签
            left: '8%',
            right: '5%',
            top: '15%',
            bottom: '8%',
            backgroundColor: '#fafafa'
        },
        
        // ----- 数据区域缩放（用于大数据量）-----
        dataZoom: [
            {
                type: 'slider',          // 滑动条型
                start: 0,                // 起始百分比
                end: 100                 // 结束百分比
            }
        ]
    };
    
    // ==================== 第5步：渲染图表 ====================
    // 语法：myChart.setOption(option, notMerge, lazyUpdate)
    // notMerge: 是否不合并（true=替换，false=合并，默认false）
    // lazyUpdate: 是否延迟更新
    myChart.setOption(option);
    
    // 显示配置说明
    document.getElementById('codeAnnotation').innerHTML = `
        <strong>✅ 五步法代码解析：</strong><br>
        1️⃣ DOM容器：&lt;div id="mainChart"&gt;&lt;/div&gt; 必须设置宽高<br>
        2️⃣ 引入库：&lt;script src="echarts.min.js"&gt;&lt;/script&gt;<br>
        3️⃣ 初始化：echarts.init(document.getElementById('mainChart'))<br>
        4️⃣ 配置：option = { title, tooltip, xAxis, yAxis, series, ... }<br>
        5️⃣ 渲染：myChart.setOption(option)<br>
        <br>
        📌 响应式适配：window.addEventListener('resize', () => myChart.resize())
    `;
    
    // 额外：窗口自适应
    window.addEventListener('resize', () => myChart.resize());
</script>
</body>
</html>

知识点6：ECharts 常用配置项详解

完整配置项案例
html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 完整配置项手册</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body { font-family: monospace; padding: 20px; background: #0d1117; color: #c9d1d9; }
        .demo-section { background: #161b22; border-radius: 12px; padding: 20px; margin-bottom: 30px; border: 1px solid #30363d; }
        .chart-box { width: 100%; height: 350px; margin: 20px 0; }
        h3 { color: #58a6ff; }
        code { background: #21262d; padding: 2px 6px; border-radius: 6px; color: #ff7b72; }
        .config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; }
        .config-card { background: #0d1117; border: 1px solid #30363d; border-radius: 8px; padding: 12px; }
    </style>
</head>
<body>
    <h1>📚 ECharts 配置项完全手册</h1>
    
    <!-- 演示1：标题配置 -->
    <div class="demo-section">
        <h3>1️⃣ title - 标题配置</h3>
        <div class="config-grid">
            <div class="config-card">
                <strong>属性列表：</strong><br>
                • text: 主标题<br>
                • subtext: 副标题<br>
                • left/right/top/bottom: 位置<br>
                • textStyle: 文字样式<br>
                • borderWidth: 边框宽度<br>
                • backgroundColor: 背景色
            </div>
            <div class="config-card">
                <strong>代码示例：</strong>
                <pre style="font-size: 11px; margin: 0;">title: {
  text: '销售数据看板',
  subtext: '2024年1-6月',
  left: 'center',
  textStyle: {
    color: '#58a6ff',
    fontSize: 20,
    fontWeight: 'bold'
  },
  borderWidth: 2,
  borderColor: '#30363d'
}</pre>
            </div>
        </div>
        <div id="titleDemo" class="chart-box"></div>
    </div>

    <!-- 演示2：坐标轴配置 -->
    <div class="demo-section">
        <h3>2️⃣ xAxis / yAxis - 坐标轴配置</h3>
        <div id="axisDemo" class="chart-box"></div>
    </div>

    <!-- 演示3：系列类型大全 -->
    <div class="demo-section">
        <h3>3️⃣ series - 系列类型大全（type参数）</h3>
        <div id="seriesDemo" class="chart-box"></div>
    </div>

    <script>
        // ========== 演示1：标题完整配置 ==========
        const titleChart = echarts.init(document.getElementById('titleDemo'));
        titleChart.setOption({
            title: {
                text: '📊 月度销售趋势',
                subtext: '数据统计周期：2024年1月-6月',
                left: 'center',
                top: 0,
                textStyle: { color: '#58a6ff', fontSize: 18, fontFamily: 'monospace' },
                subtextStyle: { color: '#8b949e', fontSize: 12 },
                borderWidth: 0,
                borderRadius: 0,
                backgroundColor: 'transparent'
            },
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
            yAxis: { type: 'value' },
            series: [{
                type: 'line',
                data: [65, 72, 88, 95, 110, 125],
                smooth: true,
                lineStyle: { color: '#58a6ff', width: 3 },
                areaStyle: { color: 'rgba(88, 166, 255, 0.1)' }
            }]
        });

        // ========== 演示2：坐标轴高级配置 ==========
        const axisChart = echarts.init(document.getElementById('axisDemo'));
        axisChart.setOption({
            title: { text: '坐标轴配置示例', left: 'center' },
            tooltip: { trigger: 'axis' },
            xAxis: {
                type: 'category',
                data: ['电子产品', '服装鞋包', '家居生活', '美妆护肤', '食品生鲜'],
                name: '商品类别',
                nameLocation: 'middle',
                nameGap: 40,
                axisLabel: {
                    rotate: 15,           // 旋转15度避免重叠
                    fontSize: 11,
                    interval: 0           // 显示所有标签
                },
                axisLine: { lineStyle: { color: '#58a6ff', width: 2 } },
                axisTick: { show: true, alignWithLabel: true },
                boundaryGap: true         // 类目轴两侧留白
            },
            yAxis: {
                type: 'value',
                name: '销售额（万元）',
                nameLocation: 'middle',
                nameGap: 45,
                min: 0,
                max: 500,
                splitLine: {
                    show: true,
                    lineStyle: { type: 'dashed', color: '#30363d' }
                },
                axisLabel: {
                    formatter: '{value} 万',
                    color: '#c9d1d9'
                },
                axisLine: { show: false }
            },
            series: [{
                type: 'bar',
                data: [420, 380, 295, 210, 175],
                itemStyle: {
                    borderRadius: [8, 8, 0, 0],
                    color: '#58a6ff',
                    shadowBlur: 10,
                    shadowColor: 'rgba(88, 166, 255, 0.3)'
                },
                label: { show: true, position: 'top', formatter: '{c}万' }
            }]
        });

        // ========== 演示3：多种图表类型 ==========
        const seriesChart = echarts.init(document.getElementById('seriesDemo'));
        seriesChart.setOption({
            title: { text: 'ECharts 支持的图表类型示例', left: 'center' },
            tooltip: { trigger: 'axis' },
            legend: { data: ['柱状图', '折线图', '面积图'], left: 'left', textStyle: { color: '#c9d1d9' } },
            xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六'] },
            yAxis: { type: 'value' },
            series: [
                {
                    name: '柱状图',
                    type: 'bar',           // 柱状图
                    data: [23, 45, 38, 52, 48, 67],
                    barWidth: '25%',
                    itemStyle: { color: '#58a6ff', borderRadius: [4, 4, 0, 0] }
                },
                {
                    name: '折线图',
                    type: 'line',           // 折线图
                    data: [30, 42, 35, 48, 45, 60],
                    smooth: true,
                    lineStyle: { color: '#f0883e', width: 3 },
                    symbol: 'circle',
                    symbolSize: 8
                },
                {
                    name: '面积图',
                    type: 'line',           // 面积图（line + areaStyle）
                    data: [18, 30, 25, 38, 35, 50],
                    smooth: true,
                    areaStyle: { color: 'rgba(46, 194, 126, 0.2)' },
                    lineStyle: { color: '#2ec27e', width: 2 },
                    symbol: 'diamond'
                }
            ],
            grid: { containLabel: true, backgroundColor: '#0d1117' }
        });
    </script>

    <!-- 配置项速查表 -->
    <div class="demo-section">
        <h3>📖 配置项速查表</h3>
        <div class="config-grid">
            <div class="config-card"><strong>🎨 title</strong> - 标题<br>text, subtext, left, top, textStyle</div>
            <div class="config-card"><strong>💬 tooltip</strong> - 提示框<br>trigger, formatter, axisPointer</div>
            <div class="config-card"><strong>📌 legend</strong> - 图例<br>data, orient, left, textStyle</div>
            <div class="config-card"><strong>📊 xAxis/yAxis</strong> - 坐标轴<br>type, data, name, axisLabel</div>
            <div class="config-card"><strong>📈 series</strong> - 数据系列<br>type, data, name, itemStyle, label</div>
            <div class="config-card"><strong>🖼️ grid</strong> - 网格<br>left, right, top, bottom, containLabel</div>
            <div class="config-card"><strong>🔍 toolbox</strong> - 工具栏<br>feature.saveAsImage, feature.dataZoom</div>
            <div class="config-card"><strong>🎯 dataZoom</strong> - 数据缩放<br>type, start, end</div>
            <div class="config-card"><strong>🌈 color</strong> - 调色盘<br>color: ['#5470c6', '#fac858', ...]</div>
        </div>
    </div>
</body>
</html>

综合实战：完整的企业级数据看板

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>企业级ECharts数据看板</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: #f0f2f5; font-family: 'Microsoft YaHei', sans-serif; padding: 20px; }
        .dashboard { max-width: 1400px; margin: 0 auto; }
        .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 16px; margin-bottom: 20px; }
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
        .stat-card { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); text-align: center; }
        .stat-value { font-size: 32px; font-weight: bold; color: #667eea; margin: 10px 0; }
        .chart-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
        .chart-card { background: white; border-radius: 16px; padding: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
        .chart-card h3 { margin-bottom: 15px; color: #333; border-left: 4px solid #667eea; padding-left: 12px; }
        .chart { width: 100%; height: 350px; }
        .full-width { grid-column: span 2; }
        @media (max-width: 768px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .chart-row { grid-template-columns: 1fr; }
            .full-width { grid-column: span 1; }
        }
    </style>
</head>
<body>
<div class="dashboard">
    <div class="header">
        <h1>📊 企业销售数据可视化看板</h1>
        <p>实时监控 | 智能分析 | 决策支持 | 数据驱动</p>
    </div>
    
    <!-- KPI 指标卡 -->
    <div class="stats-grid">
        <div class="stat-card"><div>💰 总销售额</div><div class="stat-value">¥2,850万</div><div style="color:#67C23A">↑ 12.5%</div></div>
        <div class="stat-card"><div>📦 总订单量</div><div class="stat-value">48,632</div><div style="color:#67C23A">↑ 8.3%</div></div>
        <div class="stat-card"><div>👥 用户总数</div><div class="stat-value">12,845</div><div style="color:#E6A23C">↑ 5.2%</div></div>
        <div class="stat-card"><div>⭐ 客单价</div><div class="stat-value">¥586</div><div style="color:#F56C6C">↓ 2.1%</div></div>
    </div>
    
    <div class="chart-row">
        <div class="chart-card"><h3>📈 月度销售趋势</h3><div id="trendChart" class="chart"></div></div>
        <div class="chart-card"><h3>🥧 品类销售占比</h3><div id="pieChart" class="chart"></div></div>
    </div>
    
    <div class="chart-row">
        <div class="chart-card full-width"><h3>🗺️ 区域销售分布</h3><div id="barChart" class="chart"></div></div>
    </div>
</div>

<script>
    // 初始化所有图表
    const charts = {
        trend: echarts.init(document.getElementById('trendChart')),
        pie: echarts.init(document.getElementById('pieChart')),
        bar: echarts.init(document.getElementById('barChart'))
    };
    
    // 图表1：月度销售趋势（折线+柱状组合）
    charts.trend.setOption({
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { data: ['销售额(万)', '订单量(千)'], left: 'left' },
        xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] },
        yAxis: [{ type: 'value', name: '销售额(万元)' }, { type: 'value', name: '订单量(千单)' }],
        series: [
            { name: '销售额(万)', type: 'bar', data: [185, 198, 210, 245, 278, 310, 335, 352, 368, 385, 402, 425], barWidth: '30%', itemStyle: { color: '#667eea', borderRadius: [6,6,0,0] } },
            { name: '订单量(千)', type: 'line', yAxisIndex: 1, data: [32, 34, 36, 42, 48, 54, 58, 61, 64, 67, 70, 74], smooth: true, lineStyle: { color: '#f093fb', width: 3 }, symbol: 'circle', symbolSize: 8 }
        ]
    });
    
    // 图表2：品类销售占比（饼图）
    charts.pie.setOption({
        tooltip: { trigger: 'item', formatter: '{b}: {d}%' },
        legend: { orient: 'vertical', left: 'left', data: ['电子产品', '服装鞋包', '家居生活', '美妆护肤', '食品生鲜'] },
        series: [{
            type: 'pie', radius: '55%', center: ['50%', '55%'],
            data: [
                { name: '电子产品', value: 1120, itemStyle: { color: '#667eea' } },
                { name: '服装鞋包', value: 890, itemStyle: { color: '#f093fb' } },
                { name: '家居生活', value: 720, itemStyle: { color: '#4facfe' } },
                { name: '美妆护肤', value: 580, itemStyle: { color: '#43e97b' } },
                { name: '食品生鲜', value: 340, itemStyle: { color: '#fa709a' } }
            ],
            label: { show: true, formatter: '{b}\n{d}%', fontWeight: 'bold' },
            emphasis: { scale: true, label: { show: true } }
        }]
    });
    
    // 图表3：区域销售分布（横向柱状图）
    charts.bar.setOption({
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        grid: { containLabel: true, left: '15%' },
        xAxis: { type: 'value', name: '销售额(万元)' },
        yAxis: { type: 'category', data: ['华东', '华南', '华北', '西南', '华中', '西北', '东北'], name: '区域', axisLabel: { fontSize: 12 } },
        series: [{
            type: 'bar', data: [1250, 980, 860, 720, 680, 420, 380],
            itemStyle: { borderRadius: [0, 8, 8, 0], color: '#667eea', shadowBlur: 5 },
            label: { show: true, position: 'right', formatter: '{c}万' }
        }]
    });
    
    // 响应式适配
    window.addEventListener('resize', () => {
        Object.values(charts).forEach(chart => chart.resize());
    });
</script>
</body>
</html>

知识点总结

任务 核心知识点 关键语法
任务一 可视化概念、流程、工具 无特定代码语法
任务二 ECharts下载、开发环境 CDN引入：<script src="...">
任务三 五步法、配置项 echarts.init() → setOption()

核心API速记

javascript 复制代码 
// 1. 初始化
const chart = echarts.init(document.getElementById('container'));

// 2. 配置
const option = {
    title: { text: '标题' },
    xAxis: { data: [] },
    yAxis: {},
    series: [{ type: 'bar', data: [] }]
};

// 3. 渲染
chart.setOption(option);

// 4. 自适应
window.addEventListener('resize', () => chart.resize());
相关推荐
m0_614619062 小时前
花了一下午学 Git，整理了一份学习笔记
笔记·git·学习
imbackneverdie2 小时前
科研绘图踩坑多年，我总结出了零设计基础出期刊级插图的方法
人工智能·考研·ai·信息可视化·ai作画·科研绘图·研究生
ITxiaobing20232 小时前
Neel Somani：如何设计“既能学习又不脆弱”的AI系统
人工智能·学习·机器学习
qeen873 小时前
【数据结构】栈及其C语言模拟实现
c语言·数据结构·学习·栈
南境十里·墨染春水3 小时前
linux学习进展 信号
linux·服务器·学习
不灭锦鲤3 小时前
每天学习新的漏洞，react2shell漏洞
学习
悠哉悠哉愿意3 小时前
【物联网学习笔记】TIM
笔记·单片机·嵌入式硬件·物联网·学习
炽烈小老头5 小时前
【每天学习一点算法 2026/04/17】多数元素
数据结构·学习·算法
2501_916007475 小时前
从零开始学习iOS开发：Xcode环境配置与项目创建完整指南
ide·vscode·学习·ios·个人开发·xcode·敏捷流程
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点032026 年 AI 编程助手全面对比评测：Cursor vs Copilot vs Claude Code vs GitHub Copilot Free04GPT-6发布日深度解析-Symphony架构200万Token实战05AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析06零成本！Ollama本地部署国产大模型全指南（支持Kimi-K2.5/GLM-5/Qwen，新手秒上手）07一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛08从限购到畅通：GLM-5.1 Coding Plan接入攻略09基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南10从零部署 Hermes Agent：一只"会成长的 AI 马"保姆级安装教程