正文

零基础也能学会 Echarts数据可视化入门视频教程 从安装配置到制作图表完整教程

/0 浏览量
0903

零基础也能学会 Echarts数据可视化入门视频教程 从安装配置到制作图表完整教程

先聊聊你为什么需要 ECharts

你是不是曾经在报表里看到那些五颜六色的柱状图、折线图，心里暗暗佩服：”哇，这图表做得好漂亮”，但转头一看，制作工具居然是 ECharts，然后心里就打起了退堂鼓——”这肯定很难学吧？”

别急，今天我就来告诉你：完全不难。

我见过太多人一开始觉得 ECharts 高深莫测，结果学完发现也就那么回事。就像学开车一样，你知道它有三个踏板（油门、刹车、离合），知道方向盘能控制方向，剩下的就是多开几圈的事儿。今天这篇教程，我会从最基本的配置开始，一步一步带你做出第一个图表。

什么是 ECharts？

ECharts 是一个由百度团队开发的前端可视化库，专门用来在网页上生成各种图表。你可以把它理解成一个”画笔”，你告诉它”我要什么图表、用什么数据、长什么样”，它就帮你画出来。

目前最新的版本是 ECharts 5.x，支持各种复杂图表，包括：

  • 基础的柱状图、折线图、饼图
  • 地图和热力图
  • 雷达图、散点图
  • 关系图、树图等高级图表

最重要的是：它是免费的，而且有中文文档，对国内开发者非常友好。

第一步：准备好环境

方案一：最简单的方式——直接引用 CDN

如果你只是想快速试试，或者做一个简单的网页，直接用 CDN 引入是最快的方法。

打开你的 HTML 文件，在 <head> 标签里加上一行代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个 ECharts 图表</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 图表容器 -->
    <div id="main" style="width: 600px; height: 400px;"></div>
    
    <script>
        // 初始化 ECharts 实例
        var chart = echarts.init(document.getElementById('main'));
        
        // 配置项
        var option = {
            title: {
                text: '我的第一个图表'
            },
            xAxis: {
                type: 'category',
                data: ['一月', '二月', '三月', '四月']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80],
                type: 'bar'
            }]
        };
        
        // 渲染图表
        chart.setOption(option);
    </script>
</body>
</html>

打开这个 HTML 文件，你就能看到一个柱状图了！是不是很简单？

方案二：使用 npm 安装（推荐）

如果你是在做项目，建议使用 npm 安装，这样更容易管理依赖。

# 在你的项目目录下执行
npm install echarts --save

安装完成后，你就可以在代码中引入：

// 完整引入 ECharts
import * as echarts from 'echarts';

// 或者按需引入（推荐，减小体积）
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必要的组件
echarts.use([GridComponent, BarChart, CanvasRenderer]);

第二步：理解 ECharts 的基本结构

在深入之前，我们先搞清楚 ECharts 图表的”骨架”。

一个 ECharts 图表通常包含以下几个部分：

  1. 标题（title）：图表的标题，可以放在顶部或侧面
  2. 提示框（tooltip）：鼠标悬停时显示的信息
  3. 图例（legend）：显示数据系列的名称
  4. 直角坐标系（grid）：用于柱状图、折线图等
  5. X 轴（xAxis）：横轴
  6. Y 轴（yAxis）：纵轴
  7. 数据系列（series）：真正的数据

第三步：从零开始制作柱状图

让我们从一个最简单的柱状图开始。

3.1 创建一个基础的柱状图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>柱状图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 图表容器 -->
    <div id="chart" style="width: 800px; height: 500px;"></div>
    
    <script>
        // 1. 初始化实例
        var myChart = echarts.init(document.getElementById('chart'));
        
        // 2. 准备数据
        var categories = ['苹果手机', '华为手机', '小米手机', 'OPPO手机', 'vivo手机'];
        var salesData = [12000, 11000, 9000, 7500, 6800];
        
        // 3. 配置项
        var option = {
            // 标题
            title: {
                text: '2024年手机销量统计',
                left: 'center',
                textStyle: {
                    fontSize: 20,
                    fontWeight: 'bold'
                }
            },
            // 提示框
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(50,50,50,0.7)',
                textStyle: {
                    color: '#fff'
                }
            },
            // 图例
            legend: {
                data: ['销量（台）'],
                bottom: 10
            },
            // X 轴
            xAxis: {
                type: 'category',
                data: categories,
                axisLabel: {
                    rotate: 15  // 标签旋转15度，避免重叠
                }
            },
            // Y 轴
            yAxis: {
                type: 'value',
                name: '销量（台）',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            // 数据系列
            series: [{
                name: '销量（台）',
                type: 'bar',
                data: salesData,
                // 柱状图样式
                itemStyle: {
                    color: '#5470c6',
                    borderRadius: [4, 4, 0, 0]
                },
                // 柱子上显示数值
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}'
                },
                // 柱子宽度
                barWidth: '50%'
            }]
        };
        
        // 4. 渲染图表
        myChart.setOption(option);
        
        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>

