快速上手

获取 Apache ECharts

在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

引入 Apache ECharts

在刚才保存 echarts.js 的目录新建一个 HZHE001.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script src="echarts.js"></script>
</head><body></body></html>

打开这个 HZHE001.html，你会看到一片空白。

但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head> 之后，添加：

<body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>黄子涵学习Echarts</title><script src="echarts.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: ['HZH1', 'HZH2', 'HZH3', 'HZH4', 'HZH5', 'HZH6']},yAxis: {},series: [{name: '黄子涵',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body></html>

实例效果

HZHE001.html的效果

【HZHE001】黄子涵学习Echarts相关推荐

【HZHE004】黄子涵学习Echarts
概念篇数据集数据集(dataset)是专门用来管理数据的组件.虽然每个系列都可以在 series.data 中设置数据,但是从 ECharts4 支持数据集开始,更推荐使用数据集来管理数据 ...
【HZHE003】黄子涵学习Echarts
概念篇 ECharts 中的样式简介本文主要是大略概述,用哪些方法,可以在 Apache EChartsTM 中设置样式,改变图形元素或者文字的颜色.明暗.大小等. 本文介绍这几种方式,他们的功能范 ...
【HZHE002】黄子涵学习Echarts
概念篇下面,我们就常见的几种使用场景,介绍如何初始化一个图表以及改变其大小. 图表容器及大小通常来说,需要在 HTML 中先定义一个 <div> 节点,并且通过 CSS 使得该节点具有 ...
【HZHT001】黄子涵学习Typescript
黄子涵学习Typescript Typescript语言概览 Typescript语言基础变量在计算机程序中,一个变量使用给定的符号名与内存中的某个存储地址相关联并且可以容纳某个值.变量的值可以在 ...
【HZH001】黄子涵的第一次前端面试
公司概况爱企查爱企查职友集职友集看准网看准网面试题目如何实现中间空白,左右布局? 三栏布局浮动方式实现三栏布局源码 <!DOCTYPE html> <html l ...
三、MySQL子查询学习笔记（标量子查询、列子查询、行子查询、表子查询详解）
三.MySQL子查询学习笔记 7:子查询含义: 一条查询语句中又嵌套了另一条完整的select语句,其中被嵌套的select语句,称为子查询或内查询:在外面的查询语句,称为主查询或外查询分类: 一 ...
OK资本周子涵：区块链的成果是“熬”出来的
转自公众号:OK区块链区块链相关概念: PoW是工作量证明,PoS是权益证明,DPoS是委托权权益证明,但PoC是一种怎么样的共识机制? 目前来看,PoC并没有一个统一的说法,有的区块链项目认为Po ...
综艺小王子黄子稻，是否从实力派转为偶像？
身为舞蹈出道的黄子稻转型为多面发展,从实力方面来说,黄子稻确实能胜任多方面的才艺, 那他在娱乐圈的影响力到底有多大呢? 黄子韬,1993年5月2日出生于山东省青岛市,中国流行乐男歌手.演员.2012年 ...
【ZHYP004】子涵优品开发日志
footer部分 footer这里出现了一点问题,也给自己一个提醒,在遇到一些复杂的布局时,先别着急着写结构,先分析一下它的布局是什么样的,还需要画一下它的结构图,通过结构图来写HTML结构,同一层级 ...

【HZHE001】黄子涵学习Echarts