入门

从零开始，轻松学会Echarts图表制作：实战教程视频，一步到位！

2026-08-30 0 阅读

第一章：Echarts简介与基础

1.1 Echarts是什么？

Echarts是一款使用JavaScript编写的开源可视化库，它可以帮助用户将数据通过图形的形式展示出来，使得数据更加直观易懂。Echarts广泛应用于各种场景，如网站、移动端应用、桌面软件等。

1.2 Echarts的特点

  • 丰富的图表类型：支持多种图表类型，如折线图、柱状图、饼图、散点图、地图等。
  • 高度可定制：可以通过配置项对图表进行详细的定制，满足各种需求。
  • 跨平台：支持多种浏览器和平台，包括PC端和移动端。
  • 社区活跃：拥有庞大的社区，可以获取丰富的资源和帮助。

1.3 学习Echarts的步骤

  1. 熟悉HTML、CSS、JavaScript等前端技术。
  2. 了解Echarts的基本使用方法。
  3. 学习各种图表的配置和实现。
  4. 实战练习，制作自己的图表。

第二章：Echarts环境搭建

2.1 安装Node.js

Echarts依赖于Node.js环境，因此首先需要安装Node.js。可以从Node.js官网下载安装包，按照提示完成安装。

2.2 安装Echarts

安装Echarts可以通过npm（Node.js包管理器）来完成。在命令行中输入以下命令：

npm install echarts --save

2.3 创建项目

创建一个HTML文件，引入Echarts的CSS和JavaScript文件。例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Echarts图表示例</title>
    <!-- 引入Echarts样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.css">
</head>
<body>
    <!-- 图表容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <!-- 引入Echarts库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script>
        // 初始化图表
        var myChart = echarts.init(document.getElementById('main'));
        // 配置图表
        var option = {
            title: {
                text: 'Echarts图表示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

第三章：Echarts图表制作实战

3.1 基础图表

3.1.1 柱状图

柱状图常用于展示不同类别数据的对比。以下是一个简单的柱状图示例：

var myChart = echarts.init(document.getElementById('main'));
var option = {
    title: {
        text: '柱状图示例'
    },
    tooltip: {},
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
myChart.setOption(option);

3.1.2 折线图

折线图常用于展示数据随时间变化的趋势。以下是一个简单的折线图示例：

var myChart = echarts.init(document.getElementById('main'));
var option = {
    title: {
        text: '折线图示例'
    },
    tooltip: {},
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line'
    }]
};
myChart.setOption(option);

3.2 高级图表

3.2.1 饼图

饼图常用于展示各部分占总体的比例。以下是一个简单的饼图示例：

var myChart = echarts.init(document.getElementById('main'));
var option = {
    title: {
        text: '饼图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    series: [{
        name: '销量',
        type: 'pie',
        radius: '50%',
        data: [
            {value: 5, name: '衬衫'},
            {value: 20, name: '羊毛衫'},
            {value: 36, name: '雪纺衫'},
            {value: 10, name: '裤子'},
            {value: 10, name: '高跟鞋'},
            {value: 20, name: '袜子'}
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};
myChart.setOption(option);

3.2.2 地图

地图常用于展示地理分布数据。以下是一个简单的中国地图示例：

var myChart = echarts.init(document.getElementById('main'));
var option = {
    title: {
        text: '中国地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '天津',value: Math.round(Math.random() * 1000)},
                {name: '上海',value: Math.round(Math.random() * 1000)},
                {name: '重庆',value: Math.round(Math.random() * 1000)},
                {name: '河北',value: Math.round(Math.random() * 1000)},
                {name: '山西',value: Math.round(Math.random() * 1000)},
                {name: '辽宁',value: Math.round(Math.random() * 1000)},
                {name: '吉林',value: Math.round(Math.random() * 1000)},
                {name: '黑龙江',value: Math.round(Math.random() * 1000)},
                {name: '江苏',value: Math.round(Math.random() * 1000)},
                {name: '浙江',value: Math.round(Math.random() * 1000)},
                {name: '安徽',value: Math.round(Math.random() * 1000)},
                {name: '福建',value: Math.round(Math.random() * 1000)},
                {name: '江西',value: Math.round(Math.random() * 1000)},
                {name: '山东',value: Math.round(Math.random() * 1000)},
                {name: '河南',value: Math.round(Math.random() * 1000)},
                {name: '湖北',value: Math.round(Math.random() * 1000)},
                {name: '湖南',value: Math.round(Math.random() * 1000)},
                {name: '广东',value: Math.round(Math.random() * 1000)},
                {name: '海南',value: Math.round(Math.random() * 1000)},
                {name: '四川',value: Math.round(Math.random() * 1000)},
                {name: '贵州',value: Math.round(Math.random() * 1000)},
                {name: '云南',value: Math.round(Math.random() * 1000)},
                {name: '陕西',value: Math.round(Math.random() * 1000)},
                {name: '甘肃',value: Math.round(Math.random() * 1000)},
                {name: '青海',value: Math.round(Math.random() * 1000)},
                {name: '台湾',value: Math.round(Math.random() * 1000)},
                {name: '内蒙古',value: Math.round(Math.random() * 1000)},
                {name: '广西',value: Math.round(Math.random() * 1000)},
                {name: '西藏',value: Math.round(Math.random() * 1000)},
                {name: '宁夏',value: Math.round(Math.random() * 1000)},
                {name: '新疆',value: Math.round(Math.random() * 1000)},
                {name: '香港',value: Math.round(Math.random() * 1000)},
                {name: '澳门',value: Math.round(Math.random() * 1000)}
            ]
        }
    ]
};
myChart.setOption(option);

第四章：实战案例

4.1 制作一个公司销售数据可视化报告

本案例将使用Echarts制作一个公司销售数据可视化报告，包括销售额、客户数量、产品类别等数据的展示。

4.1.1 数据准备

首先，需要准备以下数据：

  • 销售额：各月份的销售额。
  • 客户数量：各月份的客户数量。
  • 产品类别：各产品类别的销售额。

4.1.2 图表制作

  1. 销售额折线图：
var myChart = echarts.init(document.getElementById('sales'));
var option = {
    title: {
        text: '销售额折线图'
    },
    tooltip: {},
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销售额',
        type: 'line',
        data: [120, 200, 150, 80, 70, 110, 130, 150, 180, 200, 220, 250]
    }]
};
myChart.setOption(option);
  1. 客户数量柱状图：