这个示例展示了柱状图的基本配置。我们一步步来理解：

关于数据：

  • categories 是 X 轴的标签
  • salesData 是对应的数值
  • 数据的顺序必须一致，否则就对不上了

关于配置项：

  • title：设置标题，left: 'center' 表示居中
  • tooltip：鼠标悬停时显示提示，trigger: 'axis' 表示触发坐标轴
  • legend：显示图例，让用户知道每个颜色代表什么
  • xAxis：X 轴配置，type: 'category' 表示分类轴
  • yAxis：Y 轴配置，type: 'value' 表示数值轴
  • series：数据系列，这里是唯一的系列

第四步：制作折线图

折线图适合展示数据随时间的变化趋势。

var option = {
    title: {
        text: '2024年每月销售额趋势',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['销售额', '利润'],
        bottom: 10
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
        type: 'value',
        name: '金额（万元）',
        axisLabel: {
            formatter: '{value} 万'
        }
    },
    series: [
        {
            name: '销售额',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210, 180, 150, 200, 250, 220],
            smooth: true,  // 平滑曲线
            itemStyle: {
                color: '#5470c6'
            },
            lineStyle: {
                width: 3
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [
                        { offset: 0, color: 'rgba(84, 112, 198, 0.3)' },
                        { offset: 1, color: 'rgba(84, 112, 198, 0.05)' }
                    ]
                }
            },
            label: {
                show: true,
                position: 'top'
            }
        },
        {
            name: '利润',
            type: 'line',
            data: [40, 50, 35, 55, 30, 80, 70, 60, 50, 70, 90, 80],
            smooth: true,
            itemStyle: {
                color: '#91cc75'
            },
            lineStyle: {
                width: 3,
                type: 'dashed'  // 虚线
            }
        }
    ]
};

关键点解析：

  1. boundaryGap: false：让折线图从 Y 轴开始，而不是从中间开始
  2. smooth: true：让线条更平滑，默认是折线
  3. areaStyle：添加区域填充效果，渐变填充让图表更好看
  4. 多系列：可以在同一个图表中放多个系列，用不同颜色区分

第五步：制作饼图

饼图适合展示占比关系。

var option = {
    title: {
        text: '2024年Q1各部门业绩占比',
        subtext: '单位：万元',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}万元 ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        top: 'center'
    },
    series: [
        {
            name: '部门业绩',
            type: 'pie',
            radius: ['40%', '70%'],  // 环形图
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: true,
                formatter: '{b}\n{c}万元\n{d}%',
                fontSize: 12
            },
            labelLine: {
                show: true
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 16,
                    fontWeight: 'bold'
                }
            },
            data: [
                { value: 1048, name: '技术部' },
                { value: 735, name: '销售部' },
                { value: 580, name: '市场部' },
                { value: 484, name: '运营部' },
                { value: 300, name: '其他' }
            ]
        }
    ]
};

关于饼图：

  • radius：第一个值是内半径，第二个值是外半径。如果两个值相同就是饼图，如果内半径不为0就是环形图
  • label：显示标签的格式，{b} 是名称，{c} 是数值，{d} 是百分比
  • emphasis：鼠标悬停时的效果

第六步：制作散点图

散点图适合展示两个变量之间的关系。

