echarts 五条数据并列显示区间折线图，多x轴多y轴，超出区间折线图颜色不同

最新推荐文章于 2022-10-11 14:30:25 发布
最新推荐文章于 2022-10-11 14:30:25 发布
阅读量934 收藏 1
点赞数
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46701899/article/details/126966497
版权

 

option = {
				backgroundColor: '',
				tooltip: {
					trigger: 'axis',
				},
				visualMap: [{
						show: false,
						splitNumber: 3,
						seriesIndex: 0,
						pieces: [{
								gte: 0,
								lte: 1200,
								color: 'red'
							},
							{
								gte: 1200,
								lte: 1500,
								color: 'green'
							},
							{
								gte: 1500,
								lte: 1800,
								color: 'red'
							}
						]
					},
					{
						show: false,
						splitNumber: 3,
						seriesIndex: 1,
						pieces: [{
								gte: 0,
								lte: 1300,
								color: 'red'
							},
							{
								gte: 1300,
								lte: 1600,
								color: 'green'
							},
							{
								gte: 1600,
								lte: 1800,
								color: 'red'
							}
						]
					},
					{
						show: false,
						splitNumber: 3,
						seriesIndex: 2,
						pieces: [
							{
								gte: 0,
								lte: 800,
								color: 'red'
							},
							{
								gte: 800,
								lte: 1100,
								color: 'green'
							},
							{
								gte: 1100,
								lte: 1800,
								color: 'red'
							}
						]
					},
					{
						show: false,
						splitNumber: 3,
						seriesIndex: 3,
						pieces: [
							{
								gte: 0,
								lte: 800,
								color: 'red'
							},
							{
								gte: 800,
								lte: 1100,
								color: 'green'
							},
							{
								gte: 1100,
								lte: 1800,
								color: 'red'
							}
						]
					},
          {
						show: false,
						splitNumber: 3,
						seriesIndex: 4,
						pieces: [
							{
								gte: 0,
								lte: 800,
								color: 'red'
							},
							{
								gte: 800,
								lte: 1100,
								color: 'green'
							},
							{
								gte: 1100,
								lte: 1800,
								color: 'red'
							}
						]
					}
				],
				grid: [
					{
						left: '4%',
						right: '80%'
					},
					{
						left: '20%',
						right: '60%'
					},
					{
						left: '40%',
						right: '40%'
					},
					{
						left: '60%',
						right: '20%'
					},{
						left: '80%',
						right: '0%'
					}
				],
				xAxis: [
					{
						type: 'category',
						axisTick: {
							show: false
						},
						boundaryGap: true,
						gridIndex: 0,
						axisLine: { //y轴
							show: true
						},
					},
					{
						splitLine: {
							show: false
						},

						gridIndex: 1,
						boundaryGap: true,
						type: 'category',
						show: true,
					},
					{
						type: "category",
						gridIndex: 2,
						show: true,
					},
					{
						type: "category",

						gridIndex: 3,
						show: true,
					},
          {
						type: "category",
						gridIndex: 4,
						show: true,
					},
				],
				yAxis: [
					{
						type: 'value',
						axisLine: {
							show: true
						},
						splitLine: {
							show: true
						},
						gridIndex: 0,
					},
					{
						gridIndex: 1,
						splitLine: {
							show: true
						},
						min: 0,
						max: 1800,
						axisLabel: {
							show: false
						},
					},
					{
						type: "value",
						gridIndex: 2,
						splitLine: {
							show: true
						},
						min: 0,
						max: 1800,
						axisLabel: {
							show: false
						},
					},
					{
						type: "value",
						gridIndex: 3,
						splitLine: {
							show: true
						},
						min: 0,
						max: 1800,
						axisLabel: {
							show: false
						},
					},
          {
						type: "value",
						gridIndex: 4,
						splitLine: {
							show: true
						},
						min: 0,
						max: 1800,
						axisLabel: {
							show: false
						},
					}
				],
				series: [
					{
						name: '',
						type: 'line',
						data: [
							[0, 1500],
							[50, 600],
							[100, 1000],
							[150, 800],
							[200, 1600],
							[250, 900],
							[300, 1800]
						],
						markArea: {
							itemStyle: {
								color: 'rgba(134,222,165,.4)'
							},
							data: [
								[{
									yAxis: 1200,
									xAxis: 0
								}, {
									yAxis: 1500,
									xAxis: 300
								}]
							]
						},

						xAxisIndex: 0,
						yAxisIndex: 0
					},
					{
						name: '',
						type: 'line',
						markArea: {
							itemStyle: {
								color: 'rgba(134,222,165,.4)'
							},
							data: [
								[{
										yAxis: 1300,
									},
									{
										yAxis: 1600,
									}
								],
							]
						},
						xAxisIndex: 1,
						yAxisIndex: 1,
						data: [
							[350, 600],
							[400, 1000],
							[450, 800],
							[500, 1600],
							[550, 900],
							[600, 1800],
							[650, 500]
						]
					},
					{
						name: '',
						type: 'line',
						xAxisIndex: 2,
						yAxisIndex: 2,
						markArea: {
							itemStyle: {
								color: 'rgba(134,222,165,.4)'
							},
							data: [
								[
									{
										yAxis: 800,
                    xAxis:0,
									},
									{
										yAxis: 1100,
                   xAxis:120,
									}
								],
							]
						},
						data: [
							[700, 600],
							[750, 1100],
							[800, 800],
							[850, 1300],
							[900, 900],
							[950, 1800],
							[1000, 600]
						]
					},
					{
						name: '',
						type: 'line',
						xAxisIndex: 3,
						yAxisIndex: 3,
						markArea: {
							itemStyle: {
								color: 'rgba(134,222,165,.4)'
							},
							data: [
								[{
										yAxis: 800,
									},
									{
										yAxis: 1100,
									}
								],
							]
						},
						data: [
							[700, 600],
							[750, 1100],
							[800, 800],
							[850, 1300],
							[900, 900],
							[950, 1800],
							[1000, 600]
						]
					},
          {
						name: '',
						type: 'line',
						xAxisIndex: 4,
						yAxisIndex: 4,
						markArea: {
							itemStyle: {
								color: 'rgba(134,222,165,.4)'
							},
							data: [
								[{
										yAxis: 800,
									},
									{
										yAxis: 1100,
									}
								],
							]
						},
						data: [
							[700, 600],
							[750, 1100],
							[800, 800],
							[850, 1300],
							[900, 900],
							[950, 1800],
							[1000, 600]
						]
					},
             {
						name: '',
						type: 'line',
            data:[1350,1350],
            symbol:'none',
            lineStyle:{
              color:'#9eb1f7',
            },
						markArea: {
							itemStyle: {
								color: 'rgba(134,222,165,.0)'
							},
							data: [
								[{name:'111'},{}]
							]
						},
						xAxisIndex: 0,
						yAxisIndex: 0
					},
          {
						name: '',
						type: 'line',
           data:[[350,1480],[1000,1480]],
            symbol:'none',
            lineStyle:{
              color:'#9eb1f7',
            },
						markArea: {
							itemStyle: {
								color: 'rgba(134,222,165,.0)'
							},
							data: [
								[{name:'111'},{}]
							]
						},
						xAxisIndex: 1,
						yAxisIndex: 1
					},
          {
						name: '',
						type: 'line',
            data:[[700,900],[1000,900]],
            symbol:'none',
            lineStyle:{
              color:'#9eb1f7',
            },
						markArea: {
							itemStyle: {
								color: 'rgba(134,222,165,.0)'
							},
							data: [
								[{name:'111'},{}]
							]
						},
						xAxisIndex: 2,
						yAxisIndex: 2
					},
           {
						name: '',
            data:[[700,900],[1000,900]],
            lineStyle:{
              color:'#9eb1f7',
            },
            symbol:'none',
						type: 'line',
						markArea: {
							itemStyle: {
								color: 'rgba(134,222,165,.0)'
							},
							data: [
								[{name:'111'},{}]
							]
						},
						xAxisIndex: 3,
						yAxisIndex: 3
					},
          {
						name: '',
            data:[[700,900],[1000,900]],
            lineStyle:{
              color:'#9eb1f7',
            },
            symbol:'none',
						type: 'line',
						markArea: {
							itemStyle: {
								color: 'rgba(134,222,165,.0)'
							},
							data: [
								[{name:'111'},{}]
							]
						},
						xAxisIndex: 4,
						yAxisIndex: 4
					},
				]
			};

