bigDataApp/components/highcharts/highcharts.vue

<template>
	<view class="">
		<highcharts :options="chartOptions" :style="styles"></highcharts>
	</view>
	<!-- <view class="highcharts-container"></view> -->
</template>

<script>
	import {
		Chart
	} from 'highcharts-vue'
	import Highcharts from 'highcharts'
	import HighchartsNoData from 'highcharts/modules/no-data-to-display'
	HighchartsNoData(Highcharts)
	// import Highcharts from 'highcharts/highstock';
	// import HighchartsMore from 'highcharts/highcharts-more';
	// import HighchartsDrilldown from 'highcharts/modules/drilldown';
	// import Highcharts3D from 'highcharts/highcharts-3d';
	// HighchartsMore(Highcharts)
	// HighchartsDrilldown(Highcharts);
	// Highcharts3D(Highcharts);

	export default {
		props: ['chartOptions', 'styles'],
		data() {
			return {
			}
		},
		onLoad() {
			this.initChart();
		},
		methods: {
			initChart() {
				console.log(this.$el);
				this.$el.style.width = (this.styles.width || 800) + 'px';
				this.$el.style.height = (this.styles.height || 400) + 'px';
				this.chart = new Highcharts.Chart(this.$el, this.options);
			}
		},
		components: {
			highcharts: Chart
		}
	}
</script>

<style lang="scss">
	.highcharts-container {
		width: 800px;
		height: 400px;
	}
</style>