bigDataApp/pages/distribution/index.vue

<!-- 地图页面 -->
<template>
	<view>
		<highcharts :chartOptions="options" :styles="styles" ref="simpleChart"></highcharts>
	</view>
</template>
<script>
	import highcharts from "@/components/highcharts/highcharts"
	export default {
		data() {
			return {
				options: {
					chart: {
						type: 'spline' //指定图表的类型，默认是折线图（line）
					},
					title: {
						text: '我的第一个图表' // 标题
					},
					xAxis: {
						type: 'datetime',
						crosshair: true, //十字基准线
						dateTimeLabelFormats: {
							//根据时间间距X轴自动显示哪种格式
							millisecond: "%H:%M:%S.%L",
							second: "%H:%M:%S",
							minute: "%H:%M",
							hour: "%H:%M",
							day: "%m-%d",
							week: "%m-%d",
							month: "%Y-%m",
							year: "%Y",
						},
					},
					yAxis: {
						title: {
							text: '吃水果个数' // y 轴标题
						}
					},
					series:[{
						data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
						// pointStart: Date.UTC(2010, 0, 1),
						pointInterval: 1000*60*60 // one day
					}],
				},
				styles: {
					width: "600rpx",
					height: "600rpx"
				}
			}
		},
		methods: {},

		onLoad() {

		},
		components: {
			highcharts
		}
	}
</script>

<style>

</style>