新手如何快速掌握echarts图表制作：入门教程+实战案例解析

引言

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、地图等，能够帮助开发者快速制作出美观、交互性强的图表。对于新手来说，掌握 ECharts 的图表制作需要一定的学习和实践。本文将为你提供一份入门教程和实战案例解析，帮助你快速上手 ECharts。

第一章：ECharts 基础知识

1.1 ECharts 简介

ECharts 是一个基于 HTML5 Canvas 的可视化库，它能够将数据转换为图形，并以图表的形式展示出来。ECharts 的特点包括：

丰富的图表类型：支持多种图表类型，满足不同场景的需求。
高性能：基于 Canvas 渲染，性能优越。
易于使用：提供丰富的配置项，方便开发者快速上手。
高度可定制：支持自定义图表样式和交互效果。

1.2 ECharts 安装与配置

1.2.1 安装

ECharts 支持多种安装方式，以下为几种常见方法：

通过 CDN 链接引入：在 HTML 文件中引入 ECharts 的 CDN 链接。


<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

使用 npm 安装：通过 npm 安装 ECharts。
```
npm install echarts --save
```

1.2.2 配置

ECharts 的配置主要包括以下几个部分：

图表类型：指定图表的类型，如折线图、柱状图等。
数据：提供图表所需的数据。
样式：设置图表的样式，如颜色、字体等。
交互：配置图表的交互效果，如鼠标悬停提示、点击事件等。

第二章：ECharts 图表制作入门教程

2.1 创建图表

以下是一个简单的 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.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化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 支持多种图表类型，以下为几种常见图表类型的配置示例：

2.2.1 折线图

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

2.2.2 饼图

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

2.2.3 地图

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: false
        },
        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)}
        ]
    }]
};

第三章：实战案例解析

3.1 案例一：制作动态数据图表

3.1.1 案例背景

某电商平台希望展示其每日销售额的变化情况，以便更好地了解市场动态。

3.1.2 案例分析

本案例需要实现一个动态数据图表，展示每日销售额的变化。可以使用 ECharts 的折线图来实现。

3.1.3 案例实现

<!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.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));
        var option = {
            title: {
                text: '每日销售额'
            },
            tooltip: {},
            legend: {
                data:['销售额']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销售额',
                type: 'line',
                data: []
            }]
        };
        myChart.setOption(option);
        // 模拟获取数据
        setInterval(function () {
            var date = new Date();
            var day = date.getDate();
            var sales = Math.round(Math.random() * 1000);
            var xAxisData = option.xAxis.data;
            var seriesData = option.series[0].data;
            xAxisData.push(day);
            seriesData.push(sales);
            option.xAxis.data = xAxisData;
            option.series[0].data = seriesData;
            myChart.setOption(option);
        }, 1000);
    </script>
</body>
</html>

3.2 案例二：制作交互式地图

3.2.1 案例背景

某旅游公司希望展示其旅游线路的分布情况，以便更好地推广业务。

3.2.2 案例分析

本案例需要实现一个交互式地图，展示旅游线路的分布情况。可以使用 ECharts 的地图来实现。

3.2.3 案例实现

<!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.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));
        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: false
                },
                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)}
                ]
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

结语

通过本文的入门教程和实战案例解析，相信你已经对 ECharts 图表制作有了初步的了解。在实际应用中，你可以根据自己的需求选择合适的图表类型和配置项，制作出美观、实用的图表。希望本文能帮助你快速掌握 ECharts 图表制作，为你的项目增色添彩。