常见的几种echarts类型

于 2024-03-06 16:24:26 发布
阅读量486 收藏 7
点赞数 5
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37299479/article/details/136509823
版权

一：折线图

let option = {
						tooltip: {},
						animation: false,
						grid: {
							top: "20%",
							bottom: "33%", //也可设置left和right设置距离来控制图表的大小
							left: '5%',
							right: '5%'
						},
						xAxis: {
              boundaryGap:false,
							data: [1,2,3,4,5],
							axisLine: {
								show: true, //隐藏X轴轴线
								lineStyle: {
									color: 'rgba(10,71,62,0.2)'
								}
							},
							axisTick: {
								show: false //隐藏X轴刻度
							},
							axisLabel: {
								show: true,
								margin: 14,
								fontSize: 14,
								textStyle: {
									color: "rgba(0,0,0,1)" //X轴文字颜色
								}
							},

						},
						yAxis: [
							{
                name:"%",
                nameLocation:"end",
                nameTextStyle:{
                  color:"#333",
                  align:"right",
									padding:[0,15]
                },
								type: "value",
								gridIndex: 0,
								splitNumber: 4,
								splitLine: {
									show: true,
									lineStyle: {
										color: 'rgba(233,242,241,1)',
										width: 1
									},
								},
								axisTick: {
									show: false
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: 'rgba(233,242,241,1)'
									}
								},
								axisLabel: {
									show: true,
									margin: 14,
									fontSize: 14,
									textStyle: {
										color: "#333" //X轴文字颜色
									}
								},
							}
						],
						series: [
            {
              name: 'Fake Data',
              type: 'line',
              symbol: 'none',
              smooth: true,  
              sampling: 'lttb',
              itemStyle: {
                color: '#20C3A7'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,1)'
                  },
                  {
                    offset: 0,
                    color: 'rgb(32,195,167)'
                  }
                ])
              },
              data: [12,2,3,14,5]
            }
							
						]
					};

第二种：柱形渐变图

let workOrderTjChartoption = {
						tooltip: {},
						color:["#FFAE00","#2AADD3","#20C3A7"],
						animation: false,
						grid: {
							top: "23%",
							bottom: "21%", //也可设置left和right设置距离来控制图表的大小
							left: '11%',
							right: '5%'
						},
						xAxis: {
							data: ['周一','周二'],
							axisLine: {
								show: true, //隐藏X轴轴线
								lineStyle: {
									color: 'rgba(10,71,62,0.2)'
								}
							},
							axisTick: {
								show: false //隐藏X轴刻度
							},
							axisLabel: {
								show: true,
								margin: 14,
								fontSize: 14,
								textStyle: {
									color: "rgba(0,0,0,1)" //X轴文字颜色
								}
							},

						},
						yAxis: [
							{
								type: "value",
								gridIndex: 0,
								// min: min1,
								// max: max1,
								// interval: (max1 - min1) / 4,
								splitNumber: 4,
								splitLine: {
									show: true,
									lineStyle: {
										color: 'rgba(233,242,241,1)',
										width: 1
									},
								},
								axisTick: {
									show: false
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: 'rgba(233,242,241,1)'
									}
								},
								axisLabel: {
									show: true,
									margin: 14,
									fontSize: 14,
									textStyle: {
										color: "#333" //X轴文字颜色
									}
								},
							}
						],
						legend: {
							top: '0%',
							itemWidth:10,
							itemHeight:10,
							data: ["核查测点数", "严重越上限测点数", "越下限测点数"],
						
						},
						series: [
							{
								name: "越下限测点数",
								type: "bar",
								barWidth: 8,
								itemStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: "rgba(29,218,182,1)"
										},
										{
											offset: 1,
											color: "rgba(34,183,160,1)"
										}
										])
									}
								},
								data: [1,2],
								// z: 10,
								// zlevel: 0,

							},
							{
								name: "严重越上限测点数",
								type: "bar",
								barWidth: 8,
								// barGap: '-100%',
								itemStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: "rgba(31,224,247,1)"
										},
										{
											offset: 1,
											color: "rgba(42,173,211,1)"
										}
										])
									}
								},
								data: [1,2],
								// z: 11,
								// zlevel: 1,

							},

							{
								name: '核查测点数',
								type: 'bar',
								barWidth: 8,
								// smooth: true, //是否平滑曲线显示
								// 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
								
							

								itemStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: "rgba(255,222,0,1)"
										},
										{
											offset: 1,
											color: "rgba(255,174,0,1)"
										}
										])
									}
								},
								// z: 12,
								// zlevel: 2,

								data:[2,3],
							}
						]
					};

