<template>
	<div class="barBox">
		<scEcharts ref="c2" :option="option"></scEcharts>
	</div>
</template>

<script>
import scEcharts from '@/components/scEcharts';
export default {
	name: "barBox",
	components:{
		scEcharts
	},
	data(){
		return{
			option:{
				tooltip: {
					trigger: 'axis'
				},
				grid: {
					left: "1%",
					right: '5%',
					bottom: '3%',
					top: "3%",
					containLabel: true
				},
				xAxis: {
					boundaryGap: true,
					type: 'category',
					axisLine:{
						show:true,
						lineStyle:{
							color:['rgba(255,255,255,0.9)']
						}
					},
					axisTick:{
						show:false,
					},
					data:['周一','周二','周三','周四','周四','周五','周六','周日']
				},
				yAxis: [{
					type: 'value',
					name: '',
					axisLine:{
						show:true,
						lineStyle:{
							color:['rgba(255,255,255,0.9)']
						}
					},
					axisLabel:{
						show:true,
						color:'#fff',
					},
					axisTick:{
						show:false,
					},
					splitLine:{
						show:true,
						lineStyle:{
							color:['rgba(255,255,255,0.06)']
						}
					}

				}],
				series: [
					{
						name: '用电',
						type: 'bar',
						smooth:true,
						symbol: 'none',
						labelLine:{
							show:false,
							smooth:false,
						},
						itemStyle: {
							color: '#1367C1',
						},
						areaStyle: {
							opacity: 0.4,
						},
						data: [123,646,577,323,687,189,263,462]
					},
					{
						name: '用气',
						type: 'bar',
						smooth:'true',
						symbol: 'none',
						labelLine:{
						},
						itemStyle: {
							color: '#2A91C4',
						},
						areaStyle: {
							opacity: 0.4,
						},
						data: [123,246,577,623,267,189,563,246]
					},
				],
			},
		}
	},
	mounted() {

	},
	methods:{

	}
}
</script>

<style scoped lang="scss">
	.barBox{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
</style>
