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

最新推荐文章于 2024-08-08 18:06:31 发布

m0_46701899

最新推荐文章于 2024-08-08 18:06:31 发布

阅读量997

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_46701899/article/details/126966497

版权

本文介绍如何使用Echarts创建一个展示五条数据并列的区间折线图，同时展示多个x轴和y轴。当数据超出预设区间时，折线图颜色会有所不同，以此来突出异常值。通过JavaScript进行动态配置，实现复杂图表的绘制。

摘要由CSDN通过智能技术生成

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: fal