JS-Echarts 数据可视化

得意时要看淡,失意时要看开。不论得意失意,切莫大意;不论成功失败,切莫止步。志得意满时,需要的是淡然,给自己留一条退路;失意落魄时,需要的是泰然,给自己觅一条出路JS-Echarts 数据可视化,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

目录

Echarts概述

Echarts基本使用步骤


Echarts概述

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

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

Echarts基本使用步骤

1.下载echarts.js文件

 下载地址:github地址 

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

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

JS-Echarts 数据可视化

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

JS-Echarts 数据可视化

 要想下载其他版本:

JS-Echarts 数据可视化

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

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

JS-Echarts 数据可视化

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官网选择想要的图表,配置好图表。

JS-Echarts 数据可视化

JS-Echarts 数据可视化 

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

JS-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>

就可以看到效果: 

JS-Echarts 数据可视化

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/154555.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!