从零开始轻松掌握echarts图表制作：新手入门教程及实战案例解析

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，可以轻松地将数据转换为直观的图表。对于新手来说，ECharts 提供了一个简单易用的平台来创建图表。本教程将从零开始，逐步介绍如何使用 ECharts 制作图表，并包含一些实战案例解析。

基础知识

在开始之前，我们需要了解一些基础知识：

1. ECharts 的安装

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

CDN 链接：直接通过 CDN 链接引入 ECharts 的最新版本。

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

npm 安装：如果使用 npm 管理项目依赖，可以通过以下命令安装 ECharts。

npm install echarts --save

2. HTML 结构

在 HTML 文档中，我们需要创建一个用于放置图表的容器。通常，这是一个 div 元素。

<div id="main" style="width: 600px;height:400px;"></div>

3. 初始化 ECharts 实例

在 JavaScript 中，我们需要初始化 ECharts 实例，并将其绑定到之前创建的容器上。

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

制作第一个图表

1. 配置项

ECharts 的配置项分为两个部分：options 和 series。

options：全局配置项。
series：图表系列配置项。

2. 矩形图

下面是一个简单的矩形图示例：

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

3. 展示效果

在浏览器中打开 HTML 文件，你会看到一个矩形图展示了不同商品的销量。

实战案例解析

1. 饼图

下面是一个饼图示例，展示了不同类别产品的市场份额：

var option = {
    title: {
        text: '饼图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '直接访问'},
                {value: 735, name: '邮件营销'},
                {value: 580, name: '联盟广告'},
                {value: 484, name: '视频广告'},
                {value: 300, name: '搜索引擎'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

myChart.setOption(option);

2. 地理坐标系

下面是一个使用地理坐标系的地图示例：

var option = {
    title: {
        text: '地图示例',
        subtext: '数据来自网络',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['北京', '天津', '上海', '重庆', '河北', '山西', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '海南', '四川', '贵州', '云南', '陕西', '甘肃', '青海', '台湾', '内蒙古', '广西', '西藏', '宁夏', '新疆', '香港', '澳门']
    },
    visualMap: {
        min: 0,
        max: 2000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '销量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    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 制作图表。ECharts 提供了丰富的图表类型和配置项，可以满足各种数据可视化的需求。在实际应用中，你可以根据自己的需求选择合适的图表类型和配置项，并通过不断实践来提高自己的技能。