栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 前沿技术 > 大数据 > 大数据系统

【大数据】【可视化】【工具使用】实验3、使用ECharts绘制折线图和柱状图

【大数据】【可视化】【工具使用】实验3、使用ECharts绘制折线图和柱状图

实验3 ECharts安装

【获取 Apache ECharts】

Apache ECharts 提供了多种安装方式,你可以根据项目的实际情况选择以下任意一种方式安装。

从 GitHub 获取从 npm 获取从 CDN 获取在线定制

接下来分别介绍这些安装方式,以及下载后的目录结构。

1. 从 npm 获取

NPM是随NodeJS一起安装的包管理工具,能够解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

用户允许从服务器下载的包到本地使用。
用户从 NPM 下载并安装自己的服务器程序允许到本地使用。
服务器允许将自己的包或供用户上传到 NPM 使用。
新版的nodejs已经集成成功了npm,所以在npm出现之前也一并安装好。同样可以通过输入“npm -v”表示来测试是否成功安装。

npm install echarts --save

2. 从 CDN 获取
推荐从 jsDelivr 引用echarts。

3. 从 GitHub 获取
apache/echarts 项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code,解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。

  

4. 在线定制
如果只想引入部分模块以减少包体积,可以使用 ECharts 在线定制功能。

【实验任务】

  1. 使用ECharts绘制折线图。

2. 使用ECharts绘制柱状图。

 

【实验内容】

  1. 使用ECharts绘制折线图,操作步骤如下:

(1)新建“实验4-3.html”,输入如下程序代码:

【程序代码】



  
    
    实验4-3
    
    
  
  
    
    
    
  

(2)使用浏览器打开网页查看效果。

2. 使用ECharts绘制柱状图,操作步骤如下:

(1)新建“实验4-4.html”,输入如下程序代码:

【程序代码】



  
    
    实验4-3
    
    
  
  
    
    
    
  

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/773813.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号