JS-Echarts 数据可视化

最新推荐文章于 2024-03-31 04:46:57 发布

Mao.O

最新推荐文章于 2024-03-31 04:46:57 发布

阅读量1.1k

点赞数 1

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

本文链接：https://blog.csdn.net/m0_60155232/article/details/127365582

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Echarts概述

Echarts基本使用步骤

Echarts概述

Echarts是一个使用JS实现的开源可视化库，可以流程的运行在PC和移动端，兼容大部分的浏览器，底层依赖矢量图库ZRender。中文官网

Echarts能满足绝大数可视化图表，方便使用，功能强大。

Echarts基本使用步骤

1.下载echarts.js文件

下载地址：github地址

要是下载速度慢：在此提供：百度网盘下载（提取码:9hyz）里面有单个文件和整个压缩包。

此连接的版本为5.4.0，进入连接下载压缩包。

我们的目标文件存在于dist目录中

要想下载其他版本：

找到自己想要的版本，点击Assets，window系统选择zip压缩包。

如图为两个版本，操作一样的。

2.创建html文件，引用echarts.js文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

3.准备一个容器（带有高宽）用于承装图表。

<body>
    <div id="container" style="width: 400px; height: 400px" ></div>
</body>

4.初始化容器，初始化了才可以承装图表。

<body>
    <div id="container" style="width: 400px; height: 400px" ></div>
    <script>
        //初始化容器
        let eContainer = echarts.init(document.getElementById("container"));
    </script>
</body>

5.去echarts官网选择想要的图表，配置好图表。

我们选择一个最基本的折线图

配置好参数后，左边配置代码都复制下来，打开我们html文件。

将复制的代码复制到文件中，给容器设置配置项即可。

<body>
    <div id="container" style="width: 400px; height: 400px" ></div>
    <script>
        //初始化容器
        let eContainer = echarts.init(document.getElementById("container"));
        //粘贴官网配置好的选项
        option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                        }
                    ]
                };
        //给初始化好的容器添加配置项
        eContainer.setOption(option);
    </script>
</body>

就可以看到效果：