echarts入门到入土有时只需一篇博客

最新推荐文章于 2024-02-19 12:00:11 发布
最新推荐文章于 2024-02-19 12:00:11 发布
阅读量218 收藏
点赞数
文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67260069/article/details/125574023
版权

1.定义

echarts是基于javascript的图表插件(canvas)百度开发捐赠给apache基金会开源

2.echarts第一个案例：hellworld

引入js

<script src="./js/echarts.min.js"></script>

设置容器 宽高

<div id="app">
			
</div>

css样式

#app{
	width: 800px;
	height: 600px
}

初始化

var echart = echarts.init(document.getElementById('app'));

定义选项

var option = {
            title:{text:'小吴的睡眠时间'}, // 标题文本
			legend:{data:['睡眠时长','作业耗时','成绩']},  // 图例
			tooltip:{},  // 鼠标提示
			yAxis:{},  // y轴线
			xAxis:{data:['20日','21日','22日','23日','24日','25日','26日']},// x轴线
			series:[ // 系列数据
			{name:'睡眠时长',type:'bar',data:[8,5,4,7,3,12,14]}, // 数据
			{name:'作业耗时',type:'line',data:[1,2,4,3,5,1,0],smooth:true},
			{
			  name:'成绩',
			  type:'pie',
			  data:[
					{name:'html',value:90},
					{name:'js',value:80},
					{name:'nodejs',value:60},
					],
					radius:[100,60], //半径
					left:0,          //左偏移
					top:-200,        //顶部偏移
					}
			]
}

设置选项

	echart.setOption(option)

3.option选项

属性名意义
title标题
tooltip鼠标经过提示
xAxisx轴
yAxisy轴
series系列数据

option里面还有很多属性可以在官方网站查看 echart

4.颜色改变

1.主题

默认的主题有两种：light dark
也可以自己在官方网站中设置自定义样式

