引入 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--来自官网的更多相关文章

  1. 十分钟掌握Pandas(上)——来自官网API

    十分钟掌握Pandas(上)——来自官网API 其实不止10分钟,这么多,至少一天 一.numpy和pandas numpy是矩阵计算库,pandas是数据分析库,关于百度百科,有对pandas的介绍 ...

  2. 【朝花夕拾】Android性能篇之(八)来自官网的自白

    前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10823372.html],谢谢! Android性能优化无疑是Android中的一个重点,也是 ...

  3. 做个伪IE浏览器?!【来自官网】

    原文:docwiki.embarcadero.com/RADStudio/Seattle/en/Building_a_VCL_Forms_Web_Browser_Application 选择File ...

  4. Content Providers的步骤,来自官网文档

    Content Providers In this document Content provider basics Querying a content provider Modifying dat ...

  5. 【转载】koa相关知识(来自官网)

    什么是Koa? koa 是由 Express 原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的 Web 框架.使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重 ...

  6. jquery在线引用地址大全 全部来自官网

    谷歌的就算了,容易被屏蔽,下面都是官方原版的 最新版本 <script src="http://code.jquery.com/jquery-latest.js">&l ...

  7. Reveal常用技巧(翻译来自Reveal官网blog)

    翻译来自官网:http://revealapp.com/blog/reveal-common-tips-cn.html 以下基于Reveal 1.6. 用于快速上手的内置应用 刚刚下载Reveal,啥 ...

  8. 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 ...

  9. Requests接口测试库-官网快速上手

    Requests 一个发送HTTP请求的库基于urllib3,相比自带的库,提供了更高效简洁的可用方法,测试从业者用来做接口测试的一个好工具 文章内容均来自官网:https://requests.re ...

  10. presto官网阅读记录: Functions and Operators 部分

    官网Functions and Operators部分 版本:0.266 目录 官网Functions and Operators部分 1 Comparison Functions and Opera ...

随机推荐

  1. C# Winform初体验

    设计一个简单的登录窗口,要求输入用户名:小金,密码:123456时候点登录能正确转到另一个窗口. 1.建立窗体应用. 2.这里创建一个login和一个NewForm的窗体. 3.在login的窗体拖拉 ...

  2. 剑指offer-面试题44-数字序列中某一位的数字-脑筋急转弯

    /* 题目: 数字以0123456789101112131415…的格式序列化到一个字符序列中. 在这个序列中,第5位(从0开始计数,即从第0位开始)是5,第13位是1,第19位是4,等等. 请写一个 ...

  3. AE工程渲染的时间缓慢,两种方法减少对AE工程渲染的时间!

    AE工程渲染的时间缓慢,两种方法减少对AE工程渲染的时间!3秒的片头,渲染时间竟然要花1个多小时,很多新手都产生过这样的疑问?是哪里不对吗?如何才能减少渲染视频的时间?且听我一一道来.主要原因是:工程 ...

  4. HTML+PHP+MySQL 制作最基础的登录页面及验证

    第一步 进入mysql操作终端 新建一个数据库web1:create database web1; 然后在这个数据库里面新建一张表test:create table test(user varchar ...

  5. PIE-SDK For C++矢量数据空间索引的创建

    1.功能简介 空间索引的使用便于数据的查询:所以在创建矢量数据的时候创建空间索引,下面对矢量数据如何创建空间索引进行功能介绍. 2.功能实现说明 2.1 实现思路及原理说明 第一步 创建矢量要素数据集 ...

  6. 使用Vue实现一个树组件

    HTML代码: <!DOCTYPE html> <html> <head> <title>Vue Demo</title> <meta ...

  7. 你不知道的JavaScript下卷

    阿喀琉斯之踵 学习编程最好的办法就是编写代码 比较 隐式类型转换 数字和字符串 比较 字符串会隐式转换为数字,再进行比较 == 类型转换 ecma

  8. asp.net web core 部署问题汇总

    记录所有部署时遇到的问题.    微软官网部署说明 转载自:.NET Core 3.0 构建和部署(测试过可以使用)   A    单文件可执行文件(文件体积较大,合并所有依赖)       asp. ...

  9. shell-删除指定时间前的文件

    需要配合find和rm两个命令完成 显示20分钟前的文件: find /home/prestat/bills/test -type f -mmin +20 -exec ls -l {} \; 删除20 ...

  10. var s=+newDate();

    var s=+newDate(); 解释如下:=+是不存在的; +new Date()是一个东西; +相当于.valueOf(); 看到回复补充一下.getTime()这个也是得到毫秒数 //4个结果 ...