正文

从新手到高手：echarts图表制作实战教程，轻松学会数据可视化

/0 浏览量
0410

前言

数据可视化是现代数据分析和展示的重要手段，它能够将复杂的数据以图形化的方式呈现出来，使得数据更易于理解和分析。ECharts 是一款强大的开源可视化库，广泛应用于各种场景。本教程旨在帮助新手快速掌握 ECharts 的使用，并逐步成长为高手。

第1章：ECharts简介

1.1 什么是ECharts？

ECharts 是一个使用 JavaScript 实现的开源可视化库，由百度团队开发。它能够提供直观、交互性强、丰富的图表类型，能够满足大部分数据可视化的需求。

1.2 ECharts的特点

  • 丰富的图表类型：支持折线图、柱状图、饼图、地图、雷达图等多种图表类型。
  • 高度可配置：图表的各个方面都可以进行自定义配置，满足不同场景的需求。
  • 跨平台支持：支持 PC 端和移动端，无需额外插件。
  • 丰富的社区资源：拥有庞大的社区，提供丰富的教程和示例。

第2章：ECharts基础入门

2.1 环境搭建

首先，我们需要在项目中引入 ECharts。可以通过以下两种方式：

  1. CDN：通过 CDN 引入 ECharts，适用于快速测试和试用。
  2. 本地下载：下载 ECharts 的压缩包，将其引入到项目中。

2.2 创建基本图表

以下是一个简单的柱状图示例：

<!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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
    <script type="text/javascript">
        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.3 图表交互

ECharts 支持多种交互操作，如点击、鼠标悬停等。以下是一个简单的交互示例：

// 假设我们已经创建了一个图表实例 myChart
myChart.on('click', function (params) {
    console.log(params);
});

第3章：ECharts进阶使用

3.1 高级配置

ECharts 提供了丰富的配置项，可以帮助我们实现更复杂的图表效果。以下是一些常用的配置项：

  • 系列（series）：定义图表的系列，如折线图、柱状图等。
  • 坐标轴（axis）：定义图表的坐标轴，如 X 轴、Y 轴等。
  • 图例（legend）：定义图表的图例，显示各个系列的数据。
  • 提示框（tooltip）：定义图表的提示框，显示数据信息。

3.2 组件扩展

ECharts 支持多种组件扩展，如数据统计、缩放等。以下是一个数据统计组件的示例：

var option = {
    series: [{
        type: 'pie',
        data: [{
            value: 335,
            name: '直接访问'
        }, {
            value: 310,
            name: '邮件营销'
        }, {
            value: 234,
            name: '联盟广告'
        }, {
            value: 135,
            name: '视频广告'
        }, {
            value: 1548,
            name: '搜索引擎'
        }],
        label: {
            formatter: '{b}: {c} ({d}%)'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // 数据统计组件
        labelLine: {
            normal: {
                length: 10,
                length2: 10
            }
        },
        // ...
    }]
};

第4章：实战案例

4.1 案例一：世界地图

以下是一个使用 ECharts 制作世界地图的示例：

var myChart = echarts.init(document.getElementById('container'));
var option = {
    // ...
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    // ...
    series: [{
        name: '访问来源',
        type: 'map',
        mapType: 'world',
        roam: 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)
        }]
    }]
};
myChart.setOption(option);

4.2 案例二：雷达图

以下是一个使用 ECharts 制作雷达图的示例：

var myChart = echarts.init(document.getElementById('container'));
var option = {
    // ...
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data:['预算分配（分配/实际）']
    },
    radar: {
        indicator: [
            { name: '销售（分配）', max: 6500},
            { name: '管理（分配）', max: 16000},
            { name: '信息技术（分配）', max: 30000},
            { name: '客服（分配）', max: 38000},
            { name: '研发（分配）', max: 52000},
            { name: '市场销售（分配）', max: 25000}
        ]
    },
    series: [{
        name: '预算分配（分配/实际）',
        type: 'radar',
        data : [
            {
                value : [4200, 3000, 20000, 35000, 50000, 18000],
                name : '实际'
            }
        ],
        areaStyle: {
            opacity: 0.1
        }
    }]
};
myChart.setOption(option);

总结

通过本教程的学习，相信你已经对 ECharts 的使用有了基本的了解。在实际项目中，你可以根据自己的需求选择合适的图表类型和配置项，制作出美观、实用的数据可视化效果。不断实践和积累，你将逐步成长为 ECharts 的高手。

-- 展开阅读全文 --