ECharts 安装和实现-echarts.min.js
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。
ECharts 遵循 Apache-2.0 开源协议,免费商用。
ECharts 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种设备,可随时随地任性展示。
1、独立版本
我们也可以在 ECharts 的官网上直接下载更多丰富的版本,包含了不同主题跟语言,下载地址:https://echarts.apache.org/zh/builder.html。
这些构建好的 echarts 提供了下面这几种定制:
完全版:echarts/dist/echarts.js,体积最大,包含所有的图表和组件,所包含内容参见:echarts/echarts.all.js。
常用版:echarts/dist/echarts.common.js,体积适中,包含常见的图表和组件,所包含内容参见:echarts/echarts.common.js。
精简版:echarts/dist/echarts.simple.js,体积较小,仅包含最常用的图表和组件,所包含内容参见:echarts/echarts.simple.js。
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
Staticfile CDN(国内) : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
jsDelivr:https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js
Staticfile CDN(国内)
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>第一个 ECharts 实例</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: '第一个 ECharts 实例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>
jsDelivr
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>第一个 ECharts 实例</title><!-- 引入 echarts.js --><script src="https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: '第一个 ECharts 实例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>
cdnjs
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>第一个 ECharts 实例</title><!-- 引入 echarts.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: '第一个 ECharts 实例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>
ECharts 安装和实现-echarts.min.js相关推荐
- echarts.js(echarts.min.js)的内容
下载并引入echarts.js文件 ->图表依赖这个js库 打开官网https://echarts.apache.org/zh/index.html 点击上面的下载-下载 点击 方法一:从下载的 ...
- 下载Echarts.min.js和Echart-gl.min.js
下载Echarts.min.js和Echart-gl.min.js 最近在一个数据处理的APP,其中需要用到Echarts.min.js和Echart-gl.min.js ,话不多说,直接上图 先附上 ...
- echarts.min.js从官网的下载步骤
1. echarts 官网 https://echarts.apache.org/zh/index.html 2. 点击下载 3. 选择版本的Dist,点击进入 4. 选择echarts.min.js ...
- 如何找到echarts.min.js,并使用echarts
现在登录Echarts官网,找到下载界面,你会发现下载界面变成在这个界面你已经找不到完整版.精简版之类的,可以下载的全是代码,这对于小白来说,是不是一头雾水啊!没关系,接着往下看!!! 1.下载Ech ...
- echarts.min.js的引入
1)使用地址引入 <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></scr ...
- ECharts安装和使用
简介 ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求. ECharts 遵循 Apache-2.0 开源协议,免费商用. ECharts 兼容当前绝 ...
- Vue3 --- 安装和使用echarts
1. npm安装 echarts npm install echarts --save 2. 引入Main.js中 // 引入方式如下,否则报错 import * as echarts from 'e ...
- 在vue3.0中安装并使用echarts
(vue3.0安装并使用echarts) 1. 安装echarts npm install echarts --save 2. main.js import { createApp } from 'v ...
- 简单的echarts安装教程
echarts配置方式 两种方式使用echarts 两种方式使用echarts 通过 npm 获取 echarts,npm install echarts --save 引入echarts impor ...
最新文章
- 干货!整理了50个 Pandas 高频使用技巧,强烈建议收藏!
- 入门Java菜鸟,JDK和Eclipse的安装一定要知道
- Codeforces Global Round 14 F. Phoenix and Earthquake 思维 + 并查集
- linux下的安装命令行工具下载,linux系统程序安装(二)yum工具2-yum源及包下载
- .NET学习笔记:文件和注册表操作
- SQL Server 数据库文件管理
- access vba在新建查询前查看查询名是否存在
- mysql用一条sql语句删除重复记录_mysql中删除重复记录,并保留重复数据中的一条数据的SQL语句...
- 【Java 网络编程】网络通信原理、TCP、UDP 回显服务
- 可伸缩多线程任务队列
- 个人数据常用备份策略
- java实现kafka发送消息和接收消息(java无注解方式+springBoot注解方式)
- 阶乘浅析poj1150 3406 zoj1222 2358
- 计算机培训心得ppt展示,ppt制作学习心得
- 卡尔曼滤波器MATLAB实现(从一维到三维)
- 163邮箱无法通过POP3接收邮件
- Ubuntu Linux 15.04安装 nginx + passenger
- Oracle11g64位安装步骤
- 计算机学硕报考院校人数,2020考研报考人数:这些学校人数过万!
- 微信公众号考试成绩查分系统
热门文章
- 论文阅读:Coarse to Fine Vertebrae Localization and Segmentation with SpatialConfiguration-Net and U-Net
- PowerPoint PIA中Application没有RecentFile属性的解决方案
- 本地调试(local debug)Hive源码
- rsi指标如何计算怎样分析RSI指标
- 基于MFC实现的赛车游戏
- 【演示文稿制作软件】Focusky教程 | 正文页的排版小技巧 - 留白与距离
- 一篇文章了解新发布的Java JDK 11
- 安卓pdf阅读器_电子书阅读器选哪个好?这篇文章告诉你!
- hdu 6044 hdu 6305 笛卡尔树
- wp mysql数据库大小_wordpress数据库容量