正文

新手必看！轻松掌握ECharts图表制作：全面教程与实战案例

/0 浏览量
0825

ECharts，作为一款强大的前端图表库，已经成为数据可视化领域的热门选择。对于新手来说，掌握ECharts图表制作不仅能提升数据处理能力，还能让数据展示更加生动形象。本文将为你提供一个全面的ECharts教程，包括基础知识、图表制作技巧，以及实战案例。

第一节：ECharts入门

1.1 什么是ECharts？

ECharts是一个使用JavaScript实现的开源可视化库，它提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、散点图等。ECharts旨在为用户提供简单、便捷的数据可视化解决方案。

1.2 ECharts的特点

  • 高性能：采用Canvas渲染，保证了在低版本浏览器中的性能；
  • 易于上手：简单易懂的API和丰富的示例；
  • 丰富的图表类型：涵盖各类图表，满足不同需求；
  • 高度可定制：支持个性化配置，满足不同视觉风格。

第二节：ECharts基本使用

2.1 创建ECharts实例

在使用ECharts之前，需要引入其官方提供的JS文件。以下是一个创建ECharts实例的基本示例：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>

<script type="text/javascript">
    // 初始化echarts实例
    var myChart = echarts.init(document.getElementById('container'));

    // 指定图表的配置项和数据
    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>

2.2 配置图表选项

ECharts图表的配置项分为以下几个部分：

  • title：图表标题；
  • tooltip：鼠标悬停提示；
  • legend：图例；
  • xAxis：X轴配置；
  • yAxis：Y轴配置；
  • series：图表系列。

以上只是一个简单的ECharts示例，你可以根据自己的需求对配置项进行修改和扩展。

第三节：ECharts图表类型

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)'
            }
        }
    }]
};

第四节：ECharts实战案例

下面，我们将通过一个简单的实战案例来学习如何使用ECharts制作图表。

4.1 案例背景

某电商平台的销售数据显示，不同商品在不同月份的销量情况如下表所示：

商品类型 一月 二月 三月 四月 五月 六月
衬衫 200 150 180 250 300 350
羊毛衫 150 100 120 180 220 250
雪纺衫 100 80 90 110 130 150
裤子 80 60 70 90 100 110
高跟鞋 60 40 50 60 70 80
袜子 50 30 40 50 60 70

4.2 案例目标

根据上述数据，使用ECharts制作一个折线图，展示各商品类型在上半年（1-6月）的销量趋势。

4.3 案例实现

  1. 引入ECharts库；
  2. 创建ECharts实例；
  3. 配置图表选项，包括标题、坐标轴、数据等；
  4. 渲染图表。

以下是具体的代码实现：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>

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

<script type="text/javascript">
    // 初始化echarts实例
    var myChart = echarts.init(document.getElementById('container'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '商品类型销量趋势图'
        },
        tooltip: {},
        legend: {
            data:['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        xAxis: {
            data: ["一月", "二月", "三月", "四月", "五月", "六月"]
        },
        yAxis: {},
        series: [{
            name: '衬衫',
            type: 'line',
            data: [200, 150, 180, 250, 300, 350]
        }, {
            name: '羊毛衫',
            type: 'line',
            data: [150, 100, 120, 180, 220, 250]
        }, {
            name: '雪纺衫',
            type: 'line',
            data: [100, 80, 90, 110, 130, 150]
        }, {
            name: '裤子',
            type: 'line',
            data: [80, 60, 70, 90, 100, 110]
        }, {
            name: '高跟鞋',
            type: 'line',
            data: [60, 40, 50, 60, 70, 80]
        }, {
            name: '袜子',
            type: 'line',
            data: [50, 30, 40, 50, 60, 70]
        }]
    };

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

通过以上实战案例，相信你已经掌握了ECharts的基本使用方法和制作技巧。在接下来的学习过程中，你可以尝试更多的图表类型和个性化配置，使你的数据可视化作品更加精美。

-- 展开阅读全文 --