JT-CIM-ZHNY/src/views/Map3d/components/nhtbtj.vue

<template>
	<div>
		<div id="echarts"></div>
	</div>
</template>

<script>
	import * as echarts from "echarts";

	export default {
		data() {
			return {

			}
		},
		created() {},
		mounted() {
			this.typeCharts0()
		},
		methods: {

			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;
			}

		},

	}
</script>

<style scoped>
	#echarts {
		width: 320rem;
		height: 200rem;
		margin: 10rem;
	}
</style>