Echarts——画图三步曲

今天，小编以“画图三步曲”作为和大家一起学习Echarts的开端。
接下来，小编就跟大家介绍一下这个所谓的“画图三步曲”：

引用文件（主要是echarts的JS文件和数据资源）
设置容器
为生成图表做一些配置（核心步骤）

下面就为大家一一介绍。

1.引用文件

创建一个 HTML 页面，引入 echarts.min.js：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基础折线图</title><script src="../js/echarts.min.js"></script>
</head>
<body>
</body>
</html>

echarts.min.js是我们画图所必须引用的文件，当然，echarts还有别的一些js文件，这个是因图而异的，后面讲图的的时候会和大家一一介绍~

2.设置容器

第二步就是为我们的图表设置一个容器：

<body>
<div id="main" style="width: 600px;height: 400px;"></div>
</body>

这里宽度、高度和id都是可以更改的。

3.配置

ECharts 库使用 json 格式来配置。

<script type="text/javascript">var mycharts=echarts.init(document.getElementById("main"));var option={..................}mycharts.setOption(option);
</script>

注意：document.getElementById(“main”)中的“main”是步骤2中容器的id，这里一定要对应上。

对于不同的图表会有不同的配置项，先给大家看一个例子，后面讲图表的时候会跟大家详细介绍。

var option={title:{text:'测试'},tooltip:{},legend:{data:['test']},xAxis:{type:'category',data:['1','2','3','4','5']},yAxis:{type:'value'},series:[{name:'test',data:[12,15,10,15,16],type:'line'}]
};

好，画图三步曲就介绍到这里，有什么问题随时跟小编留言哦~
欢迎大家加入小编的课堂，和小编一起拿下Echarts！

Echarts——画图三步曲相关推荐

IPv6改造三步曲——Vecloud
Pv6(Internet Protocol Version 6),即互联网协议第6版,是全球公认的下一代互联网解决方案,能够提供更广泛的互联网连接,促进物联网.工业互联网.人工智能等新应用.新领域不断 ...
工作改进三步曲：简化、优化、固化
天下大事做于细,天下难事做于易.职场事经的多了,也练就了一点观人察事的本事,但大抵都是在简单处.细微处入手的. 想想经的一些事,想想身边的一些事,想想知道的一些事,慢慢明白,大小.难易只不过是一个圈罢 ...
PPT 下载 | 神策数据张涛：企业服务客户全生命周期运营三步曲客情诊断解决方案库...
本文根据神策数据副总裁张涛关于企业服务客户全生命周期系列的直播内容整理,共 3 篇,上篇回顾<PPT 下载 | 神策数据张涛:企业服务客户全生命周期运营三步曲总览篇>,本篇主要内容如下: ...
PPT 下载 | 神策数据张涛：企业服务客户全生命周期运营三步曲总览篇
本文根据神策数据副总裁张涛关于企业服务客户全生命周期系列的直播内容整理,共 3 篇,本篇主要内容如下: 为什么要做企业服务客户全生命周期运营? 客户全生命周期运营存在哪些坑? 面对坑,企业该如何自救? ...
VC控件自绘制三步曲
实现自定义绘制的三步曲既然您已经了解了绘制控件可用的各种选项(包括使用自定义绘制的好处),那么,让我们来看看实现一个自定义绘制控件需要的三个主要步骤. 执行一个 NM_CUSTOMDRAW 消息处理 ...
图像信噪比计算公式_CT 科研设计之图像质量对比研究三步曲
CT科研是CT技术的窗口,帮助医务工作者开展CT科研也是我们的责任和义务! 问如何科学地比较不同重建技术的图像质量? 答首先要排除其他影响图像质量的因素, 然后进行客观指标的比较, 最后进行主观指 ...
php批量评价,彻底杜绝 WordPress 批量垃圾评论留言的三步曲
本文将详细介绍如何采取三步曲彻底告别烦人的 WordPress 批量垃圾评论问题,还你一个干净清爽的后台评论区. 刚开始使用 WordPress 程序建站的朋友们肯定或多或少都被其批量垃圾评论困扰过. ...
Membership三步曲之入门篇 - Membership基础示例
Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 - Membership基础示例 Membership三步曲之进阶篇 - 深入剖析Pro ...
管理Linkedin账号三步曲，高效管理领英账号。
管理Linkedin账号三步曲 Linkedin是全球职业社交平台,全球有6亿用户,中国有5000+万用户.而且这些用户大多是公司的管理层或高层,在公司有很大的决策权.正是这些庞大的用户群体和高质量的 ...

Echarts——画图三步曲

1.引用文件

2.设置容器

3.配置

Echarts——画图三步曲相关推荐

最新文章

热门文章