第三种：柱形图

let option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						legend: {
							top: '5%',
							itemWidth:10,
							itemHeight:10,
							data: ["7%~10%", "10%~15%", "15以上","-10~-20","-20及以下"],
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: [
							{
								type: 'category',
								data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
								axisLine: {
									show: true, //隐藏X轴轴线
									lineStyle: {
										color: 'rgba(10,71,62,0.2)'
									}
								},
								axisTick: {
									show: false //隐藏X轴刻度
								},
								axisLabel: {
									show: true,
									margin: 14,
									fontSize: 14,
									textStyle: {
										color: "rgba(0,0,0,1)" //X轴文字颜色
									}
								},
							}
						],
						yAxis: [
							{
								type: 'value'
							}
						],
						series: [
							
							{
								name: '-20及以下',
								type: 'bar',
								barWidth:15,
								stack: 'Ad',
								emphasis: {
									focus: 'series'
								},
								itemStyle:{
									color:"#20C3A7"
								},
								data: [120, 132, 101, 134, 90, 230, 210]
							},
							{
								// 分隔
								type: "pictorialBar",
								itemStyle: {
									normal: {
										color: "#fff"
									}
								},
								symbolRepeat: "true",
								symbolMargin: 2,
								symbol: "rect",
								symbolClip: true,
								symbolSize: [15, 2],
								symbolPosition: "start",
							// 	symbolOffset: [0, -15],
								symbolBoundingData: [1000, 1000, 1000, 1000, 1000, 1000, 1000],
								data:  [1000, 1000, 1000, 1000, 1000, 1800, 1800],
								width: 25,
								z: 0,
								zlevel: 1,
							},
							{
								name: '-10~-20',
								type: 'bar',
								barWidth:15,
								stack: 'Ad',
								emphasis: {
									focus: 'series'
								},
								itemStyle:{
									color:"#249AEC"
								},
								data: [220, 182, 191, 234, 290, 330, 310]
							},
						
							{
								name: '15以上',
								type: 'bar',
								barWidth:15,
								stack: 'Ad',
								emphasis: {
									focus: 'series'
								},
								itemStyle:{
									color:"#35C03F"
								},
								data: [150, 232, 201, 154, 190, 330, 410]
							},
							{
								name: '10%~15%',
								type: 'bar',
								barWidth:15,
								stack: 'Ad',
								emphasis: {
									focus: 'series'
								},
								itemStyle:{
									color:"#FFAE00"
								},
								data: [150, 232, 201, 154, 190, 330, 410]
							},
							{
								name: '7%~10%',
								type: 'bar',
								barWidth:15,
								stack: 'Ad',
								emphasis: {
									focus: 'series'
								},
								itemStyle:{
									color:"#FF7214"
								},
								data: [150, 132, 101, 254, 190, 330, 410]
							},
						
						
							
						
						]
					};

第四种:柱形图

