<template>
	<view>
		<view id="chart" style="width: 100%; height: 400px;"></view>
		<view id="pie" style="width: 100%; height: 400px;"></view>
		<view id="category" style="width: 100%; height: 400px;"></view>
	</view>
</template>

<script>
	import * as echarts from "../../js_sdk/u-charts/echarts.min.js"

	export default {
		data() {
			return {
				chart: null,
				category: null,
				pie: null
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.chart = echarts.init(document.getElementById('chart'))
				this.chart.setOption({
					color: ['#614321', '#456124'],
					xAxis: {
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {},
					series: [{
						type: 'bar',
						data: [23, 24, 18, 25, 27, 100, 25]
					}, {
						type: 'bar',
						data: [23, 24, 18, 25, 27, 42, 25]
					}]
				})
			})
			this.$nextTick(() => {
				this.pie = echarts.init(document.getElementById("pie"))
				this.pie.setOption({
					series: [{
						type: "pie",
						data: [{
							value: 10,
							name: "10%"
						}, {
							value: 20,
							name: "20%"
						}, {
							value: 25,
							name: "25%"
						}, {
							value: 10,
							name: "10%"
						}, {
							value: 15,
							name: "15%"
						}, {
							value: 20,
							name: "20%"
						}]
					}]
				})
			})
			this.$nextTick(() => {
				this.category = echarts.init(document.getElementById("category"))
				this.category.setOption({
					xAxis: {
						data: [30, 20, 31, 41, 73, 42, 25]
					},
					yAxis: {},
					series: [{
						type: "line",
						data: [23, 24, 18, 25, 27, 42, 25]
					}, {
						type: "line",
						data: [32, 24, 42, 25, 72, 42, 25]
					}]
				})
			})
		}
	}
</script>
