Echars 折线图+仪表盘

最新推荐文章于 2023-05-19 12:45:48 发布
最新推荐文章于 2023-05-19 12:45:48 发布
阅读量467 收藏 2
点赞数
分类专栏： 前端 echarts 文章标签： 数据可视化 echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39251440/article/details/119740749
版权

以下内容仅供参考~
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Echars 折线图+仪表盘</title>
	</head>
	<body>
		<div id="echarsID" style="height: 600px;"></div>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js" type="text/javascript" charset="utf-8"></script>
	<!-- echars版本可以使用自己的 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.js" type="text/javascript" charset="utf-8"></script>
	<script>
		function showEchars() {
			let myChart = echarts.init(document.getElementById('echarsID'));
			let option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',//默认为line，line直线，cross十字准星，shadow阴影
						crossStyle: {
							color: '#999'
						}
					}
				},
				grid: { //边距
					left: '4%',
					right: '4%',
					bottom: '3%',
					top: '60%',
					containLabel: true
				},
				legend: {
					"right": "4%",
					"top": '12%',
					data: ["PASS"],
				},
				xAxis: {
					type: 'category',
					data: ['IPI', 'Overflow cleanong', 'Ground Tape', 'Lstrap', 'Ring Welding', 'TZ-TEK', 'Mesh-ALT'],
				},
				yAxis: {
					type: 'value',
					name: '百分比',
					min: 0,
					max: 100,
					interval: 20,
					axisLabel: {
						formatter: '{value} %'
					}
				},
				series: [{
					name: "PASS",
					data: [99, 89, 99, 79, 99, 96, 78],
					type: 'line',
					color: ["#2B6832"],
					smooth: true
				}, {
					type: 'gauge',
					startAngle: 180,
					endAngle: 0,
					min: 0,
					radius:'80%',//控制仪表盘大小
					max: 100,//设置刻度盘内数值区间
					splitNumber: 10,//设置间隔区域的显示数量
					axisLine: {// 坐标轴线
						lineStyle: {
							width: 6,
							color: [
								[0.25, '#FF6E76'],
								[0.5, '#FDDD60'],
								[0.75, '#58D9F9'],
								[1, '#7CFFB2']
							]
						}
					},
					pointer: {
						icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
						length: '12%',//指针长度，按照半圆半径的百分比
						width: 20,//指针的宽度
						offsetCenter: [0, '-60%'],
						itemStyle: {
							color: 'auto'
						}
					},
					axisTick: {
						length: 12,
						lineStyle: {
							color: 'auto',
							width: 2
						}
					},
					splitLine: {
						length: 20,
						lineStyle: {
							color: 'auto',
							width: 5
						}
					},
					axisLabel: { // 坐标轴小标记
						color: '#464646',
						fontSize: 20,//改变仪表盘内刻度数字的大小
						distance: -60
					},
					axisLabel: {
						color: 'auto',
						distance: 10,
						fontSize: 15
					},
					title: {
						offsetCenter: [0, '-20%'],//改变标题的位置
						fontSize: 30
					},
					detail: {
						fontSize: 50,
						offsetCenter: [0, '0%'],
						valueAnimation: true,
						formatter: function(value) {
							return value + '%';
						},
						color: 'auto'
					},
					data: [{
						value: 99.71,
						name: 'Cum Final Pass'
					}]
				}]
			}
			//清空
			myChart.clear();
			//绘制
			myChart.setOption(option, true);
			//自适应
			window.addEventListener("resize", function() {
				myChart.resize();
			});
		}
		showEchars();
	</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Echars 折线图+仪表盘</title>
	</head>
	<body>
		<div id="echarsID" style="height: 600px;"></div>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js" type="text/javascript" charset="utf-8"></script>
	<!-- echars版本可以使用自己的 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.js" type="text/javascript" charset="utf-8"></script>
	<script>
		function showEchars() {
			let myChart = echarts.init(document.getElementById('echarsID'));
			let option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999'
						}
					}
				},
				grid: { //边距
					left: '4%',
					right: '4%',
					bottom: '3%',
					top: '60%',
					containLabel: true
				},
				legend: {
					"right": "4%",
					"top": '12%',
					data: ["PASS"],
				},
				xAxis: {
					type: 'category',
					data: ['IPI', 'Overflow cleanong', 'Ground Tape', 'Lstrap', 'Ring Welding', 'TZ-TEK', 'Mesh-ALT'],
				},
				yAxis: {
					type: 'value',
					name: '百分比',
					min: 0,
					max: 100,
					interval: 20,
					axisLabel: {
						formatter: '{value} %'
					}
				},
				series: [{
					name: "PASS",
					data: [99, 89, 99, 79, 99, 96, 78],
					type: 'line',
					color: ["#2B6832"],
					smooth: true
				}, {
					type: 'gauge',
					radius: '50%',
					center: ['50%', '30%'], //位置
					axisLine: {
						lineStyle: {
							width: 20,
							color: [
								[0.3, '#fd666d'],
								[0.7, '#37a2da'],
								[1, '#67e0e3']
							]
						}
					},
					pointer: {
						itemStyle: {
							color: 'auto'
						}
					},
					axisTick: {
						distance: -20,
						length: 8,
						lineStyle: {
							color: '#fff',
							width: 1
						}
					},
					splitLine: {
						distance: -40,
						length: 35,
						lineStyle: {
							color: '#fff',
							width: 3
						}
					},
					axisLabel: {
						color: 'auto',
						distance: 33,
						fontSize: 15
					},
					detail: {
						valueAnimation: true,
						formatter: '{value} %',
						color: 'auto',
						textStyle: {
							fontSize: 18
						}
					},
					title: {
						show: true,
						offsetCenter: [0, '-30%'], // x, y，单位px
						textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
							fontWeight: 'bolder',
							fontSize: 12
						}
					},
					data: [{
						value: 99.71,
						name: 'Cum Final Pass'
					}]
				}]
			}
			//清空
			myChart.clear();
			//绘制
			myChart.setOption(option, true);
			//自适应
			window.addEventListener("resize", function() {
				myChart.resize();
			});
		}
		showEchars();
	</script>
