新手学ECharts，快速入门实战攻略！

了解ECharts

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松实现各种数据图表的绘制。它拥有丰富的图表类型，如折线图、柱状图、饼图、地图等，非常适合数据可视化展示。

入门准备

1. 环境搭建

首先，确保你的电脑上安装了 Node.js 和 npm（Node.js 的包管理器）。这些是后续操作的基础。

# 安装 Node.js
# 链接：https://nodejs.org/

# 安装 npm
# 链接：https://www.npmjs.com/

2. 创建项目

创建一个新的文件夹，用于存放你的 ECharts 项目。

mkdir my-echarts-project
cd my-echarts-project

3. 初始化项目

使用 npm 初始化项目，创建 package.json 文件。

npm init -y

4. 引入 ECharts

你可以通过下载 ECharts 的静态文件或者使用 CDN 链接来引入 ECharts。

下载静态文件

# 进入项目文件夹
cd my-echarts-project

# 下载 ECharts
wget https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js

# 下载 ECharts 的主题文件（可选）
wget https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/extension/map.js
wget https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/extension/dataTool.min.js

使用 CDN 链接

在你的 HTML 文件中引入 ECharts 的 CDN 链接：

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

实战演练

1. 基础图表

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

<!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">
    // 基于准备好的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. 高级图表

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 type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        title: {
            text: '世界地图示例'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b} <br/>{c} (人次)'
        },
        visualMap: {
            min: 0,
            max: 100,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本，默认为数值文本
            calculable: true
        },
        geo: {
            map: 'world',
            roam: true,
            label: {
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        series: [
            {
                name: '访问来源',
                type: 'map',
                mapType: 'world',
                roam: true,
                data: [
                    {name: '印度', value: 100},
                    {name: '美国', value: 200},
                    {name: '中国', value: 300}
                ]
            }
        ]
    };

    myChart.setOption(option);
</script>
</body>
</html>

总结

通过以上步骤，你已经掌握了 ECharts 的基本使用方法。ECharts 提供了丰富的图表类型和配置项，你可以根据自己的需求进行定制。不断实践，你会发现 ECharts 的强大之处。祝你在数据可视化道路上越走越远！