折线图

src/views/Map3d/Map3DMain.vue

@@ -489,16 +489,10 @@
 		},
 		
 		created() {
-			console.log(222)
+			
 			store.markID = ''
 			store.queryMapTables=[]
-			var that = this;
-			this.$nextTick(() => {
-			        setTimeout(() => {
-						console.log(444)
-			            that.$refs._nhtbtj.int();
-			        }, 30)
-			    })
+			
 		},
 		mounted() {
 			

src/views/Map3d/components/nhtbtj.vue

@@ -1,6 +1,6 @@
 <template>
-	<div id="app">
-		<div ref="chart" class="container"></div>
+	<div>
+		<div id="echarts" style="width:400px;height:200px;margin:50px auto;"></div>
 	</div>
 </template>
 
@@ -10,56 +10,101 @@
 	export default {
 		data() {
 			return {
-				// viewersName: '', //视角标签名称
-				// ImgurlList: [], //截图地址列表
+				
 			}
 		},
+		created() { },
+		mounted() {
+			this.typeCharts0()
+		},
 		methods: {
 
-			int() {
-
-				console.log(1111111111111)
-				this.$nextTick(() => {
-					setTimeout(() => {
-						let myChart = echarts.init(this.$refs.chart);
-						let option = {
-							xAxis: {
-							    data: ['一月', '二月', '三月', '四月', '五月']
-							  },
-							  yAxis: {},
-							  series: [
-							    {
-							      data: [10, 22, 28, 43, 49],
-							      type: 'line',
-							      stack: 'x'
-							    },
-							    {
-							      data: [5, 4, 3, 5, 10],
-							      type: 'line',
-							      stack: 'x'
-							    }
-							  ]
-						}
-						myChart.setOption(option);
-					}, 30)
-				})
-
-			}
+		typeCharts0() {
+					let option = this.getOption();
+					var chartDom = document.getElementById('echarts');
+					var myChart = echarts.init(chartDom);
+					myChart.setOption(option, true);
+				},
+				getOption(data) {
+					let option = {
+						color: ["#2B80FF", "#3DF3C4"],
+						title: {
+							text: ''
+						},
+						tooltip: {
+							trigger: 'axis'
+						},
+						legend: {
+							orient: 'horizontal',
+							x: 'center',
+							y: 'top',
+							textStyle: {
+								fontSize: 12,
+							},
+							data: [
+								{
+									name: '上月(kw/h)',
+									textStyle: {
+										color: "#2B80FF "
+									}
+								},
+								{
+									name: '本月(kw/h)',
+									textStyle: {
+										color: "#3DF3C4"
+									}
+								}
+							],
+							backgroundColor: 'rgba(0,0,0,0)',
+							borderColor: '#ccc',
+							borderWidth: 0,
+							padding: 5,
+							itemGap: 10,
+							itemWidth: 20,
+							itemHeight: 14,
+						},
+						grid: {
+							left: '3%',
+							right: '4%',
+							bottom: '3%',
+							containLabel: true
+						},
+						toolbox: {
+							feature: {
+								saveAsImage: {}
+							}
+						},
+						xAxis: {
+							type: 'category',
+							boundaryGap: false,
+							data: ['一月', '二月', '三月', '四月', '五月', '六月']
+						},
+						yAxis: {
+							type: 'value'
+						},
+						series: [
+							{
+								name: '上月(kw/h)',
+								type: 'line',
+								stack: 'Total',
+								data: [1000, 1500, 1300, 1700, 1600, 1200]
+							},
+							{
+								name: '本月(kw/h)',
+								type: 'line',
+								stack: 'Total',
+								data: [1200, 1800, 1400, 1350, 1100, 1500]
+							},
+						]
+					};
+					return option;
+				}
+		
 		},
 
-		mounted() {
-
-
-
-
-
-		}
 	}
 </script>
 
 <style>
-	.container {
-		width: 340px;
-		height: 250px;
-	}
+
 </style>