</html>
万德佛
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
10-17
制作一个折线图用于显示当前24小时的数据，并且可以通过拖动折现图设置数据，接下来通过本文给大家分享vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置），感兴趣的朋友跟随一起学习吧
Echarts CPU监控 （折线仪表盘，图例混搭）--转载
weixin_45728946的博客
10-09 680
【本文为转载文章】 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/gaogaoshan/article/details/38038743 CPU page <script type="text/javascript" > var myChart...
echarts 嵌套仪表盘
weixin_45799605的博客
09-23 457
echarts嵌套仪表盘
Echarts多行多列仪表盘-利用浮动实现表格布局
wxqqq666的博客
12-20 2023
年终事情一大把 项目科研两手抓 Echarts仪表盘 Echarts官网仪表盘Demo地址 我的需求是每一时刻要呈现多种数据（温度、风速、盐度、有效波高）考虑采用类似表格的布局方式来同时展示多个仪表盘以展示多种数据。 CSS浮动实现表格布局 首先利用css浮动实现表格布局代码如下 <!DOCTYPE html> <html style="height: 100%"> ...
web数据可视化(Echarts版)4-8多仪表盘图(代码仅供参考)
m0_63471474的博客
05-19 659
【代码】web数据可视化(Echarts版)4-8多仪表盘图(代码仅供参考)
echarts 环形图占比_环形图_仪表盘
aibujin的博客
04-24 2429
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、vue echarts
echart各种酷炫图表,柱状图,折线图,仪表盘,雷达图.zip
12-12
echart 各种酷炫图表,柱状图,折线图,仪表盘,雷达图
jquery折线图仪表盘小例子
04-27
用jquery显示折线图、仪表盘的小例子。 例子中使用ECharts组件。
Echars 纯JS例子-仪表盘、折线图
12-08
Echars 纯JS例子-仪表盘、折线图
Echarts实现柱状折线图、水波球、雷达图、仪表盘、漏斗图、数据标注、数据标线、标域/标线
07-07
Echarts实现柱状折线图、水波球、雷达图、仪表盘、漏斗图、数据标注、数据标线、标域/标线
Echarts+jquery实现复杂的渐变色仪表盘
柚稚的博客
12-10 1224
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上。Echarts提供了很多的图表，像是仪表图，关联图等，代码比较好上手，有很多配置项，下面是我记录我做过的仪表盘。 1.效果图 这个仪表盘有以下几个特点： 1） 颜色渐变效果 2） 刻度在仪表盘外面 3） 2.代码 var myChart = echarts.init(document.getElemen...
ECharts画动态仪表盘+柱状图（ajax获取+循环画图）
zjh_wd的博客
10-08 9102
ECharts画动态仪表盘+柱状图（ajax获取+循环画图） 出来工作几个月了，整理下最近学的的东西。刚刚才开通博客，第一篇就先画仪表盘+柱状图。 有什么写的不好的地方，请大家多多指教！
仪表盘各个属性的意思
长路漫漫,唯风作伴
08-14 906
<div id="main" style="width: 400px;height: 300px;"></div> <script> var myChart = echarts.init(document.getElementById("main")); option = { //提示框组件。开发实际中去
echarts仪表盘，柱状图，折线图，趋势图
pleaseprintf的博客
04-12 855
/解决页面刷新canvas画布变大 async loadEcharts(id) {var myChart = echarts . init(document . getElementById(id)) myChart . resize() // 精髓之所在 } ,提示：以下是本篇文章正文内容，下面案例可供参考。
ECharts 多仪表盘（自动）
qq_61324603的博客
04-07 2470
【代码】ECharts 多仪表盘（自动）
echarts双环仪表盘
Wangyuan_wo的博客
07-19 1306
echarts双环仪表盘
pyecharts可视化展示之仪表盘、词云、组合图表、桑基图学习
饭饭童鞋的博客
09-10 522
一、绘制仪表盘 通过Gauge绘制仪表盘 #仪表盘 from pyecharts import options as opts from pyecharts.charts import Gauge,Page ga=Gauge() ga.add("商家A",[("购买率",55.5)],axisline_opts=opts.AxisLineOpts( linestyle_opts=opts.LineStyleOpts(color=[(0.3,"#67e0e3"),
Echarts 模拟汽车速度和油量的仪表显示，两个仪表盘同图
大剑师兰特的GIS世界
02-27 806
在vue和echarts联合技术栈的操控下，本专栏提供行之有效的源代码示例。这里既包括样式的修改，又包括常用bug的解决。（1）提供title示例：展示控制标题的颜色、位置、子标题，连接等（2）提供legend示例：展示控制图例的类型、宽度、高度、位置、间隙，边框、阴影、透明度、偏移，字体、颜色，提示语等（3）提供grid示例：展示控制绘图网格的位置、宽度、高度、边框、阴影等（4）提供xAxis示例：展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等。
Echarts笔记——仪表盘（1）
XIATWO
03-31 2151
Echarts笔记——仪表盘（1） 1. 仪表盘类型 （gauge ）。 2. series常用配置： axisLine: 仪表盘轴线相关配置 pointer: 仪表盘指针 axisTick: 刻度样式 axisLabel：标签样式 splitLine：分割线样式 anchor: 表盘中指针的固定点 detail：仪表盘详情，用于显示数据 <!DOCTYPE html> <html lang="en"> <head> <meta c.
echarts 折线图大小
最新发布
08-27
在使用echarts时，可以通过初始化一个echarts实例并设置一个具体的DOM元素来指定折线图的大小。例如，使用以下代码初始化一个echarts实例并设置一个id为"chart"的DOM元素作为折线图的容器： var myChart = echarts....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值