let option = {
						tooltip: {},
						animation: false,
						grid: {
							top: "25%",
							bottom: "16%", //也可设置left和right设置距离来控制图表的大小
							left: '5%',
							right: '5%'
						},
						xAxis: {
							data: [1,2,3,4],
							axisLine: {
								show: true, //隐藏X轴轴线
								lineStyle: {
									color: 'rgba(10,71,62,0.2)'
								}
							},
							axisTick: {
								show: false //隐藏X轴刻度
							},
							axisLabel: {
								show: true,
								margin: 14,
								fontSize: 14,
								textStyle: {
									color: "rgba(0,0,0,1)" //X轴文字颜色
								}
							},

						},
						yAxis: [
							{
								type: "value",
								gridIndex: 0,
								// min: min1,
								// max: max1,
								// interval: (max1 - min1) / 4,
								splitNumber: 4,
								splitLine: {
									show: true,
									lineStyle: {
										color: 'rgba(233,242,241,1)',
										width: 1
									},
								},
								axisTick: {
									show: false
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: 'rgba(233,242,241,1)'
									}
								},
								axisLabel: {
									show: true,
									margin: 14,
									fontSize: 14,
									textStyle: {
										color: "#333" //X轴文字颜色
									}
								},
							},
							{
								name: "%",
								type: "value",
								gridIndex: 0,
								// min: min2,
								// max: max2,
								// interval: (max2 - min2) / 4,
								splitNumber: 4,
								splitLine: {
									show: true,
									lineStyle: {
										color: 'rgba(233,242,241,1)',
										width: 1
									},
								},
								axisTick: {
									show: false
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: 'rgba(233,242,241,1)'
									}
								},
								axisLabel: {
									show: true,
									margin: 14,
									fontSize: 14,
									textStyle: {
										color: "#333" //X轴文字颜色
									}
								},
							},
						],
						legend: {
							top: '5%',
							data: ["总数", "越限"],
							itemWidth:10,
							itemHeight:10,
							itemGap:20
						},
						series: [
							{
								name: "总数",
								type: "bar",
								barWidth: 15,
								itemStyle: {
									normal: {
										color: "#E8F8F5",
										borderColor: '#22B7A0'
									}
								},
								data: [10,10,10,10],
								z: 10,
								zlevel: 0,

							},
							{
								name: "越限",
								type: "bar",
								barWidth: 15,
								barGap: '-100%',
								itemStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: "rgba(34,183,160,1)"
										},
										{
											offset: 1,
											color: "rgba(29,218,182,1)"
										}
										])
									}
								},
								data: [2,3,4,6],
								z: 11,
								zlevel: 1,

							},

							
						]
					};