// 主题使用
var echart = echarts.init(document.getElementById('app'),'light);

2.color:[“#f30”] 调色盘

3.data:[15,{value:20,itemStyle:{}}]

4.itemStyle

itemStyle:{
		normal:{color:'#12f8e9'},  //正常状态
		emphasis:{color:'#00ffb3'}, // 强调状态
}

5.bar柱状图

柱状图的type属性是bar

{name:'睡眠时长',type:'bar',data:[8,5,4,7,3,12,14]}, // 数据

6.line折线图

折线图的type属性是line

{name:'作业耗时',type:'line',data:[1,2,4,3,5,1,0],smooth:true},

7.pie饼形图

饼形图的type属性是pie

{
name:'成绩',
type:'pie',
data:[
	{name:'html',value:90},
	{name:'js',value:80},
	{name:'nodejs',value:60},
],
	radius:[100,60], //半径
	left:0,          //左偏移
	top:-200,        //顶部偏移
}

8.stack堆叠

var option = {
	color:['#1cffce',' #2ef5ff'],
	title:{text:'郑州人口留存'},
	legend:{data:['新增','流失']},
	yAxis:{data:['2019','2020','2021']},
	xAxis:{},
	tooltip:{},
	series:[
			{name:'新增',data:[30,50,10],type:'bar',stack:true,
			label:{show:true,position:'insideRight',formatter:'{a}:{c}'},
			},
			{name:'流失',data:[30,20,100],type:'bar',stack:true,
			label:{show:true,position:'insideRight',formatter:'{a}:{c}'},
			},
	]
}

9.一图多表

var option = {
				color:['#1cffce',' #2ef5ff'],
				title:{text:'使用分布'},
				legend:{data:['手机使用时长','编码时间']},
				grid: [
				    { left: '7%', top: '7%',width:'50%',height: '38%' },
				    { left: '7%', bottom: '7%',width:'50%',height: '38%' },
				  ],
				yAxis:[
					{gridIndex:0,min:0,max:10},
					{gridIndex:1,min:0,max:10},
				],
				xAxis:[
					{data:['周一','周二','周三','周四','周五','周六','周日',],
					gridIndex:0
					},
					{data:['周一','周二','周三','周四','周五','周六','周日',],
					gridIndex:1
					},
				],
				tooltip:{
					
				},
				series:[
					{name:'手机使用时长',data:[3,2,4,3,2,5,10],type:'bar',
					xAxisIndex:0,
					yAxisIndex:0,
					type:'bar',
					itemStyle:{
						normal:{color:'#12f8e9'},  //正常状态
						emphasis:{color:'#00ffb3'}, // 强调状态
					}
					},
					{name:'编码时间',data:[10,5,6,4,7,4,1],type:'bar',
					xAxisIndex:0,
					yAxisIndex:0,
					type:'bar',
					itemStyle:{
						normal:{color:'#00ffb3'},  //正常状态
						emphasis:{color:'#12f8e9'}, // 强调状态
					}
					},
					{name:'编码时间',data:[10,5,6,4,7,4,1],type:'bar',
					xAxisIndex:1,
					yAxisIndex:1,
					type:'bar',
					itemStyle:{
						normal:{color:'#00ffb3'},  //正常状态
						emphasis:{color:'#12f8e9'}, // 强调状态
					}
					},
					{name:'手机使用时长',data:[3,2,4,3,2,5,10],type:'bar',
					xAxisIndex:1,
					yAxisIndex:1,
					type:'bar',
					itemStyle:{
						normal:{color:'#12f8e9'},  //正常状态
						emphasis:{color:'#00ffb3'}, // 强调状态
					}
					},
				]
			}

10.label

var option = {
				color:['#1cffce',' #5555ff'],
				title:{text:'网站访问来源',left:'center'},
				legend:{data:['百度','其他'],left:'right'},
				tooltip:{},
				series:[
					{type:'pie',name:'访问来源',
					radius:[200,130],
					data:[
						{name:'百度',value:1700,
						label:{
							show:true,
							position:'center',
							formatter:'{big|{d}}{small|%}\n{text|{b}}',
							rich:{
								big:{
									color:'#f70',
									fontWeight:700,
									fontSize:48,
								},
								small:{
									color:'#f70'
								},
								text:{
									color:"#00aaff",
									fontSize:20
								}
							}
						}
						},
						{name:'其他',value:400,label:{show:false}}
					]
					}
				]
			}

11.动态更新

var echart = echarts.init(document.getElementById('container'));
			var list = data.data.feiyan.beijingTrends.sort((a,b)=>a.day-b.day);
			var option = {
				title:{text:'2020北京新冠肺炎趋势'},
				legend:{data:['累计确诊']},
				xAxis:{data:list.slice(0,10).map(item=>String(item.day).slice(-4))},
				yAxis:{},
				series:[
					{name:'累计确诊',type:'bar',data:list.slice(0,10).map(item=>item.rest_sure_cnt)}
				]
			};
			
			echart.setOption(option)
			
			function auto(){
				var first = list.shift();
				list.push(first);
				option.xAxis.data = list.slice(0,10).map(item=>String(item.day).slice(-4));
				option.series[0].data = list.slice(0,10).map(item=>item.rest_sure_cnt);
				echart.setOption(option);
			}
			var id = null;
			id = setInterval(auto,1000);
			
			var box = document.getElementById('container');
			box.addEventListener('mouseover',function(){
				clearInterval(id)
			})
			box.addEventListener('mouseout',function(){
				id = setInterval(auto,1000);
			})

12.事件监听

echart.on(事件名,function(e){})
echart.off()

13.事件触发

echart.dispatchAction({})

type:"showTip"
seriesIndex:系列下标
dataIndex:数据下标

14.动画

var echart = echarts.init(document.getElementById('container'));
			var list = data.data.feiyan.beijingTrends.sort((a,b)=>a.day-b.day);
			var option = {
				title:{text:'2020北京新冠肺炎趋势'},
				legend:{data:['累计确诊']},
				toolbox: {
				    show: true,  // 显示工具箱
				    feature: {   // 特性
				      dataZoom: {  // 缩放x轴线
				        yAxisIndex: 'none'
				      },
				      dataView: { readOnly: false },  // 编辑数据
				      magicType: { type: ['line', 'bar'] },  // 魔法类型,线与柱状互转
				      restore: {},  // 重置
				      saveAsImage: {}  // 保存图片
				    }
				  },
				xAxis:{data:list.slice(0,10).map(item=>String(item.day).slice(-4))},
				yAxis:{},
				series:[
					{name:'累计确诊',type:'bar',data:list.slice(0,10).map(item=>item.rest_sure_cnt)}
				],
				animationEasing:'bounceInOut',
				
				animationDelay:function(idx){
					return idx *100;
				},
				animationDuration:function(idx){
					return idx*500
				}
			};
			
			echart.setOption(option)
			
			function auto(){
				var first = list.shift();
				list.push(first);
				option.xAxis.data = list.slice(0,10).map(item=>String(item.day).slice(-4));
				option.series[0].data = list.slice(0,10).map(item=>item.rest_sure_cnt);
				echart.setOption(option);
			}
			setTimeout(()=>{
				id = setInterval(auto,1000);
			},7000)

animationEasing:过渡动画
animationDelay:function(idx){return idx*100}  //动画延迟
animationDuration:function(idx){return idx*100} //动画时长

15.toolbox工具箱

toolbox: {
show: true, //显示工具箱
feature: { //特性
  dataZoom: { //缩放x轴线
	yAxisIndex: 'none'
  },
  dataView: { readOnly: false }, //编辑数据
  magicType: { type: ['line', 'bar'] }, //魔法类型,线与柱状互转
  restore: {}, //重置
  saveAsImage: {} //保存图片
}
},

16.地图

// 初始化
		 var echart = echarts.init(document.querySelector("#container"));
		 // 选项
		 var option = {
			 // 标题
			 title:{text:"中国地图"},
			 tooltip:{},
			 // 系统数据
			 series:[{
				 // 地图类型
				 type:"map",
				 // 数据
				 data:[
					 {name:"河南",value:"200",en:"henan"},
					 {name:"湖南",value:"180",en:"hunan"},
					 ]
				 
			 }]
		 };
		 
		 function getMap(obj={en:"china"}){
			 // h5的内置api  fetch 自学内容(ES6新增ajax内置方法)
			 fetch(`./js/map/json/province/${obj.en}.json`)
			 .then(res=>res.json())//把获取的数据转换为json  res.text()转换为文本
			 .then(res=>{
				 // 注册地图
				 echarts.registerMap(obj.en,res);
				 // 设置地图的类型
				 option.series[0].mapType = obj.en; 
				 // 更新选项
				 echart.setOption(option);
			 })
			 .catch(err=>console.error(err))
			 
		 }
		 getMap();
汤姆的编程生活
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts动态展示数据
希望我快乐
01-15 3174
echarts 动态数据渲染 Demo直接在前端mock数据，实际使用需要从服务器拿取数据渲染。以下Demo代码对使用到的属性进行了说明，更多详情请查看echarts官方文档。 github链接：https://github.com/Biu-Huang/echart-demo.git 效果图：(柱状图跟饼图数据无关系) HTML <!DOCTYPE html> <html la...
记录~Echarts的使用
睡眠不足z的blog
08-19 572
效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入 echarts.js --> <script type="text/javascript" src="js/echarts.min.js"></script> .
echarts自定义图表
前端与计算机相关知识的分享，博主的qq523235674
03-02 2011
效果：//得到下面线的中心坐标//得到上面线的中心坐标//根据x轴索引为1的数值得到所在的映射宽度*0.1fill: null});return {type: 'group', //上面那条线shape: {},},//中间垂直线shape: {},},//下面那条线shape: {},option = {tooltip: {},title: {text: '血压'},legend: {data: ['血压']},xAxis: {},
echarts 甘特图
11-19 2180
一、需求 用图表形式展示单个设备告警开始时间、结束时间、持续时长；以及告警类型、是否恢复等等 二、图 该图表示： 1、矩形首尾：告警开始、结束时间 2、矩形长度：告警持续时常 3、颜色：告警等级 4、白色边框：该告警是否为误告 5、模糊光圈：该告警是否恢复 三、代码 initChart=()=>{ echarts.init(document.getElementById('profileChart')).dispose(); // 销毁实例 let chart = e
Echarts入门
weixin_42384816的博客
10-09 275
Echarts-介绍 常见的数据可视化库： D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript 数据可视化库 Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用 AntV 蚂蚁金服全新一代数据可视化解决方案 等等 Highcharts 和 Echarts 就像是 Office 和 WPS 的关系 ECharts，一个使用 JavaScript 实现的开源可
java从入门到入土第一卷
11-08
没事复习一遍
java入门到入土.md
02-20
java入门到入土.md
python从入门到入土练习习题
05-30
Python是一种高级的、面向对象的编程语言，以其简洁的语法和强大的功能深受程序员喜爱。它可在多种平台上运行，包括Windows、Linux、Mac OS等，这体现了其高度的可移植性。Python模块是组织代码的一种方式，本质是....
python学习之路，从入门到入土.rar
07-30
另一方面Python既是一门解释性编程语言，又是面向对象的语言，其操作性和可移植性高，被广泛应用于数据挖掘、信息采集、人工智能、网络安全、自动化测试等领域。甚至，很多小学生、高中课程和计算机二级也都陆续增加...
小四轴从入门到入土（硬件篇）-附件资源
03-05
小四轴从入门到入土（硬件篇）-附件资源
echarts 自定义 睡眠
最新发布
weixin_45052435的博客
02-19 825
#FFD157’,‘#C9C7F3’,‘#605BD0’,[12, 2],[38, 3],[4, 2],[58, 3],[38, 2],[46, 3],[20, 1],[32, 2],[98, 3],[12, 2],[4, 1],[20, 2],[50, 3],[50, 2],[8, 1],[68, 2],arr[0] = 0} else {// 数据数组。
迪赛智慧数——基本饼图和基本柱状图：2022年国民睡眠问题分析
迪赛智慧数的博客
01-13 641
基本柱状图：柱状图(barchart)，是一种以长方形的长度为变量的表达图形的统计报告图，由一系列高度不等的纵向条纹表示数据分布的情况，用来比较两个或以上的价值(不同时间或者不同条件)，只有一个变量，通常利用于较小的数据集分析。一个人睡眠质量的好坏关乎着一辈子的身心健康。在我国，许多人都存在睡眠障碍问题，尤其对于年轻人而言，熬夜更是家常便饭，据数据统计，有睡眠困扰问题的占78%，52%的人在23点至24点之间入睡，38%的人在24点之后入睡，其中更有20%的人在凌晨2点后才入睡，晚睡现象已相当普遍。
基于Echarts实现可视化数据大屏大数据可视化
热门推荐
HTML网页设计
08-17 1万+
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ .......
超级超级炫酷的Echarts数据可视化
奇奇怪怪
12-02 2994
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 [ZRender]
echarts-图表插件
topuu的博客
07-04 1261
echarts
echarts——实现大屏数据展示——基础积累（超详细）
yehaocheng520的博客
06-25 1万+
echarts——实现大屏数据展示——基础积累（超详细）
echarts.js - 动态数据 + 时间坐标轴
qq_29761395的博客
09-30 3775
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> &.
ECharts绘制一个简单的图表
awcf7208的博客
08-09 358
ECharts官方文档：https://www.echartsjs.com/index.html 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。 <div id="main" style="width: 100%;height:100%;"></div> 然后就可以通过echarts.init方法初始化一个 ech...
echarts 柱状图
qq_51357960的博客
10-15 376
echarts 柱状图
simulink 仿真教程(从入门到入土)
09-06
下面是一个从入门到入土的Simulink仿真教程。 1. 软件安装：首先需要下载和安装Simulink软件。在MathWorks官方网站上找到适合的版本，并按照指示进行安装。 2. Simulink基础：打开Simulink后，可以看到一个模块化...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值