（前端）使用Apache ECharts绘制可视化图表

一角的努力

已于 2023-11-22 20:58:25 修改

阅读量970

点赞数 13

分类专栏：前端文章标签：前端 echarts javascript

于 2023-11-22 19:21:16 首次发布

本文链接：https://blog.csdn.net/weixin_64388392/article/details/134543616

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本篇文章给大家分享一个前端绘图利器：Apache ECharts。

1、Apache ECharts简介

Apache ECharts是一个基于JavaScript的开源数据可视化图表库，最初由百度团队开发，于2018年初捐赠给Apache基金会，2021年1月26日晚，Apache基金会官方宣布 ECharts项目正式毕业，成为Apache顶级项目。

Apache ECharts可完成多种2D或3D前端图表的绘制，包括数据折线图、柱状图、饼图、坐标图、热力图等，具有着丰富的可视化类型，绚丽的特效等（最主要是完全免费，还很好用），对于前端程序员绘制前端数据图表非常有帮助。

2、ECharts的使用

Apache ECharts的使用主要由以下几个步骤构成：

2.1、引入echarts.js文件

<script src="../static/js/echarts.min.js"></script>

echarts.js文件的下载方法：

（1）进入ECharts官网：Apache ECharts

（2）点击进入下载界面：

（3）下载方式：

（3.1）方法一：github下载（点击dist进入github进行下载）

（3.2）方法二：从npm安装（这个方法博主没试过，大家可以自己去试一下）

（3.3）方法三：定制下载

2.2、准备一个盒子模型，定义好宽高，最终的图表就在这个盒子中呈现

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

2.3、获取定义的盒子模型元素并实例化echarts对象

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

2.4、设置相应图表配置项（这里以折线图为例）

（1）点击示例进入界面后选择折线图

这里将上面JS语言的配置项代码进行配置后就会在对应盒子中显示上图右方的折线图。

3、使用示例

注意：此示例绘制的是动态折线图，绘制动态图表需要引入jquery文件，文件下载可参考此文章：【精选】jquery下载所有版本（实时更新）_jquery.min.js最新版本_xsqsharp的博客-CSDN博客

示例代码如下（以动态折线图为例）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts绘制动态折线图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 80%;
            height: 80vh;
            margin: 50px auto;
            background-color: #dbdbdb;
        }
    </style>
</head>

<body>
    <div id="main"></div>

    <!-- 引入echarts.min.js和jquery-3.5.1.min.js文件 -->
    <script src="./echarts.min.js"></script>
    <script src="./jquery-3.5.1.min.js"></script>
    <script>
        // 定义两个空数组用于存储x轴与y轴数据
        var y_data = [];
        var x_data = [];

        function lineChart(x_value, y_value) {
            y_data.push(y_value);
            x_data.push(x_value);
            // 当x轴数据长度大于8时，折线图向左移动
            if (x_data.length > 8) {
                x_data.shift();
                y_data.splice(0, 1);
            }
            // 实例化echarts对象
            var myChart = echarts.init(document.querySelector('#main'));
            // 设定配置项
            var option = {
                title: {
                    text: '折线图',
                    textStyle: {
                        left: 'center',
                        fontSize: 16,
                        fontFamily: 'Poppins'
                    }
                },
                xAxis: {
                    data: x_data
                },
                yAxis: {
                    // y轴刻度最小与最大值
                    min: 40,
                    max: 100,
                    splitNumber: 5
                },
                series: [
                    {
                        data: y_data,
                        type: 'line',
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                fontSize: 14
                            }
                        },
                        lineStyle: {
                            color: 'green'
                        },
                        // 折线拐点颜色
                        itemStyle: {
                            color: "red"
                        }
                    }
                ],
                // 图表相对于整个容器的定位
                grid: {
                    top: "30px",
                    left: "30px",
                    right: "10px",
                    bottom: "20px"
                }
            };
            myChart.setOption(option);
        }

        // 生成指定范围内的随机整数
        function getRandomNumber(min, max) {
            // 得到范围内的一个随机数
            let random = Math.random() * (max - min + 1) + min;
            // 向下取整
            let randomNumber = Math.floor(random);
            return randomNumber;
        }

        // 横、纵坐标值
        var x_value = 0;
        var y_value;

        // 数据动态更新
        function refresh(min, max, fun) {
            // 生成随机整数
            y_value = getRandomNumber(min, max);
            // 调用函数，绘制折线图
            fun(x_value, y_value);
            x_value = x_value + 1;
            // 设置一个定时器，每隔一秒调用一次refresh()函数
            setTimeout(() => {
                refresh(min, max, fun);
            }, 1000)
        }

        refresh(50, 90, lineChart);
    </script>
</body>

</html>

上述代码运行结果如下所示：

OK，以上就是本次文章的全部内容，大家可根据自己的需要去绘制相应图表，感谢大家的阅读！