m0_46701899
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts多个x轴，多个y轴.zip
12-31
通过echarts官网学习后，根据项目的需要，对echarts进行扩充和整理，发现可支持多个x轴，多个y轴，比想象中简单，echarts的确是很强大的资源，希望大家能有启发。
echarts的X轴显示特定个数label并修改样式
keloneko的博客
02-17 1万+
echarts的x轴刻度格式化，样式优化调整
ECharts 多X轴多Y轴
dhdhdh0920的专栏
09-05 2516
https://gallery.echartsjs.com/editor.html?c=xNLI0wpbN4
echars在x轴的类目隔一个显示一个
weixin_33953249的博客
07-28 86
例如： 应该显示： 类目1 类目2 类目3 类目4 类目5 类目6 而只是显示：类目1 类目3 类目5 最终，类目2，4，6没有显示，这是因为：x轴类目的间距过大，导致的显示不全。 可以这样设置： xAxis ={ 　　data:postArrX, 　　type:"category", 　　axisLabel ...
echarts 多y轴，区间柱状折线图
m0_46701899的博客
10-11 507
echarts 多y轴，区间柱状折线图
echarts 图表 折线图
07-21
echarts 图表 折线图
VBA多列数据区间条件数据对比.xlsm
最新发布
12-22
VBA多列数据区间条件数据对比.xlsm 多条件并列成立 列1：筛选1-100 列2：筛选2-50 列3：筛选50-100
echarts 圆环图 中间显示数据 下边显示标题
01-07
echarts 圆环图 中间显示数据 下边显示标题 $(function(){ getqykpnzqdata(qykpnzqjn,qykpnzqqn,wmgdseletj); }) /** * 获得数据并显示echarts图 * idnamejn : 显示今年数据的idname * idnameqn : 显示去年数据...
用python建立两个Y轴的XY曲线图方法
09-19
今天小编就为大家分享一篇用python建立两个Y轴的XY曲线图方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于Matlab实现多组并列柱状图的填充画法（源码+指导视频）.rar
06-05
基于Matlab实现多组并列柱状图的填充画法（源码+指导视频）.rar
echarts折线图曲线图分段用不同颜色显示，曲线改变颜色例子，Y轴超过某一数值曲线变色
05-04
echarts折线图曲线图分段用不同颜色显示，Y轴超过某一数值变色,echarts曲线改变颜色例子,x轴和y轴数据可以自己定义,曲线默认显示黑色(black)，400以上900以下显示成金色(gold)。 核心代码 visualMap: { show: false, dimension: 1, pieces: [], //pieces的值由动态数据决定 outOfRange: { color: 'black' } //上面是按官方文档固定格式，主要是配置样式布局，实际的x轴和y轴数据可以通过ajax在后台取得 //x轴数据 var datax = ['1月', '2月', '3月', '4月', '5月','6月', '7月', '8月', '9月','10月']; //模拟动态数据 option.xAxis.data = datax; //y轴数据 var datay = [160, 280, 350, 500, 200, 250, 800, 600, 550, 200]; option.series[0].data = datay; //400以上,900以下显示成金色(gold) option.visualMap.pieces[0] = {gte: 400, lte: 900, color: 'gold'};
使用ECharts实现状态区间图
12-12
需求背景 假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态：y轴用于展示各网口，x轴用于展示时间(分钟)，使用条形图的不同颜色来表示不同时间区间段的状态，使用深蓝、浅蓝、橙色、红色分别代表正常、繁忙、故障、离线四种状态。以WAN0为例，图中则表示了0~10分钟为正常，10~25分钟为繁忙，25~45分钟为故障，45~60分钟为离线。 根据此图，很容易想到可以用条形图试试。但后来发现，如果用堆叠条形图，则每种状态在每一个网口对应的图形中只能出现一次，这不能实现需求。于是继续查阅echart官网示例，终于在自定义类型图表中找到了一个相似的示例，地址 通过研究示例代码并进行一番改造，终
echarts实现多维坐标轴
09-17
在开发过程中可能会遇到把数据显示在同一个坐标轴中，但是x，y轴的数据单位不一样
jQuery多图并列焦点图插件
10-31
jQuery多图并列焦点图插件 jQuery多图并列焦点图插件 jQuery多图并列焦点图插件
echarts 实现区域划分 折线图
晨曦月的博客
11-26 3976
先给出图表样式 这张图看上去是个普通的折线图，但是仔细看又有一些不同，首先它是有区域划分的，不同区域，对应的线条颜色不一样，其次y轴是自定义的，还有各种标记等，总之是有很多构思在里面。 echarts图例当中找了很多相似的折线图，但是都不能满足需求，于是动手自己绘制。 废话不多说，直接上代码，小伙伴们可以参考下： let dom = document.getElementById("ichart"); dom.style.width = window.innerWidth / 4 + "px";
Echarts实现多个x轴或y轴曲线图
热门推荐
MCWJ007的博客
10-30 1万+
Echart实现多个x轴或y轴曲线图 效果图如下： 1.1 配置option对象 option:{ // 设置 x 轴的样式 xAxis:{}, // 设置 y 轴的样式 yAxis:[], // 设置每条曲线的数据和样式 series:[], // 设置鼠标hover时的提示信息 tooltip:{}, // 调整表格两边的空白的区域 grid:{}, // 调整图样的名称 legend:{} //
echarts折线图有多个y轴，折线根据对应轴单位绘制
A20190518的博客
08-14 989
在series中添加属性yAxisIndex: 0,1,2,3… 官方解释 https://echarts.apache.org/zh/option.html#series-line.yAxisIndex 实现效果
echarts 折线图
aibujin的博客
05-16 9960
echarts 折线图，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；
折线图（用ECharts绘制）
我的博客
08-16 777
目录 折线图常常用来分析数据随时间的变化趋势 常见效果 最大值、最小值 markPoint 平均值 markLine 标注区间 markArea 线条风格：平滑 smooth 风格：lineStyle 填充风格 areaStyle <!DOCTYPE html> <html lang="en"> <he...
echarts柱形堆叠图x轴显示多个
09-02
在echarts柱状堆叠图中，如果想要x轴显示多个值，可以通过以下步骤实现: 1. 遍历数据，找出要显示在x轴上的数据，并进行去重处理。这些数据将作为x轴的刻度标签。 2. 遍历数据，生成对应的series对象。在series对象中，每一项对应一个图例，需要确保图例和x轴上的标签一一对应。 3. 在生成series对象时，通过设置stack属性来控制柱状图的堆叠效果。相同stack属性的柱状图会堆叠在一起，而不同stack属性的柱状图会并列显示。 通过以上步骤，你可以实现echarts柱状堆叠图的x轴显示多个值。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [echarts 柱状堆叠图（图例和x轴都是动态的）](https://blog.csdn.net/weixin_44058725/article/details/126588661)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值