半个开心果
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts常用类型及参数说明
qq_33911541的博客
07-20 386
echarts常用参数说明及类型
echarts 地图类型热力图
05-14
根据地理区域数据的可视化，除了在地图上添加散点之外，我们也可以制作地图类型的热力图，详细介绍：https://blog.csdn.net/qq_36437172/article/details/106121650
Echarts图表类型
前端小白到专家的博客
09-26 3157
【代码】Echarts图表类型。
Echarts图表介绍
最新发布
wangxuanyang_zer的博客
10-22 1134
开发者可以自定义图表的外观，以满足特定的设计需求，从而保持一致的品牌标识。
Echarts图表各类型概述
芷芸的博客
11-09 4686
Echarts图表各类型概述概述新的改变 概述 近期对Echarts各类型图标做了功能性的了解，做了简单的概述总结，主要方便自己记忆。 新的改变 1.柱状图： 柱状图用于较小的数据集分析，重在比较数据大小。 2.折线图： 用于显示在相等时间间隔下数据的趋势，重在显示数据变化的趋势。 3.饼图： 重在展示各项的大小与各项总和的比例。 4.散点图： 散点图更偏向于研究型图表，散点图核心的价值在于发现变量之间的关系， 线性关系、指数关系、对数关系等等，或者没有关系， 散点图经过回归分析之后，可以对相关对象进行预测
【高级课程笔记】—— Echarts常用图表
柳柳66的博客
10-19 1443
一、折线图 line 折线图主要用来展示数据相随着时间推移的变化。 折线图非常适合用于展示一个连续的二维数据，如某网站访问人数或商品销量价格的波动。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>折线</title&...
Echarts数据可视化常见问题
03-12
Echarts数据可视化常见问题
echarts+ajax常见的图表
03-01
echarts官方常见的柱状，折线，饼图，旭日图以及定时刷新图表
echarts2.2.7
06-28
有静态文档可以参考，解压直接打开
echarts文档离线
10-10
echarts文档离线
echarts各种图表
05-10
各种图表、折线图、柱形图等等，一些常用的图表 不管是你见过的没见过的都有
史上最全的ECharts讲解与使用
DT辰白
04-30 9555
首先搞清楚，什么是ECharts？ ECharts，一个使用 JavaScript 实现的开源可视化库。 ECharts支持数据类型 支持直接传入包括二维表，key-value 等多种格式的数据源。常用的key-value格式数据、如json和HashMap都是key-value的数据存储方式。 简单介绍json和HashMap两种数据结构 JSON建构于两种结构： 1、 “名称/值”对的集合。 ...
ECharts基础概念
CodingmanNAN的博客
09-07 847
Hello ECharts 1.引入 ECharts <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html> 2.绘制一个简单的图表 <!-- 为ECharts准备一个具备大小（宽高）的 Dom -->
ECharts数据可视化--常用图表类型
小马哥的博客
03-10 9391
数据可视化
echarts图类型设置
weixin_34013044的博客
07-16 484
1.title:标题组件2.tooltip:提示框组件3.legend：图例组件，展现了不同系列的标记(symbol)，颜色和名字4.xAxis：直角坐标系 grid 中的 x 轴，单个 grid 组件最多只能放上下两个 x 轴。5.yAxis:直角坐标系 grid 中的 y 轴，单个 grid 组件最多只能放左右两个 y 轴。6.series:系列列表。每个系列通过 type 决定自己...
Echarts3图表种类总结
Annie的博客
09-25 4830
Line 折线图 直观描述变化趋势 可描述一个或多个项目 可在极坐标下展示 Bar 柱状图（条形图） 直观描述“量” 可描述一个或多个项目 正负条形图-可用于两个项目的直观比较（收入和支出的差值） 堆叠条形图-子项目堆叠（总收入包括不同的收入来源） 瀑布阶梯图-同时显示某一阶段的变化量和总量 可在极坐标下展示   Pie 饼图 显示部分占总数...
echarts常见图形-不同种类不同颜色柱状图(二)
qq_43167748的博客
01-13 1674
颜色分类柱状图一级目录1.最终效果图2.echarts文件(ncplxfx.js)3.vue文件中3.1 html3.2 js逻辑处理(引入ncplxfx.js) 一级目录 1.最终效果图 2.echarts文件(ncplxfx.js) import echarts from "echarts"; export const ncplxfxOption = (xData, sData) => { let colorArr = [ { top: "#097693",
echarts改变默认标记类型
river、的博客
11-15 4874
ECharts 提供的标记类型包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’。也可以通过 ‘image://url’ 设置为图片，其中 url 为图片的链接，或者 dataURI。可以通过 ‘path://’ 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且
echarts series
08-05
ECharts 是一个基于 JavaScript 的开源可视化库，用于构建交互式的图表和地图。在 ECharts 中，series（系列）是用来描述图表中不同类型数据的集合。每个系列可以包含多个数据项，每个数据项代表一个具体的数据点。 ECharts 中常见的系列有以下几种类型： 1. 折线图（line series）：用于展示随着时间或其他连续变量的变化而变化的数据。 2. 柱状图（bar series）：用于展示不同类别或分组之间的数据比较。 3. 散点图（scatter series）：用于展示两个变量之间的关系。 4. 饼图（pie series）：用于展示占比关系或分类数据。 5. 地图（map series）：用于展示地理数据在地图上的分布情况。 除了以上常见的系列类型，ECharts 还支持其他一些系列类型，如雷达图、K 线图等。每个系列都可以通过设置不同的配置项来自定义样式、数据等。 希望以上解答对您有帮助！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值