var myChart = echarts.init(document.getElementById('customers'));
var option = {
    title: {
        text: '客户数量柱状图'
    },
    tooltip: {},
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '客户数量',
        type: 'bar',
        data: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60]
    }]
};
myChart.setOption(option);
  1. 产品类别饼图：
var myChart = echarts.init(document.getElementById('products'));
var option = {
    title: {
        text: '产品类别饼图'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['产品A', '产品B', '产品C', '产品D', '产品E']
    },
    series: [{
        name: '产品类别',
        type: 'pie',
        radius: '50%',
        data: [
            {value: 335, name: '产品A'},
            {value: 310, name: '产品B'},
            {value: 234, name: '产品C'},
            {value: 135, name: '产品D'},
            {value: 1548, name: '产品E'}
        ]
    }]
};
myChart.setOption(option);

4.2 制作一个网站流量分析报告

本案例将使用Echarts制作一个网站流量分析报告，包括访问量、访问来源、用户行为等数据的展示。

4.2.1 数据准备

首先，需要准备以下数据：

  • 访问量：每天的访问量。
  • 访问来源：搜索引擎、直接访问、推荐链接等。
  • 用户行为：页面停留时间、跳出率等。

4.2.2 图表制作

  1. 访问量折线图：
var myChart = echarts.init(document.getElementById('visits'));
var option = {
    title: {
        text: '访问量折线图'
    },
    tooltip: {},
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '访问量',
        type: 'line',
        data: [100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650]
    }]
};
myChart.setOption(option);
  1. 访问来源饼图：
var myChart = echarts.init(document.getElementById('sources'));
var option = {
    title: {
        text: '访问来源饼图'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['搜索引擎', '直接访问', '推荐链接']
    },
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: [
            {value: 335, name: '搜索引擎'},
            {value: 310, name: '直接访问'},
            {value: 234, name: '推荐链接'}
        ]
    }]
};
myChart.setOption(option);
  1. 用户行为柱状图：
var myChart = echarts.init(document.getElementById('behavior'));
var option = {
    title: {
        text: '用户行为柱状图'
    },
    tooltip: {},
    xAxis: {
        type: 'category',
        data: ['页面停留时间', '跳出率']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '用户行为',
        type: 'bar',
        data: [5, 10]
    }]
};
myChart.setOption(option);

第五章：总结

通过本教程，您已经掌握了Echarts图表制作的基本知识和实战技巧。在实际应用中，可以根据需求选择合适的图表类型和配置项，制作出美观、实用的图表。希望您能够将所学知识应用到实际项目中，为数据可视化领域贡献自己的力量。

分享到：
上一篇 从零开始，轻松掌握素描技巧：掌握基础，开启绘画新篇章
下一篇 从小白到高手：C语言编程入门必备学习资料汇编

相关文章

从零开始，轻松掌握素描技巧：掌握基础，开启绘画新篇章
2026-08-29
如何轻松入门素描，掌握黑白灰色彩搭配技巧
2026-08-29
从小白到高手：C语言编程入门必备学习资料汇编
2026-08-30
HTML5快速上手：从零开始打造网页基础技能实战指南
HTML5快速上手：从零开始打造网页基础技能实战指南
2026-08-30