教程

轻松上手echarts图表：从入门到精通的教程文档大全

2026-10-17 0 阅读

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松地在网页中渲染数据图表。它具有丰富的图表类型和灵活的配置项，适合各种数据可视化需求。本教程旨在帮助您从入门到精通，全面掌握 ECharts 的使用。

第一章：ECharts 简介

1.1 什么是 ECharts？

ECharts 是一个使用 JavaScript 实现的开源可视化库，由百度团队开发。它提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、散点图、地图等，可以满足大部分数据可视化的需求。

1.2 ECharts 的特点

  • 丰富的图表类型：支持多种图表类型，满足不同场景的需求。
  • 高度可定制：图表的样式、颜色、布局等都可以自由配置。
  • 轻量级：ECharts 的文件体积小，加载速度快。
  • 跨平台：支持主流浏览器，包括 IE、Chrome、Firefox 等。

第二章：ECharts 入门

2.1 环境搭建

要使用 ECharts，首先需要在项目中引入 ECharts 的 JavaScript 文件。可以通过以下几种方式引入：

<!-- 引入 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

2.2 创建图表

在 HTML 中创建一个用于绘制图表的容器，并为其设置一个 ID：

<!-- 创建图表容器 -->
<div id="main" style="width: 600px;height:400px;"></div>

然后，使用 JavaScript 初始化 ECharts 实例，并传入图表的配置项：

// 初始化 ECharts 实例
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);

第三章：ECharts 图表类型详解

3.1 折线图

折线图适用于展示数据随时间或其他连续变量的变化趋势。

// 折线图配置示例
var option = {
    title: {
        text: '折线图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

3.2 柱状图

柱状图适用于比较不同类别的数据。

// 柱状图配置示例
var option = {
    title: {
        text: '柱状图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

3.3 饼图

饼图适用于展示各部分占整体的比例。

// 饼图配置示例
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)'
            }
        }
    }]
};

3.4 散点图

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

// 散点图配置示例
var option = {
    title: {
        text: '散点图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'scatter',
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ]
    }]
};

3.5 地图

地图适用于展示地理空间数据。

// 地图配置示例
var option = {
    title: {
        text: '地图示例'
    },
    tooltip: {},
    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)}
        ]
    }]
};

第四章：ECharts 高级应用

4.1 动画效果

ECharts 支持丰富的动画效果，可以增强图表的视觉效果。

// 动画效果配置示例
var option = {
    title: {
        text: '动画效果示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        animationEffect: {
            effect: 'scale',
            delay: function (idx) {
                return idx * 200;
            }
        }
    }]
};

4.2 交互功能

ECharts 支持丰富的交互功能，如缩放、平移、点击事件等。

// 交互功能配置示例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '交互功能示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 添加点击事件
myChart.on('click', function (params) {
    console.log(params.name + ' 的销量为：' + params.value);
});

第五章：ECharts 实战案例

5.1 数据可视化报告

使用 ECharts 可以制作各种数据可视化报告，如销售报告、市场分析报告等。

5.2 网页图表插件

将 ECharts 集成到网页中，制作各种图表插件，如天气插件、股票插件等。

5.3 移动端图表

使用 ECharts 的移动端适配功能，制作适用于移动端的图表。

第六章：ECharts 源码解析

6.1 ECharts 源码结构

ECharts 的源码结构清晰，易于阅读和理解。

6.2 ECharts 核心算法

ECharts 使用了多种核心算法，如数据解析、图表渲染、动画效果等。

6.3 ECharts 扩展机制

ECharts 提供了丰富的扩展机制，方便用户自定义图表。

第七章：ECharts 学习资源

7.1 官方文档

ECharts 官方文档提供了详细的教程和示例，是学习 ECharts 的首选资源。

7.2 社区论坛

ECharts 社区论坛是交流学习的地方，可以提问、分享经验。

7.3 开源项目

ECharts 有许多优秀的开源项目，可以参考和学习。

通过以上教程，相信您已经对 ECharts 有了一定的了解。希望这份文档能帮助您从入门到精通，成为一名 ECharts 高手！

分享到：
上一篇 吉利帝豪汽车灯光安装：新手指南，安全操作，点亮你的驾驶之旅
下一篇 新手必看！简单易懂的echarts雷达图制作指南，轻松掌握图表制作技巧