正文

从入门到精通：echarts图表绘制全攻略，零基础快速上手教程

/0 浏览量
0706

引言

在数据可视化领域，echarts 是一款非常流行的 JavaScript 库，它可以帮助开发者轻松创建各种丰富的图表。无论是展示数据趋势、比较不同数据集，还是进行交互式分析，echarts 都能提供强大的支持。本教程将从零基础开始，带你一步步掌握 echarts 图表绘制的技巧，最终达到精通的水平。

第一部分：echarts 基础知识

1.1 什么是 echarts？

echarts 是一个使用 JavaScript 实现的开源可视化库，它支持多种图表类型，包括折线图、柱状图、饼图、散点图、地图等。echarts 的特点是易于使用、高度可定制、支持多种交互功能。

1.2 安装 echarts

首先，你需要将 echarts 引入到你的项目中。可以通过以下几种方式：

  • 通过 CDN 链接引入
  • 使用 npm 或 yarn 安装

以下是使用 CDN 链接引入 echarts 的示例代码：

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

1.3 创建图表的基本结构

在 HTML 中，你可以通过创建一个 <div> 元素来作为图表的容器。然后，使用 JavaScript 初始化图表，并设置图表的配置项。

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        // 图表配置项
    };
    myChart.setOption(option);
</script>

第二部分：echarts 图表类型

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 柱状图

柱状图常用于比较不同数据集之间的差异。以下是一个简单的柱状图示例：

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

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

2.4 散点图

散点图常用于展示两个变量之间的关系。以下是一个简单的散点图示例：

var option = {
    title: {
        text: '散点图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'scatter',
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ]
    }]
};

2.5 地图

地图常用于展示地理空间数据。以下是一个简单的地图示例：

var option = {
    title: {
        text: '地图示例'
    },
    tooltip: {},
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['销量']
    },
    xAxis: {
        type: 'category',
        data: ['北京', '天津', '上海', '重庆', '河北', '山西', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '海南', '四川', '贵州', '云南', '陕西', '甘肃', '青海', '台湾', '内蒙古', '广西', '西藏', '宁夏', '新疆', '香港', '澳门']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'map',
        mapType: 'china',
        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)}
        ]
    }]
};

第三部分：echarts 高级功能

3.1 交互式图表

echarts 支持多种交互式功能，例如缩放、平移、数据筛选等。以下是一个交互式折线图示例：

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

var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data:['销量']
    },
    xAxis: {
        type: 'category',
        data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

myChart.setOption(option);

// 交互式功能示例
myChart.on('dataZoom', function (params) {
    console.log(params);
});

3.2 动画效果

echarts 支持丰富的动画效果，例如渐变、缩放、旋转等。以下是一个具有动画效果的折线图示例：

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

var option = {
    title: {
        text: '动画效果示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20],
        markPoint: {
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        },
        markLine: {
            data: [
                {type: 'average', name: '平均值'}
            ]
        },
        animation: true,
        animationDuration: 1000
    }]
};

myChart.setOption(option);

第四部分：echarts 应用实例

4.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.2/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: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

4.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 src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));

        var option = {
            title: {
                text: '交互式数据大屏示例'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data:['销量']
            },
            series: [
                {
                    name: '销量',
                    type: 'map',
                    mapType: 'china',
                    roam: true,
                    label: {
                        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);
    </script>
</body>
</html>

总结

通过本教程的学习，你已经掌握了 echarts 图表绘制的基本知识和技巧。从创建图表的基本结构，到各种图表类型的绘制，再到高级功能和应用实例，你都应该有了深入的了解。现在，你可以开始尝试使用 echarts 创建自己的数据可视化项目，并将其应用于实际场景中。祝你学习愉快！

-- 展开阅读全文 --