教程

从入门到精通：轻松学会使用echarts制作图表的完整教程

2026-08-02 0 阅读

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松实现各种数据图表的展示。无论是数据分析师、前端开发者还是普通用户，ECharts 都能帮助你将数据转化为直观的图表。下面，我们就从入门到精通，一步步教你如何使用 ECharts 制作图表。

第一节：ECharts 入门

1.1 ECharts 简介

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

1.2 ECharts 安装

ECharts 支持多种安装方式，以下列出两种常用方法：

方法一：通过 CDN 链接引入

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>

方法二：下载 ECharts 包

  1. 访问 ECharts 官网（https://echarts.apache.org/）。
  2. 下载 ECharts 包，包括 echarts.min.js 和 echarts-gl.min.js（如果需要 3D 图表）。
  3. 将下载的文件放置在本地项目中。

1.3 ECharts 基本用法

  1. 创建一个 HTML 文件，并引入 ECharts 库。
  2. 创建一个用于存放图表的 DOM 元素。
  3. 使用 echarts.init() 方法初始化 ECharts 实例。
  4. 设置图表的配置项和系列数据。
  5. 使用 setOption() 方法将配置项和系列数据应用到 ECharts 实例上。

第二节：ECharts 图表类型

ECharts 提供了丰富的图表类型，以下列举几种常用类型及其基本用法：

2.1 折线图

var myChart = echarts.init(document.getElementById('main'));

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

myChart.setOption(option);

2.2 柱状图

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);

2.3 饼图

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '饼图示例'
    },
    tooltip: {},
    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: '袜子'}
        ]
    }]
};

myChart.setOption(option);

2.4 散点图

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '散点图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'scatter',
        data: [
            [10.0, 8.04],
            [8.07, 6.95],
            [7.80, 4.82],
            [4.82, 7.47],
            [4.75, 4.75],
            [4.50, 2.48],
            [4.54, 3.75],
            [4.74, 1.5],
            [4.36, 1.04],
            [4.42, 2.62]
        ]
    }]
};

myChart.setOption(option);

2.5 地图

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图示例'
    },
    tooltip: {},
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['销量']
    },
    series: [{
        name: '销量',
        type: 'map',
        mapType: 'china',
        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);

第三节：ECharts 高级用法

3.1 动态数据更新

ECharts 支持动态数据更新，以下是一个动态更新数据示例：

setInterval(function () {
    var data0 = option.series[0].data;
    var data1 = option.series[1].data;
    data0.shift();
    data0.push(Math.round(Math.random() * 1000));
    data1.shift();
    data1.push(Math.round(Math.random() * 1000));

    myChart.setOption({
        series: [{
            data: data0
        }, {
            data: data1
        }]
    });
}, 2000);

3.2 事件交互

ECharts 支持丰富的交互功能，例如点击、鼠标悬停、拖拽等。以下是一个点击事件示例：

myChart.on('click', function (params) {
    alert('点击了 ' + params.name + '，值为 ' + params.value);
});

3.3 主题配置

ECharts 提供了丰富的主题配置，你可以通过修改主题配置文件来自定义图表样式。以下是一个简单示例：

var theme = {
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#e5323e'],
    title: {
        itemGap: 8,
        textStyle: {
            color: '#333'
        }
    },
    tooltip: {
        trigger: 'item',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataZoom: {},
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
    },
    series: [{
        name: '销量',
        type: 'line',
        smooth: true,
        startAnimation: false,
        data: [10, 20, 30, 40, 50, 60]
    }]
};

myChart.setOption(option, true);

第四节：ECharts 实战案例

4.1 柱状图展示销售额

以下是一个柱状图展示销售额的实战案例：

  1. 准备数据：假设你有以下销售额数据：

    • 月份：1月、2月、3月、4月、5月
    • 销售额：1000、1500、2000、2500、3000

  2. 创建图表：使用 ECharts 的柱状图类型，将数据展示在图表中。

4.2 饼图展示用户占比

以下是一个饼图展示用户占比的实战案例：

  1. 准备数据：假设你有以下用户数据：

    • 用户类型：男性、女性、未知
    • 用户数量：500、300、200

  2. 创建图表：使用 ECharts 的饼图类型，将数据展示在图表中。

第五节：总结

通过本文的介绍，相信你已经对 ECharts 有了一定的了解。从入门到精通，我们学习了 ECharts 的基本用法、图表类型、高级用法以及实战案例。希望这篇文章能帮助你更好地掌握 ECharts，将数据转化为直观的图表，为你的工作带来便利。

分享到：
上一篇 彩泥手工，轻松学，图版教程帮你一步步变创意达人
下一篇 从入门到精通：Android蓝牙开发全攻略，轻松实现设备配对与数据传输

相关文章

彩泥手工，轻松学，图版教程帮你一步步变创意达人
2026-08-02
儿童彩泥手工制作：轻松学会卡通角色DIY
2026-08-02
从入门到精通：Android蓝牙开发全攻略，轻松实现设备配对与数据传输
2026-08-02
轻松上手ECharts雷达图制作：从基础到实战，带你玩转数据可视化
2026-08-02