多Y轴曲线

- 日理万妓 2023-01-20 09:38 142阅读 0赞

echarts的链接地址

[https://www.makeapie.com/editor.html?c=xPq8II7iqp][https_www.makeapie.com_editor.html_c_xPq8II7iqp]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70][]

此代码不是上图代码是封装的

//引用 
    creatChart(result, "CombinationCurve", ReaTName)
    
    //封装的 data【数据】el【id】 ReaTName【标题】    
    function creatChart(data, el, ReaTName, options) {
    
    				options = Object.assign({}, {
    					// 曲线上偏移
    					chartGridTop: 50,
    					// 曲线高度
    					chartGridHeight: 180,
    					// 曲线默认颜色
    					echartColor: [],
    					// 曲线类型
    					chartType: 'line'
    				}, options)
    				var overviewTitle = ReaTName; //标题
    				//             console.log("传过来"+overviewTitle)
    				const timeArr = [] // 时间轴
    
    				// y轴二维数组数据点
    				// Tags缓存、
    
    				//				console.log("女司机："+data[0])
    				const Tags = data[0].Tags
    				// 展示曲线数量
    				const curvesCount = Tags.length
    				// 创建一个曲线点数组
    				const yAxisArr = new Array(curvesCount)
    				for(let i = 0; i < curvesCount; i++) {
    					// 每条曲线创建一个数组存储数据
    					yAxisArr[i] = []
    				}
    
    				data.forEach((arr) => {
    					timeArr.push(arr.Time.substr(11, 5))
    					arr.Tags.forEach((ele, index) => {
    						yAxisArr[index].push(ele.Value)
    					})
    				})
    
    				// 拼接曲线格式
    				// 曲线series数组
    				const makeGridDataArr = []
    				// 曲线legend数组
    				const legendArr = []
    				// 直角坐标系内绘图网格grid数组
    				const makeGridArr = []
    				// 拼接x坐标轴数组
    				const makeXAxisArr = []
    				// 拼接y坐标轴数组
    				const makeYAxisArr = []
    				// 临时变量曲线显示下标
    				let axisIndex = -1
    				// 临时变量当前单位
    				let unit = ''
    				//组件 用于区域缩放
    				const YxAxisIndex=[]
    				// 获取展示单位的数组
    				const unitArr = [...new Set(Tags.map(item => item.Unit))]
    
    				// 获取y轴数据
    				unitArr.forEach((item, index) => {
    					let name = ''
    					switch(item) {
    						case '℃':
    							name = '单位（℃）'
    							break
    						case '%':
    							name = '单位（%）'
    							break
    					}
    					makeYAxisArr.push(
    						makeYAxis(index, {
    							name: name
    						})					
    					)
    					YxAxisIndex.push(index)
    //					console.log(YxAxisIndex)
    				})
    
    				Tags.forEach((tag, index) => {
    					legendArr.push(tag.Name)
    					const currentUnit = tag.Unit
    					if(currentUnit !== unit) {
    						axisIndex++
    						unit = currentUnit
    						makeGridArr.push(
    							makeGrid(
    								options.chartGridTop + (options.chartGridHeight + 25) * axisIndex,
    								options.chartGridHeight
    							)
    						)
    						makeXAxisArr.push(
    							makeXAxis(axisIndex, axisIndex === unitArr.length - 1)
    						)
    					}
    
    					const arr = makeGridData(
    						axisIndex,
    						axisIndex,
    						options.chartType,
    						tag.Name,
    						yAxisArr[index], {
    							smooth: true,
    							color: options.echartColor[index],
    							lineStyle: {
    								width: 4
    							}
    						}
    					)
    					makeGridDataArr.push(arr)
    					
    				})
    				const chart = echarts.init(document.getElementById(el))
    				const option = {
    					//					backgroundColor: 'rgba(255, 0, 0, 0)',
    					animation: false,
    					// 标题组件，包含主标题和副标题
    
    					title: {
    						x: 'center',
    						text: overviewTitle, //标题
    						textStyle: {
    							//文字颜色
    							color: '#00C7E1',
    							//字体风格,'normal','italic','oblique'
    							fontStyle: 'normal',
    							//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
    							fontWeight: 'bold',
    							//字体系列
    							fontFamily: 'sans-serif',
    							//字体大小
    							　　　　fontSize: 18
    						},
    					},
    					tooltip: {
    						// 移动端展示方式
    						trigger: 'axis',
    						transitionDuration: 0,
    						confine: true,
    						bordeRadius: 4,
    						borderWidth: 1,
    						backgroundColor: 'rgba(255,255,255,0.9)', //提示框的背景颜色（0.9为透明度）
    						textStyle: {
    							fontSize: 12,
    							aligin: 'center'
    						},
    						formatter: function(params) { //数据单位格式化  
    							var relVal = params[0].name; //x轴名称  
    							relVal += "<div style='width:120px'>"
    							for(var i = 0, l = params.length; i < l; i++) {
    								if(params[i].value) {
    
    									relVal += "<span  style='display:inline-block;margin-right:5px;float:left;border-radius:10px;width:10px;height:10px;background-color:" + params[i].color + ";'>" + '<span  style="display:block;padding-left:15px;margin-top:-4px;color:#333">' + params[i].seriesName + ' : ' + params[i].value + '</span>' + "</span>" + '<br>';
    								}
    							}
    							relVal += "</div>"
    							return relVal;
    						}
    					},
    
    					// 坐标轴指示器（axisPointer）的全局公用设置
    					axisPointer: {
    						type: 'shadow',
    						link: {
    							xAxisIndex: 'all'
    						}
    					},
    					// 直角坐标系内绘图网格
    					grid: makeGridArr,
    					legend: {
    						data: legendArr,
    						textStyle: {
    							fontSize: 12,
    							//							color: '#b3d7ff'
    						},
    						bottom: 70
    					},
    					xAxis: makeXAxisArr,
    					yAxis: makeYAxisArr,
    				
    					// dataZoom 组件 用于区域缩放
    					dataZoom: [{
    						type: 'slider',
    //						xAxisIndex: [0,1],
                            xAxisIndex:YxAxisIndex,
    						realtime: true,
    						// 移动端展示方式
    						handleSize: '140%'
    					}],
    					// 每个系列通过 type 决定自己的图表类型
    					series: makeGridDataArr
    				}
    				chart.setOption(option)
    
    				// 直角坐标系内绘图网格
    				function makeGrid(top, height, opt) {
    					return echarts.util.merge({
    							left: 70,
    							right: 60,
    							top: top,
    							height: height
    						},
    						opt || {},
    						true
    					)
    				}
    
    				// X轴生成器
    				function makeXAxis(gridIndex, axisLabelFlag = true, opt) {
    					return echarts.util.merge({
    							type: 'category',
    							gridIndex: gridIndex,
    							axisLine: {
    								lineStyle: {
    									//									color: '#b3d7ff'
    									//color: '#b0bad4' //网格线的颜色
    								}
    							},
    							// 统一时间轴数据
    							data: timeArr,
    							axisLabel: {
    								show: axisLabelFlag
    							}
    						},
    						opt || {},
    						true
    					)
    				}
                   
    				// Y轴生成器
    				function makeYAxis(gridIndex, opt) {
    					
    					return echarts.util.merge({
    							type: 'value',
    							nameLocation: 'middle',
    							nameGap: '40',
    //							min:50,
    							gridIndex: gridIndex,						
    							axisTick: {
    								show: false
    							},
    							axisLabel: {
    								show: true
    							}
    						},
    						opt || {},
    						true
    					)
    				}
    
    				// 数据生成器
    				function makeGridData(
    					xAxisIndex,
    					yAxisIndex,
    					chartType,
    					chartName,
    					chartData,
    					opt
    				) {
    					return echarts.util.merge({
    							type: chartType,
    							name: chartName,
    							xAxisIndex: xAxisIndex,
    							yAxisIndex: yAxisIndex,
    							data: chartData
    						},
    						opt || {},
    						true
    					)
    				}
    			}

数据格式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70 1][]

[https_www.makeapie.com_editor.html_c_xPq8II7iqp]: https://www.makeapie.com/editor.html?c=xPq8II7iqp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70]: /images/20221021/46707777a4c3442696db1885a84acf79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221021/d4f44788f14c4fc19c6d136d01c031e1.png