5分钟上手写ECharts的第一个图表

方法一：模块化单文件引入

1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts</title>
</head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px"></div>
</body>

2、新建<script>标签引入模块化单文件echarts.js

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts</title>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>

3、新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js）

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts</title>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript"> // 路径配置require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'}});</script>
</body>

4、<script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts</title>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">// 路径配置require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'}});  // 使用require(['echarts','echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载],function (ec) {// 基于准备好的dom，初始化echarts图表var myChart = ec.init(document.getElementById('main')); var option = {tooltip: {show: true},legend: {data:['销量']},xAxis : [{type : 'category',data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]}],yAxis : [{type : 'value'}],series : [{"name":"销量","type":"bar","data":[5, 20, 40, 10, 10, 20]}]};// 为echarts对象加载数据 myChart.setOption(option); });</script>
</body>

5、浏览器中打开echarts.html，就可看到以下效果

方法二：标签式单文件引入

1、新建一个echarts.html文件。为ECharts准备一个具备大小（宽高）的Dom。

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts</title>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px"></div>
</body>

2、新建<script>标签引入echarts-all.js，引入图表文件

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts</title>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</body>

3、新建<script>标签，使用全局变量echarts初始化图表并驱动图表的生成

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts</title>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px"></div> <!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script><script type="text/javascript">// 基于准备好的dom，初始化echarts图表var myChart = echarts.init(document.getElementById('main')); var option = {tooltip: {show: true},legend: {data:['销量']},xAxis : [{type : 'category',data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]}],yAxis : [{type : 'value'}],series : [{"name":"销量","type":"bar","data":[5, 20, 40, 10, 10, 20]}]};// 为echarts对象加载数据 myChart.setOption(option); </script>
</body>

5分钟上手写ECharts的第一个图表相关推荐

5 分钟上手 ECharts
获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整 ...
AirtestIDE 教程 — 5分钟上手自动化测试
AirtestIDE 教程 - 5分钟上手自动化测试::http://airtest.netease.com/tutorial/Tutorial.html AirtestIDE 官方文档:http:/ ...
教你三分钟上手阿里云OOS上传操作
教你三分钟上手阿里云OOS上传操作 1.注册登录如果小伙伴需要进行使用阿里云oss操作,第一步我们得注册/登录阿里云 https://www.aliyun.com/,小编建议大家尽量使用支付宝登录, ...
1-5分钟上手自动化测试——Airtest+Poco快速上手
1 | 5分钟上手自动化测试--Airtest+Poco快速上手 1.1 前言本文档将演示如何使用Airtest Project专用的编辑器AirtestIDE,编写Airtest+Poco自动化脚 ...
AirtestIDE 教程 : 5分钟上手自动化测试
都跟简单,只要认真钻研. AirtestIDE 教程 - 5分钟上手自动化测试::http://airtest.netease.com/tutorial/Tutorial.html AirtestID ...
开源短地址_如何在短短5分钟内完成您的第一个开源贡献
开源短地址 by Roshan Jossey 罗珊·乔西(Roshan Jossey) 如何在短短5分钟内完成您的第一个开源贡献 (How to make your first open source ...
零基础 5 分钟上手，程序员喜提 AIoT 新利器！
作者 | 伍杏玲出品 | CSDN(ID:CSDNnews) 近几年来,物联网发展迅速,2017 年,物联网设备数量首次超过全球人口.据预测,到 2025 年,物联网设备将超过 215 亿. 可与日 ...
小猪的Python学习之旅 —— 10.三分钟上手Requests库
小猪的Python学习之旅 -- 10.三分钟上手Requests库标签:Python 一句话概括本文: 本节讲解Requests库的常见使用,以及一个实战项目: 扒取某一篇微信文章里所有的图片,视 ...
微信小程序开发uni-app-8分钟上手开发
本篇文章uni-app微信小程序开发-8分钟上手开发 -首先到微信小程序官网登录/注册微信小程序微信小程序官网 uni-app + 微信小程序注册微信小程序这里要注意: 激活邮箱之后,选择主体类 ...

5分钟上手写ECharts的第一个图表

5分钟上手写ECharts的第一个图表相关推荐

最新文章

热门文章