var option = {
    title: {
        text: '广告投入与销售额关系分析',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: function(params) {
            return '广告投入：' + params.data[0] + '万元<br/>销售额：' + params.data[1] + '万元';
        }
    },
    grid: {
        left: '10%',
        right: '10%',
        bottom: '15%'
    },
    xAxis: {
        type: 'value',
        name: '广告投入（万元）',
        nameLocation: 'middle',
        nameGap: 25
    },
    yAxis: {
        type: 'value',
        name: '销售额（万元）',
        nameLocation: 'middle',
        nameGap: 40
    },
    series: [
        {
            name: '销售数据',
            type: 'scatter',
            symbolSize: function(data) {
                return data[2] / 5;  // 气泡大小关联第三个维度
            },
            data: [
                [10, 120, 50],
                [20, 230, 80],
                [30, 350, 120],
                [40, 410, 90],
                [50, 520, 150],
                [60, 600, 110],
                [70, 680, 130],
                [80, 750, 100]
            ],
            itemStyle: {
                color: '#5470c6',
                opacity: 0.6
            }
        }
    ]
};

散点图的 data 是一个二维数组，每个元素可以是：

  • 一维数组：[x, y]
  • 二维数组：[x, y, z]，z 可以用来控制气泡大小

第七步：动态数据更新

有时候数据是实时变化的，我们来做一个动态更新的例子。

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

var data = [];
var now = new Date();
var oneDay = 24 * 3600 * 1000;

for (var i = 0; i < 100; i++) {
    data.push({
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round((Math.random() - 0.5) * 20 + data[i - 1]?.value[1] ?? 10)
        ]
    });
    now = new Date(now - oneDay);
}

var option = {
    title: {
        text: '动态数据 - 实时温度变化'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            return params[0].name + '<br/>' + params[0].seriesName + '：' + params[0].value[1] + '°C';
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        },
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [{
        name: '温度',
        type: 'line',
        showSymbol: false,
        smooth: true,
        data: data.reverse(),
        lineStyle: {
            width: 2,
            color: '#5470c6'
        },
        areaStyle: {
            color: {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [
                    { offset: 0, color: 'rgba(84, 112, 198, 0.5)' },
                    { offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
                ]
            }
        }
    }]
};

myChart.setOption(option);

// 动态更新数据
setInterval(function() {
    var lastData = data[data.length - 1];
    var newDate = new Date();
    var newValue = Math.round((Math.random() - 0.5) * 10 + lastData.value[1]);
    
    data.shift();
    data.push({
        name: newDate.toString(),
        value: [
            [newDate.getFullYear(), newDate.getMonth() + 1, newDate.getDate()].join('/'),
            newValue
        ]
    });
    
    myChart.setOption({
        series: [{
            data: data.reverse()
        }]
    });
}, 1000);

这个例子展示了如何：

  1. 使用 time 类型的 X 轴
  2. 每秒钟更新一次数据
  3. 使用 shift 和 push 来模拟实时数据流

第八步：使用地图

ECharts 也支持地图可视化。

// 首先需要注册地图
// 以中国地图为例
$.getJSON('https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    
    var option = {
        title: {
            text: '2024年中国各省份GDP分布',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} 亿元'
        },
        visualMap: {
            min: 0,
            max: 12000,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true,
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            }
        },
        series: [
            {
                name: 'GDP',
                type: 'map',
                map: 'china',
                roam: true,  // 允许缩放和平移
                zoom: 1.2,
                label: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 10
                    },
                    itemStyle: {
                        areaColor: '#f4cccc'
                    }
                },
                data: [
                    { name: '广东', value: 12436 },
                    { name: '江苏', value: 11636 },
                    { name: '山东', value: 9207 },
                    { name: '浙江', value: 8255 },
                    { name: '河南', value: 6790 },
                    { name: '四川', value: 5674 },
                    { name: '湖北', value: 5373 },
                    { name: '福建', value: 5310 },
                    { name: '湖南', value: 5001 },
                    { name: '安徽', value: 4705 }
                ]
            }
        ]
    };
    
    var myChart = echarts.init(document.getElementById('chart'));
    myChart.setOption(option);
});

关键点：

  • 使用 visualMap 组件来实现颜色渐变
  • roam: true 允许用户缩放和平移地图
  • map 属性指定地图名称，需要提前注册地图数据

第九步：图表的样式定制

ECharts 提供了非常丰富的样式定制选项。

