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

  • Post author:
  • Post category:其他


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原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。