<template>
	<view class="charts-box">
		<qiun-data-charts type="tarea" :chartData="chartData" :opts="opts" :ontouch="true"/>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
	      chartData: {},
				opts: {}
	    };
	  },
		// mounted() {
		// 	this.getServerData()
		// },
	  methods: {
	    drawChart(xData, yData, unit) {
				let max = Math.max.apply(null, yData) + 1
				console.log(max)
				let opts = {
					"padding": [20, 0, 5, 0],
					'enableScroll': true,
					// "dataLabel": false,
					"legend": {
						"show": false
					},
					"xAxis": {
						"disableGrid": true,
						"fontColor": 'rgba(0, 0, 0, 0.45)',
					  "boundaryGap": 'center',
						"fontSize":12,
					  "scrollShow": true,
					  "scrollColor": '#C8C8C8',
						"itemCount": 8,
						'rotateLabel': true,
					},
					"yAxis": {
						"gridType": "dash",
						"dashLength": 8,
						"showTitle": true,
						"data":[
							{
								"type": 'value',
								"min":0,
								"max": max,
								"tofix": 1,
								"title": unit,
								"titleOffsetX": -10,
								"titleOffsetY": -8,
								"textAlign": 'right',
								"fontColor": 'rgba(0, 0, 0, 0.45)',
							}
						]
					},
					"extra": {
						"tooltip": {
							"showBox": false
						},
						"area": {
							"type": "curve",
							"opacity": 0.8,
							"addLine": true,
							"width": 2,
							"gradient": true,
						},
					}
				}
				this.opts = opts
				let res = {
					categories:xData,
					series: [{data: yData}]
				}
				this.chartData = JSON.parse(JSON.stringify(res))
	    },
	  }
	}
</script>

<style lang="scss">
	.charts-box {
		width: 100%;
		height: 100%;
	}
</style>