var option = {
    // 全局样式
    backgroundColor: '#f5f5f5',
    
    // 标题
    title: {
        text: '定制样式示例',
        textStyle: {
            color: '#333',
            fontSize: 24,
            fontWeight: 'bold'
        },
        subtext: '个性化定制',
        subtextStyle: {
            color: '#999',
            fontSize: 14
        },
        left: 'center',
        top: 20
    },
    
    // 提示框
    tooltip: {
        backgroundColor: 'rgba(50,50,50,0.9)',
        borderColor: '#5470c6',
        borderWidth: 1,
        textStyle: {
            color: '#fff',
            fontSize: 14
        },
        extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.3);'
    },
    
    // 图例
    legend: {
        data: ['销售额', '利润'],
        textStyle: {
            color: '#666',
            fontSize: 12
        },
        icon: 'roundRect',
        itemWidth: 20,
        itemHeight: 10
    },
    
    // X 轴
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
        axisLine: {
            lineStyle: {
                color: '#333',
                width: 2
            }
        },
        axisLabel: {
            color: '#666',
            fontSize: 12,
            interval: 0,
            rotate: 0
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#eee',
                type: 'dashed'
            }
        }
    },
    
    // Y 轴
    yAxis: {
        type: 'value',
        axisLine: {
            show: false
        },
        axisLabel: {
            color: '#666',
            formatter: '{value} 万'
        },
        splitLine: {
            lineStyle: {
                color: '#eee'
            }
        }
    },
    
    // 数据系列
    series: [
        {
            name: '销售额',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110],
            barWidth: '60%',
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                ]),
                borderRadius: [4, 4, 0, 0]
            },
            label: {
                show: true,
                position: 'top',
                color: '#333',
                fontWeight: 'bold'
            }
        },
        {
            name: '利润',
            type: 'line',
            data: [40, 80, 60, 30, 25, 50],
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
                color: '#5470c6',
                width: 3
            },
            itemStyle: {
                color: '#5470c6',
                borderWidth: 2,
                borderColor: '#fff'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [
                        { offset: 0, color: 'rgba(84, 112, 198, 0.3)' },
                        { offset: 1, color: 'rgba(84, 112, 198, 0.05)' }
                    ]
                }
            }
        }
    ]
};

第十步：常见问题的解决

10.1 图表显示不出来

检查一下：

  1. HTML 容器是否有正确的 ID
  2. ECharts 是否正确引入
  3. 容器是否有宽度（最好显式设置）
<div id="chart" style="width: 100%; height: 400px;"></div>

10.2 图表大小不对

// 监听窗口大小变化，自动调整
window.addEventListener('resize', function() {
    myChart.resize();
});

10.3 中文显示乱码

确保 HTML 文件使用了 UTF-8 编码：

<meta charset="UTF-8">

10.4 数据更新后图表不刷新

// 使用 replaceMerge 代替 merge
myChart.setOption(option, { replaceMerge: ['series'] });

10.5 性能优化

当数据量很大时（比如超过 10000 个点），可以考虑：

  • 使用 large: true 开启大数据模式
  • 使用采样降低点数
  • 使用 WebWorker 计算数据
series: [{
    type: 'line',
    large: true,
    largeThreshold: 2000,
    data: bigData
}]

第十一 步：实战项目——做一个完整的仪表盘

