qq_41717157
长安°、
2021-01-14 16:21

vue 里面用echarts的图表联动失败 echarts.connect()方法无法使用

  • vue.js
<template>
	<div>
		<div style="width: 1400px;height:400px;margin:auto;display:flex;border:1px solid">
			<div id="main1" style="width: 600px;height:300px"></div>
			<div id="main2" style="width: 600px;height:300px"></div>
		</div>
		<div style="width: 1400px;height:400px;margin:auto;display:flex;border:1px solid">
			<div id="main3" style="width: 600px;height:300px"></div>
			<div id="main4" style="width: 600px;height:300px"></div>
		</div>
	</div>

</template>
<script>
	export default {
		name: 'hello',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		},

		mounted() {
			this.drawLine();
		},
		methods: {
			drawLine() {
				// 绘制图表
				var myChart1 = this.$echarts.init(document.getElementById('main1'))
				var myChart2 = this.$echarts.init(document.getElementById('main2'))
				var myChart3 = this.$echarts.init(document.getElementById('main3'))
				var myChart4 = this.$echarts.init(document.getElementById('main4')
				var option1 = {
					dataZoom:{
						show:false
					},
					title: {
						text: '温度状况',
						subtext: '纯属虚构'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['设定温度', '进水温度', '出水温度', '环境温度']
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					xAxis: [{
						type: 'category', //x轴为类目类型
						axisLabel: {
							show: true,
							interval: 0,
							rotate: 45
						},
						data: ['00:00:00', '00:05:00', '00:10:00', '00:15:00', '00:20:00', '00:25:00', '00:30:00', '00:35:00',
							'00:40:00', '00:45:00'
						]

					}],
					yAxis: [{
						type: 'value' //y轴为值类型
					}],
					series: [{
						name: '设定温度',
						type: 'line',
						smooth: true,
						data: [55, 55, 55, 55, 55, 55, 55, 55, 55, 55]
					}]
				}

				var option2 = {
					dataZoom:{
						show:false
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						y: -30,
						data: ['设定温度', '进水温度', '出水温度', '环境温度']
					},
					toolbox: {
						y: -30,
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					xAxis: [{
						type: 'category', //x轴为类目类型
						axisLabel: {
							show: true,
							interval: 0,
							rotate: 45
						},
						data: ['00:00:00', '00:05:00', '00:10:00', '00:15:00', '00:20:00', '00:25:00', '00:30:00', '00:35:00',
							'00:40:00', '00:45:00'
						]

					}],
					yAxis: [{
						type: 'value' //y轴为值类型
					}],
					series: [{
						name: '进水温度',
						type: 'line',
						smooth: true,
						data: [15, 15, 16, 18, 18, 19, 19, 19, 19, 19]
					}]
				}

				var option3 = {
					dataZoom:{
						show:false
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						y: -30,
						data: ['设定温度', '进水温度', '出水温度', '环境温度']
					},
					toolbox: {
						y: -30,
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					xAxis: [{
						type: 'category', //x轴为类目类型
						axisLabel: {
							show: true,
							interval: 0,
							rotate: 45
						},
						data: ['00:00:00', '00:05:00', '00:10:00', '00:15:00', '00:20:00', '00:25:00', '00:30:00', '00:35:00',
							'00:40:00', '00:45:00'
						]

					}],
					yAxis: [{
						type: 'value' //y轴为值类型
					}],
					series: [{
						name: '出水温度',
						type: 'line',
						smooth: true,
						data: [20, 25, 30, 35, 38, 44, 46, 48, 53, 56]
					}]
				}

				var option4 = {
					dataZoom:{
						show:false
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						y: -30,
						data: ['设定温度', '进水温度', '出水温度', '环境温度']
					},
					toolbox: {
						y: -30,
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					xAxis: [{
						type: 'category', //x轴为类目类型
						axisLabel: {
							show: true,
							interval: 0,
							rotate: 45
						},
						data: ['00:00:00', '00:05:00', '00:10:00', '00:15:00', '00:20:00', '00:25:00', '00:30:00', '00:35:00',
							'00:40:00', '00:45:00'
						]

					}],
					yAxis: [{
						type: 'value' //y轴为值类型
					}],
					series: [{
						name: '环境温度',
						type: 'line',
						smooth: true,
						data: [15, 15, 15, 15, 15, 15, 15, 15, 15, 15]
					}]
				}

				// 为echarts对象加载数据 
				myChart1.setOption(option1);
				myChart2.setOption(option2);
				myChart3.setOption(option3);
				myChart4.setOption(option4);
				//联动配置
				myChart1.connect([myChart2, myChart3, myChart4]);
				myChart2.connect([myChart1, myChart3, myChart4]);
				myChart3.connect([myChart2, myChart1, myChart4]);
				myChart4.connect([myChart2, myChart3, myChart1]);

			}
		}
	}
</script>

 

 

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

1条回答

为你推荐

换一换