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>
这里要注意的是
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
这个是必须要有的
ECharts使用教程的更多相关文章
- Echarts入门教程精简实用系列
引语:echarts.js是百度团队推出的一款用于图表可视化的插件,用于以图表的形式展现数据,功能强大,上手简单 1.从官方网站中下载所需的echarts.js文件,该文件因功能广泛,包体较大,可自行 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 开源库Magicodes.ECharts使用教程
目录 1 概要 2 2 Magicodes.ECharts工作原理 3 2.1 架构说明 3 2.1.1 Axis 4 2.1.2 CommonD ...
- ECharts案例教程1
原文:http://blog.csdn.net/whqet/article/details/42703973 简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,是百度的 ...
- 为什么我不愿意用ECharts
前言 ECharts是百度一个使用 JavaScript 实现的开源可视化库,提供了创建多种多样的图标方式,包括坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图.柱状图.散点图.K线图.饼图 ...
- Angular7如何动态刷新Echarts图表
1 概述 echarts是百度的开源图表插件 Angular中引入echarts网上教程很多 Angular引入echarts,并使用动态刷新 2 安装 请参考大神的博客:https://blog.c ...
- 手把手教你做echarts图表系列之组织结构图
在实际项目中使用echarts越来越多了,今天从一个组织结构图开始,手把手教大家开发echarts图表. 公司里的组织结构图如下: 可以参考echarts入门教程:http://echarts.bai ...
- 在微信小程序中使用图表
前言:网上有许多的图表库,如:Echarts.Tau Charts.ChartJS等等,具体自行百度. 这次我们使用的是:Echarts 官方教程:点击查看 Echarts下载地址:飞机直达 1.下载 ...
- ECharts教程
ECharts 特性 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) 底层依赖轻量级的矢量图形库 ZRender 丰富的可视化类型 常规的折线图.柱状图 ...
随机推荐
- Codeforces 1291 Round #616 (Div. 2) B
B. Array Sharpening time limit per test1 second memory limit per test256 megabytes inputstandard inp ...
- P1518 两只塔姆沃斯牛 The Tamworth Two（简单的搜索题）
题目描述 两只牛逃跑到了森林里.农夫John开始用他的专家技术追捕这两头牛.你的任务是模拟他们的行为(牛和John). 追击在10x10的平面网格内进行.一个格子可以是: 一个障碍物, 两头牛(它们总 ...
- C++ 模板(template) 的定义
定义: 模板(template)是实现代码重用机制的一种工具,它可以实现类型参数化,把类型定义为参数(模板元编程),从而实现了真正的代码可重用性. 模板是用来批量生成功能和形式都几乎相同的代码的.编译 ...
- TX2开启最大功耗模式
我们移植深度学习模型到Jetson TX2,为了获得更好的指标参数,我们需要将TX2开启最大功耗模式. Jetson TX2 工作模式及相应的CPU和GPU频率: 上电时,默认采用最低功耗模式1,风扇 ...
- （Lineup the Dominoes筛子）三维状压
传送门 描述:\(一堆筛子,每个筛子两个面,上面有1-6之间的数字.后一个筛子与前一个筛子的接触面的点数必须相等.\) \(求,有多少种方案堆完筛子.(方案只关心筛子的位置,不关心是否翻转)\) \( ...
- spring的bean的属性注入
一.设置注入 设置注入要求: 要求属性在实体类中必须有getter 和setter方法,然后在spring的工厂中就可以使用property标签进行设值注入. 二.构造注入 通过类的构造方法的方式注入 ...
- 王颖奇 20171010129《面向对象程序设计（java）》第十一周学习总结
实验十一 集合 实验时间 2018-11-8 1.实验目的与要求 (1) 掌握Vetor.Stack.Hashtable三个类的用途及常用API: (2) 了解java集合框架体系组成: (3) ...
- 推荐算法_CIKM-2019-AnalytiCup 冠军源码解读
最近在帮一初创app写推荐系统,顺便学习一波用户兴趣高速检索的冠军算法. 写总结前贴出冠军代码的git地址:https://github.com/ChuanyuXue/CIKM-2019-Analyt ...
- 第十章：Python高级编程-多线程、多进程和线程池编程
第十章:Python高级编程-多线程.多进程和线程池编程 Python3高级核心技术97讲 笔记 目录 第十章:Python高级编程-多线程.多进程和线程池编程 10.1 Python中的GIL 10 ...
- 【漫画】JAVA并发编程 J.U.C Lock包之ReentrantLock互斥锁
在如何解决原子性问题的最后,我们卖了个关子,互斥锁不仅仅只有synchronized关键字,还可以用什么来实现呢? J.U.C包中还提供了一个叫做Locks的包,我好歹英语过了四级,听名字我就能马上大 ...