现在我们把前面学到的知识整合起来，做一个完整的仪表盘。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化仪表盘</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 {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            min-height: 100vh;
            padding: 20px;
        }
        .dashboard {
            max-width: 1400px;
            margin: 0 auto;
        }
        .header {
            text-align: center;
            color: #fff;
            margin-bottom: 30px;
        }
        .header h1 {
            font-size: 32px;
            margin-bottom: 10px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        .header p {
            color: #aaa;
            font-size: 14px;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 20px;
        }
        .card {
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
        }
        .card.full-width {
            grid-column: 1 / -1;
        }
        .card-title {
            color: #fff;
            font-size: 16px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .chart {
            width: 100%;
            height: 300px;
        }
        .chart.tall {
            height: 400px;
        }
        .stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }
        .stat-item {
            text-align: center;
            color: #fff;
        }
        .stat-value {
            font-size: 36px;
            font-weight: bold;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .stat-label {
            font-size: 14px;
            color: #aaa;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <div class="header">
            <h1>📊 2024年度运营数据仪表盘</h1>
            <p>数据更新时间：2024年12月</p>
        </div>
        
        <div class="stats">
            <div class="stat-item">
                <div class="stat-value">128万</div>
                <div class="stat-label">总销售额</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">35.6万</div>
                <div class="stat-label">总利润</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">2.8万</div>
                <div class="stat-label">新增用户</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">98.5%</div>
                <div class="stat-label">满意度</div>
            </div>
        </div>
        
        <div class="grid">
            <div class="card full-width">
                <div class="card-title">月度销售趋势</div>
                <div id="trendChart" class="chart tall"></div>
            </div>
            
            <div class="card">
                <div class="card-title">各品类销售占比</div>
                <div id="pieChart" class="chart"></div>
            </div>
            
            <div class="card">
                <div class="card-title">各地区销售额分布</div>
                <div id="barChart" class="chart"></div>
            </div>
            
            <div class="card full-width">
                <div class="card-title">用户行为分析</div>
                <div id="radarChart" class="chart"></div>
            </div>
        </div>
    </div>
    
    <script>
        // 趋势图
        var trendChart = echarts.init(document.getElementById('trendChart'));
        trendChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'cross' }
            },
            legend: {
                data: ['销售额', '利润', '用户数'],
                textStyle: { color: '#fff' },
                bottom: 10
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisLine: { lineStyle: { color: '#fff' } },
                axisLabel: { color: '#fff' }
            },
            yAxis: [
                {
                    type: 'value',
                    name: '金额（万）',
                    axisLine: { lineStyle: { color: '#fff' } },
                    axisLabel: { color: '#fff' },
                    splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
                },
                {
                    type: 'value',
                    name: '用户数',
                    axisLine: { lineStyle: { color: '#fff' } },
                    axisLabel: { color: '#fff' },
                    splitLine: { show: false }
                }
            ],
            series: [
                {
                    name: '销售额',
                    type: 'line',
                    smooth: true,
                    data: [8.5, 9.2, 10.1, 11.5, 12.3, 13.8, 14.2, 13.5, 12.8, 11.2, 10.5, 12.0],
                    lineStyle: { color: '#667eea', width: 3 },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0, x2: 0, y2: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(102, 126, 234, 0.3)' },
                                { offset: 1, color: 'rgba(102, 126, 234, 0.05)' }
                            ]
                        }
                    }
                },
                {
                    name: '利润',
                    type: 'line',
                    smooth: true,
                    data: [2.1, 2.5, 2.8, 3.2, 3.5, 4.0, 4.2, 3.8, 3.5, 3.0, 2.8, 3.2],
                    lineStyle: { color: '#f093fb', width: 3 }
                },
                {
                    name: '用户数',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: [1200, 1500, 1800, 2000, 2200, 2500, 2800, 2600, 2400, 2100, 1900, 2200],
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0, x2: 0, y2: 1,
                            colorStops: [
                                { offset: 0, color: '#4facfe' },
                                { offset: 1, color: '#00f2fe' }
                            ]
                        }
                    }
                }
            ]
        });
        
        // 饼图
        var pieChart = echarts.init(document.getElementById('pieChart'));
        pieChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'center',
                textStyle: { color: '#fff' }
            },
            series: [{
                name: '销售占比',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['60%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#1a1a2e',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: '{b}\n{d}%',
                    color: '#fff'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 14,
                        fontWeight: 'bold'
                    }
                },
                data: [
                    { value: 35, name: '电子产品' },
                    { value: 25, name: '服装鞋帽' },
                    { value: 20, name: '食品饮料' },
                    { value: 12, name: '家居用品' },
                    { value: 8, name: '其他' }
                ]
            }]
        });
        
        // 柱状图
        var barChart = echarts.init(document.getElementById('barChart'));
        barChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLine: { lineStyle: { color: '#fff' } },
                axisLabel: { color: '#fff' },
                splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
            },
            yAxis: {
                type: 'category',
                data: ['华东', '华南', '华北', '西南', '华中', '东北', '西北'],
                axisLine: { lineStyle: { color: '#fff' } },
                axisLabel: { color: '#fff' }
            },
            series: [{
                name: '销售额',
                type: 'bar',
                data: [42, 38, 35, 28, 25, 18, 12],
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0, y: 0, x2: 1, y2: 0,
                        colorStops: [
                            { offset: 0, color: '#667eea' },
                            { offset: 1, color: '#764ba2' }
                        ]
                    },
                    borderRadius: [0, 4, 4, 0]
                },
                label: {
                    show: true,
                    position: 'right',
                    color: '#fff'
                }
            }]
        });
        
        // 雷达图
        var radarChart = echarts.init(document.getElementById('radarChart'));
        radarChart.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                data: ['今年', '去年'],
                textStyle: { color: '#fff' },
                bottom: 10
            },
            radar: {
                indicator: [
                    { name: '访问量', max: 6500 },
                    { name: '转化率', max: 16000 },
                    { name: '客单价', max: 30000 },
                    { name: '复购率', max: 38000 },
                    { name: '满意度', max: 52000 },
                    { name: '留存率', max: 25000 }
                ],
                axisName: { color: '#fff' },
                splitArea: {
                    areaStyle: {
                        color: 'rgba(255,255,255,0.05)'
                    }
                },
                axisLine: {
                    lineStyle: { color: 'rgba(255,255,255,0.2)' }
                },
                splitLine: {
                    lineStyle: { color: 'rgba(255,255,255,0.1)' }
                }
            },
            series: [{
                name: '用户行为对比',
                type: 'radar',
                data: [
                    {
                        value: [4200, 12000, 25000, 35000, 48000, 22000],
                        name: '今年',
                        lineStyle: { color: '#667eea', width: 2 },
                        areaStyle: { color: 'rgba(102, 126, 234, 0.3)' }
                    },
                    {
                        value: [3800, 10000, 22000, 30000, 42000, 18000],
                        name: '去年',
                        lineStyle: { color: '#f093fb', width: 2 },
                        areaStyle: { color: 'rgba(240, 147, 251, 0.3)' }
                    }
                ]
            }]
        });
        
        // 响应式
        window.addEventListener('resize', function() {
            trendChart.resize();
            pieChart.resize();
            barChart.resize();
            radarChart.resize();
        });
    </script>
