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