Echarts--来自官网
引入 ECharts
ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="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>
这样你的第一个图表就诞生了!
接口文档查看:http://echarts.baidu.com/api.html#echarts.init
Echarts--来自官网的更多相关文章
- 十分钟掌握Pandas(上)——来自官网API
十分钟掌握Pandas(上)——来自官网API 其实不止10分钟,这么多,至少一天 一.numpy和pandas numpy是矩阵计算库,pandas是数据分析库,关于百度百科,有对pandas的介绍 ...
- 【朝花夕拾】Android性能篇之(八)来自官网的自白
前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10823372.html],谢谢! Android性能优化无疑是Android中的一个重点,也是 ...
- 做个伪IE浏览器?!【来自官网】
原文:docwiki.embarcadero.com/RADStudio/Seattle/en/Building_a_VCL_Forms_Web_Browser_Application 选择File ...
- Content Providers的步骤,来自官网文档
Content Providers In this document Content provider basics Querying a content provider Modifying dat ...
- 【转载】koa相关知识(来自官网)
什么是Koa? koa 是由 Express 原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的 Web 框架.使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重 ...
- jquery在线引用地址大全 全部来自官网
谷歌的就算了,容易被屏蔽,下面都是官方原版的 最新版本 <script src="http://code.jquery.com/jquery-latest.js">&l ...
- Reveal常用技巧(翻译来自Reveal官网blog)
翻译来自官网:http://revealapp.com/blog/reveal-common-tips-cn.html 以下基于Reveal 1.6. 用于快速上手的内置应用 刚刚下载Reveal,啥 ...
- Beam编程系列之Apache Beam WordCount Examples(MinimalWordCount example、WordCount example、Debugging WordCount example、WindowedWordCount example)(官网的推荐步骤)
不多说,直接上干货! https://beam.apache.org/get-started/wordcount-example/ 来自官网的: The WordCount examples demo ...
- Requests接口测试库-官网快速上手
Requests 一个发送HTTP请求的库基于urllib3,相比自带的库,提供了更高效简洁的可用方法,测试从业者用来做接口测试的一个好工具 文章内容均来自官网:https://requests.re ...
- presto官网阅读记录: Functions and Operators 部分
官网Functions and Operators部分 版本:0.266 目录 官网Functions and Operators部分 1 Comparison Functions and Opera ...
随机推荐
- C# Winform初体验
设计一个简单的登录窗口,要求输入用户名:小金,密码:123456时候点登录能正确转到另一个窗口. 1.建立窗体应用. 2.这里创建一个login和一个NewForm的窗体. 3.在login的窗体拖拉 ...
- 剑指offer-面试题44-数字序列中某一位的数字-脑筋急转弯
/* 题目: 数字以0123456789101112131415…的格式序列化到一个字符序列中. 在这个序列中,第5位(从0开始计数,即从第0位开始)是5,第13位是1,第19位是4,等等. 请写一个 ...
- AE工程渲染的时间缓慢,两种方法减少对AE工程渲染的时间!
AE工程渲染的时间缓慢,两种方法减少对AE工程渲染的时间!3秒的片头,渲染时间竟然要花1个多小时,很多新手都产生过这样的疑问?是哪里不对吗?如何才能减少渲染视频的时间?且听我一一道来.主要原因是:工程 ...
- HTML+PHP+MySQL 制作最基础的登录页面及验证
第一步 进入mysql操作终端 新建一个数据库web1:create database web1; 然后在这个数据库里面新建一张表test:create table test(user varchar ...
- PIE-SDK For C++矢量数据空间索引的创建
1.功能简介 空间索引的使用便于数据的查询:所以在创建矢量数据的时候创建空间索引,下面对矢量数据如何创建空间索引进行功能介绍. 2.功能实现说明 2.1 实现思路及原理说明 第一步 创建矢量要素数据集 ...
- 使用Vue实现一个树组件
HTML代码: <!DOCTYPE html> <html> <head> <title>Vue Demo</title> <meta ...
- 你不知道的JavaScript下卷
阿喀琉斯之踵 学习编程最好的办法就是编写代码 比较 隐式类型转换 数字和字符串 比较 字符串会隐式转换为数字,再进行比较 == 类型转换 ecma
- asp.net web core 部署问题汇总
记录所有部署时遇到的问题. 微软官网部署说明 转载自:.NET Core 3.0 构建和部署(测试过可以使用) A 单文件可执行文件(文件体积较大,合并所有依赖) asp. ...
- shell-删除指定时间前的文件
需要配合find和rm两个命令完成 显示20分钟前的文件: find /home/prestat/bills/test -type f -mmin +20 -exec ls -l {} \; 删除20 ...
- var s=+newDate();
var s=+newDate(); 解释如下:=+是不存在的; +new Date()是一个东西; +相当于.valueOf(); 看到回复补充一下.getTime()这个也是得到毫秒数 //4个结果 ...