</body>
</html>

这个仪表盘展示了：

  • 统计卡片
  • 折线图（趋势分析）
  • 饼图（占比分析）
  • 柱状图（地区对比）
  • 雷达图（多维度对比）

第十二步：总结与进阶方向

到这里，你已经学会了 ECharts 的基础用法。让我来给你梳理一下整个学习路径：

你已经掌握的

  1. 基本配置：title、tooltip、legend、xAxis、yAxis、series
  2. 常用图表类型：柱状图、折线图、饼图、散点图、地图、雷达图
  3. 样式定制：颜色、渐变、圆角、阴影
  4. 动态数据：setOption 更新数据
  5. 响应式：resize 事件处理
  6. 实战项目：完整的仪表盘

进阶方向

  1. 数据可视化设计：学习如何用颜色、形状传达信息
  2. 性能优化：处理大数据量、减少渲染耗时
  3. 交互设计：点击、悬停、拖拽等交互效果
  4. 3D 图表：使用 ECharts GL 实现三维可视化
  5. 自定义主题：创建自己的主题配置
  6. 可视化框架：基于 ECharts 封装自己的组件库

推荐的学习资源

  1. 官方文档：https://echarts.apache.org/zh/index.html
  2. 官方示例：https://echarts.apache.org/examples/
  3. GitHub：https://github.com/apache/echarts

最后的话

学习 ECharts 就像学习一门新的语言，一开始可能觉得词汇（配置项）很多，语法（配置结构）复杂，但只要你动手实践，多写几个例子，慢慢就会形成肌肉记忆。

记住几个关键点：

  • 多动手：照着例子敲一遍，比看十遍都管用
  • 多看文档：官方文档是最好的老师
  • 多做项目：找一个真实的数据集，做一个完整的 dashboard
  • 多交流：遇到问题多去社区逛逛

希望这篇教程能帮你打开数据可视化的大门。ECharts 是一个很强大的工具，学好了它，你就能用图表来讲故事，让数据变得有温度、有意义。

有什么具体问题，随时可以来问！

-- 展开阅读全文 --