uni-app app端用highcharts绘制图表，并生成海报保存到手机相册

uni-app 打包app后 highcharts图表绘制不成功，不支持该方法，所以就考虑在app中嵌入webview h5页面，实现图表的绘制。

首先引用安装highcharts,封装成一个组件

npm install highcharts --save

<template>
	<view class="highcharts-container" style="min-width: 250px;" :style="{height:height}"></view>
</template>

<script>
	import Highcharts from 'highcharts'
	import HighchartsMore from 'highcharts/highcharts-more'
	import Highcharts3D from 'highcharts/highcharts-3d'
	import highchartsolidgauge from 'highcharts/modules/solid-gauge'
	import hightchartVariablepie from 'highcharts/modules/variable-pie'
	HighchartsMore(Highcharts)
	highchartsolidgauge(Highcharts)
	Highcharts3D(Highcharts) // 3d模块
	hightchartVariablepie(Highcharts)   // 扇形饼图
	Highcharts.setOptions({
		lang: {
			noData: '暂无数据'
		}
	});
	export default {
		props: {
			options: {
				type: Object
			},
			height: {
				type: String
				
			},
			chartData: {
				type: Array
			},
			title: {
				
			}
			
		},
		data() {
			return {
				chart: null
			}
		},
		watch: {
			chartData:{
				handler(val) {
					this.update(val)
				},
				deep:true
			}
		},
		mounted() {
			this.initChart()
	
		},
		methods: {
			
			initChart() {
				this.chart = new Highcharts.Chart(this.$el, this.options);
			},
			update(chartData) {
				this.chart.update({series:[{data:chartData}]})
				if (this.title) {
					this.chart.update({title:{text:'<view><span style="color:#FF686C;font-size:16px;font-weight:bold">'+this.title+'</span><p style="color:#666;font-size:12px">月流通（吨）</p></view>'}})
				}
				this.chart.legend.update()
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.highcharts-container {
	// width: 600px;
	height: 300px;
}
.highcharts-pie-series .highcharts-point {
	stroke: #EDE;
	stroke-width: 2px;
}
</style>

在页面上引用组件，传入props图表配置项

<view class="chart_box uni-collapse-cell--animation" >
				<highcharts-components :options="pieOption" height="220px" :chartData="pieData" :title="monthlyCirculationTotal"></highcharts-components>
</view>

生成海报用了'html2canvas' 插件，然后新建一个页面，用webview打开这个h5页面

<template>
	<view>
		<web-view :src="url"></web-view>
	</view>
</template>

url 地址是uni-app打包的h5 然后放到服务器上，由于生成海报也是在h5页面生成的,生成之后有个保存到手机相册的功能。由于h5手机端不支持保存到系统相册，试了很多种办法，最后决定用户点击保存海报时，跳转到app内部页面，就可以调用app的保存图片功能。要实现从嵌入的h5跳转到app页面，就是2端之间的通信，需要引用sdk，在index.html body标签后引用，打印出了信息表示调用成功可以通信

<!-- uni 的 SDK，必须引用。 -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	<script>
		document.addEventListener('UniAppJSBridgeReady', function() {  
		    uni.webView.getEnv(function(res) {
		            console.log('当前环境：' + JSON.stringify(res));
		    }); 
		});
	</script>

最后，跳转app内部页面用 uni.webView.navigateTo 方法。

项目还有一个复制链接的功能，用的uni-app插件市场 https://ext.dcloud.net.cn/plugin?id=1163

uni-app app端用highcharts绘制图表，并生成海报保存到手机相册

猜你喜欢