La aplicación uni-app utiliza gráficos altos para dibujar gráficos y generar carteles para guardarlos en el álbum del teléfono móvil.

Después de que uni-app empaqueta la aplicación, el dibujo del gráfico highcharts falla y este método no es compatible, por lo que consideramos incrustar la página webview h5 en la aplicación para dibujar el gráfico.

Primero, instale highcharts por referencia y encapsúlelo en un componente.

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>

Haga referencia al componente en la página y pase los elementos de configuración del gráfico de accesorios.

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

Se utilizó el complemento 'html2canvas' para generar el póster y luego se creó una nueva página y se abrió la página h5 con webview.

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

La dirección URL es h5 empaquetada por uni-app y luego colocada en el servidor. Dado que el póster generado también se genera en la página h5, existe la función de guardarlo en el álbum del teléfono móvil después de la generación. Dado que el teléfono móvil h5 no admite guardar en el álbum del sistema, probé muchos métodos y finalmente decidí que cuando el usuario haga clic para guardar el póster, saltará a la página interna de la aplicación y se podrá llamar a la función de guardar imágenes de la aplicación. . Para saltar del h5 incrustado a la página de la aplicación, que es la comunicación entre los dos extremos, debe citar el SDK, citarlo después de la etiqueta del cuerpo index.html e imprimir la información para indicar que la llamada se realizó correctamente y la comunicación es posible.

<!-- 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>

Finalmente, use  el método uni.webView.navigateTo para saltar a la página interna de la aplicación.

El proyecto también tiene la función de copiar enlaces, utilizando el mercado de complementos uni-app  https://ext.dcloud.net.cn/plugin?id=1163