After uni-app packages the app, the highcharts chart drawing fails and this method is not supported, so we consider embedding the webview h5 page in the app to draw the chart.
First, install highcharts by reference and encapsulate it into a component.
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>Reference the component on the page and pass in the props chart configuration items
<view class="chart_box uni-collapse-cell--animation" >
<highcharts-components :options="pieOption" height="220px" :chartData="pieData" :title="monthlyCirculationTotal"></highcharts-components>
</view>The 'html2canvas' plug-in was used to generate the poster , and then a new page was created and the h5 page was opened with webview.
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>The url address is h5 packaged by uni-app and then placed on the server. Since the generated poster is also generated on the h5 page, there is a function of saving it to the mobile phone album after generation. Since the h5 mobile phone does not support saving to the system album, I tried many methods and finally decided that when the user clicks to save the poster, it will jump to the internal page of the app and the app's image saving function can be called. To jump from the embedded h5 to the app page, which is the communication between the two ends, you need to quote the sdk, quote it after the index.html body tag, and print out the information to indicate that the call is successful and communication is possible.
<!-- 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>Finally, use the uni.webView.navigateTo method to jump to the internal page of the app.
The project also has a function of copying links, using the uni-app plug-in market https://ext.dcloud.net.cn/plugin?id=1163