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 ...
随机推荐
- Python_异常处理、调试
1.try except 机制 # 错误处理 # 一般程序都要用到错误捕获,当没有加且有错误的时候Python解释器会执行错误捕获,且是一层层向上捕获[所以问题点会在最下面] try: print(' ...
- mysql之多表查询的其他查询
1,临时表查询 (1)需求:查询高于本部门平均工资的人员 select * from person as p, (select dept_id, avg(salary) as '平均工资' from ...
- 算法:矩阵连乘(Java)动态规划
Description 给你2个矩阵A.B,我们使用标准的矩阵相乘定义C=AB如下: A数组中栏(column)的数目一定要等于B数组中列(row)的数目才可以做此2数组的相乘.若我们以rows(A) ...
- HTML5大纲算法
什么是HTML大纲算法? 大纲算法允许用户代理(user agent)从一个web页面生成一个信息结构目录,让用户对页面有一个快速的概览.类似书籍.PDF.帮助文档等,都有一个清晰的目录结构,用户能方 ...
- On Starting My Blogging On CNBlogs
About Myself I am a would-be Master of Engineering, on the last year of my student life, I'm ambitou ...
- Mac下载工具folx如何下载常用的软件
最近,多档综艺节目都开展得如火如荼,比如<中国新说唱>.<这就是街舞>等深受年轻人喜欢的综艺节目.虽然手机端也可观看,但可以的话,当然是使用电脑屏幕观看节目比较过瘾. 接下来, ...
- Vegas常见问题解答,如何处理预览卡顿
制作视频并不是简单的拼拼凑凑,很多时候我们都需要给视频加上一些视频特效或转场等效果,如果只是图片素材的话,还不会出现卡顿的现象,但是当你给视频添加了效果后,在预览窗口看到的就是非常卡顿了.除了本身计算 ...
- ThreadLocal以及强软弱虚引用
1.ThreadLocal ThreadLocal即线程本地,可以实现每个线程存入取出TreadLocal值互不影响.因为TheadLocal底层是用了一个Map结构存放数据,而这个Map是从当前这个 ...
- 【Updating】汇编语言学习记录02
换码指令.字符的输出 前置知识: XLAT 指令:将BX指定的缓冲区中.AL指定的位移处的一个字节数据取出赋给AL,实际相当于(AL) = (DS:(BX+AL)).注意,不是单纯地赋予AL+BX,而 ...
- VM15 Ubuntu18.04下固定IP
输入su 进入root用户 为下面修改文件内容提供权限 1.查看自己网卡名称:输入命令: ifconfig -a 或者 ip link 或者 ip addr 所以我的网卡名称是:ens33 2. 然后 ...