Echarts入门教程精简实用系列
引语：echarts.js是百度团队推出的一款用于图表可视化的插件，用于以图表的形式展现数据，功能强大，上手简单
1、从官方网站中下载所需的echarts.js文件，该文件因功能广泛，包体较大，可自行决定按需打包下载。
2、从前端页面引入echarts.js，后即可使用
<script src="js/echarts.min.js"></script>
3、请看如下使用案例：
大致就是引入js
选一个图表容器（DIV）
初始化echarts对象并绑定到该容器上
给绑定的echarts容器配置图表参数来展示数据
根据业务结合官网API的属性和方法对图表进行自由控制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>echarts入门</title>
</head> <script src="js/jquery-2.2.4.js"></script>
<script src="js/echarts.min.js"></script>
<style> .box{
width:900px;
height: 900px;
border:4px double seagreen;
margin: auto;
float: left;
} </style> <body> <div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div> </body> <script> var myChart1 = echarts.init(document.getElementsByClassName('box')[0]); var myChart2 = echarts.init(document.getElementsByClassName('box')[1]); var myChart3 = echarts.init(document.getElementsByClassName('box')[2]); var myChart4 = echarts.init(document.getElementsByClassName('box')[3]); var myChart5 = echarts.init(document.getElementsByClassName('box')[4]); //指定图表的配置项和数据
var option1 = {
title: {text:'商户营业状态'}, tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'right',
y:'bottom',
data:['营业中','未营业']
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : ['30%', '40%'],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true,
position : 'center',
textStyle : {
fontSize : '20',
fontWeight : 'bold'
}
}
}
},
data:[
{value:635, name:'营业中'},
{value:310, name:'未营业'},
]
}
]
}; var option2 = {
title:{
text:'服装店销售统计'
},
//提示框组件
tooltip:{
//坐标轴触发，主要用于柱状图，折线图等
trigger:'axis'
},
//图例
legend:{
data:['销量'],
x:'right'
},
//横轴
yAxis:{
data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
//纵轴
xAxis:{},
//系列列表。每个系列通过type决定自己的图表类型
series:[{
name:'销量',
//折线图
type:'bar',
data:[5, 20, 36, 10, 10, 20]
}]
}; myChart1.setOption(option1); myChart2.setOption(option2); </script> </html>
4、上图创有六个DIV，其中两个配置了Echarts显示参数，运行如下图：
可以看到，前两个DIV已经有图表展示，剩下的四个DIV都是没有数据的，各位可以拷贝运行下，别忘了先下载echarts.js。
接下来，就是真正入门教程了，提供一波网站快速学习：
从各大教程网站的案例中直接练习，结合API调整样式，能在最快的时间上手！
祝大家学习愉快~
Echarts入门教程精简实用系列的更多相关文章
- gitbook 入门教程之实用插件(新增3个插件)
插件没有什么逻辑顺序,大家可以按照目录大纲直接定位到感兴趣的插件部分阅读即可. 更多插件正在陆续更新中,敬请期待... 最新更新插件 tbfed-pagefooter 版权页脚插件 gitalk 评论 ...
- gitbook 入门教程之小白都能看懂的 Gitbook 插件开发全流程
什么是插件 Gitbook 插件是扩展 GitBook 功能(电子书和网站)的最佳方式. 只要是 Gitbook 默认没有提供的功能,基于插件机制都可以自行扩展,是插件让 Gitbook 变得更加强大 ...
- ABP(现代ASP.NET样板开发框架)系列之2、ABP入门教程
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之2.ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...
- WPF入门教程系列二十三——DataGrid示例(三)
DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...
- WPF入门教程系列三——Application介绍(续)
接上文WPF入门教程系列二——Application介绍,我们继续来学习Application 三.WPF应用程序的关闭 WPF应用程序的关闭只有在应用程序的 Shutdown 方法被调用时,应用程序 ...
- WPF入门教程系列二——Application介绍
一.Application介绍 WPF和WinForm 很相似, WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作,并且每个 Domain (应用程序域)中仅且只 ...
- 2016 版 Laravel 系列入门教程（五）【最适合中国人的 Laravel 教程】
本教程示例代码见: https://github.com/johnlui/Learn-Laravel-5 在任何地方卡住,最快的办法就是去看示例代码. 本文是本系列教程的完结篇,我们将一起给 Arti ...
- Laravel 5 系列入门教程（一）【最适合中国人的 Laravel 教程】
Laravel 5 系列入门教程(一)[最适合中国人的 Laravel 教程] 分享⋅ johnlui⋅ 于 2年前 ⋅ 最后回复由 skys215于 11个月前 ⋅ 17543 阅读 原文发表在 ...
- Laravel 4 系列入门教程（一）
默认条件 本文默认你已经有配置完善的PHP+MySQL运行环境,懂得PHP网站运行的基础知识.跟随本教程走完一遍,你将会得到一个基础的包含登录的简单blog系统,并将学会如何使用一些强大的Larave ...
随机推荐
- Java 获取微信小程序二维码（可以指定小程序页面 与 动态参数）
一.准备工作 微信公众平台接口调试工具 小程序的唯一标识(appid) 小程序的密钥(secret) 二.获取access_token 打开微信公众平台接口调试工具,在参数列表中输入小程序的appid ...
- SpringBoot加载配置文件的几种方式
首先回忆一下在没有使用SpringBoot之前也就是传统的spring项目中是如何读取配置文件,通过I/O流读取指定路径的配置文件,然后再去获取指定的配置信息. 传统项目读取配置方式 读取xml配置文 ...
- 在Linux中输入命令时打错并按了enter
今天在Linux中输入命令时,打错一个单词了,之后出现一串串的~,按ESC也没用, 并在底部出现:quit<enter> to exit vim 解决办法: 按几下 esc 确保 vim ...
- C# 9 record 并非简单属性 POCO 的语法糖
C# 9 record 并非简单属性 POCO 的语法糖 最近升级专案到大统一 .NET 5 并使用 C#9 语法尝试改写套件,发现之前以为 record 只是简单属性 POCO 的简化语法糖的认知是 ...
- vue中实时监听移动端屏幕高度（采坑后实践）
最近做微信公众号活动,需要首页往input中输入内容,点击input软键盘tabbar被顶起来,网上借鉴很多(踩了许多坑)最后自己实践出来. <--!将手机屏幕的默认高度和实时高度获取--> ...
- guitar pro系列教程（二十）：Guitar Pro使用技巧之使用向导
本章节将采用图文结合的方式为大家讲述{cms_selflink page='index' text='Guitar Pro'}使用技巧里面的使用向导的相关知识,有兴趣的朋友可以一起来学习哦. 当你创建 ...
- 肝了一周的 UDP 基础知识终于出来了。
我把自己以往的文章汇总成为了 Github ,欢迎各位大佬 star https://github.com/crisxuan/bestJavaer 已提交此篇文章 运输层位于应用层和网络层之间,是 O ...
- Java基础教程——Random随机数类
Random类 java.util.Random类用于产生随机数.需要导入包: import java.util.Random; 方法 解释 Random() 创建一个Random类对象 Random ...
- 【mq读书笔记】消息队列负载与重新分配(分配 新队列pullRequest入队)
回顾PullMessageService#run: 如果队列总没有PullRequest对象,线程将阻塞. 围绕PullRequest有2个问题: 1.PullRequest对象在什么时候创建并加入p ...
- 16.java设计模式之迭代器模式
基本需求: 展示一个学校的结构,比如一个学校下面有多个学院,学院下面有多个系,对其节点主要是遍历,与组合模式略有不同 传统方案: 学校<-学院<-系 依次继承 这种方式,在一个页面中展示出 ...