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 ...
随机推荐
- MySQL数据库 | MySQL调优｜MySQL底层原理｜MySQL零基础新手教程
MySQL数据库安装 一.Windows 环境下安装 A.下载 MySQL Select Operating System: Microsoft Windows 快捷下载:mysql-8.0.22-w ...
- webug第四关:告诉你了flang是5位数
第四关:告诉你了flang是5位数 开始看到有点懵 于是不要脸的看源码 burp跑弱口令
- ①SpringCloud 实战：引入Eureka组件，完善服务治理
简介 Netflix Eureka 是一款由 Netflix 开源的基于 REST 服务的注册中心,用于提供服务发现功能.Spring Cloud Eureka 是 Spring Cloud Netf ...
- 巧妙运用Camtasia制作爱豆的动感影集
对于追星族来说,收集爱豆的图片.视频是日常必做的事情,而对于进阶型的追星族来说,为爱豆自制各种精美的视频.影集等,会让自己追星之路显得更为充实. 我们可以借助Camtasia教程录制软件为爱豆制作各种 ...
- 在FL Studio编曲软件中查找采样的音高
相信玩音乐的小伙伴们都遇到过这种情况,在用FL Studio编曲时,想添加一段音频采样,由于采样的调式与我们正在编曲的调式不同,音频之间的衔接就是一个非常头疼的问题,要解决采样的调式,我们就得先确认这 ...
- day008|python之函数
函数 目录 函数 1 Type hinting 2 函数参数 2.1 概述 2.2 参数详解 2.3 参数的使用 2.4 可变长函数-->*与**的应用 2.6 命名关键字形参 3 函数对象 3 ...
- docker中启动容器提示端口被占用
docker中启动容器提示端口被占用,但是 docker ps -a 查不到信息 1.查询端口被占用的id netstat -ntpl |grep 3306 2.杀掉该id kill -9 如果kil ...
- 基础知识redis详解--【Foam番茄】
Redis 学习方式: 上手就用 基本的理论先学习,然后将知识融汇贯通 nosql讲解 为什么要用Nosql 现在都是大数据时代 大数据一般的数据库无法进行分析处理了 至少要会Springboot+S ...
- otter搭建
转载: https://blog.csdn.net/inthat/article/details/93595156 https://www.cnblogs.com/Inspire-Yi/p/80943 ...
- mysql undo+redo+binlog
rt 数据库事务开始之前,会将要修改的记录存放到UNdo日志里,当事务回滚时或数据库崩溃时,可以利用undo日志撤销未提交事务对数据库产生的影响. 逻辑日志,记录一个过程,提交后不会删除.delete ...