uniapp使用echarts图表问题及解决
根据项目功能需要在app上显示一些统计类的图表，由于使用的是uniapp框架，因此我使用了秋云uCharts图表组件，附上官方地址：https://www.ucharts.cn 在使用的过程中遇到了一些问题，特此记录下来： 问题：在同一页面使用多个echarts图表 由于本人项目是通过vue-cli搭建的项目，ucharts官方内提供了使用帮助以及常见问题，可以参考官方的快速上手： 注意前提条件【版本要求：HBuilderX 3.1.0+】
-
1、纯uniapp项目：组件导入方法：进入DCloud插件市场秋云图表组件页面点击右侧绿色按钮【使用HBuilderX导入插件】，或者蓝色按钮【使用HBuilderX导入示例项目】查看完整示例工程。 2、依赖uniapp的vue-cli项目：请将uni_modules目录复制到src目录，即src/uni_modules。（请升级uniapp依赖为最新版本） 3、页面中直接按下面用法直接调用即可，无需在页面中注册组件qiun-data-charts 4、注意父元素class=charts-box’这个样式需要有宽高
实现一：通过vue使用echarts,在单页面中需要嵌套一组script标签，通过rander.js文件渲染。如下：
问题：当你需要显示几个图表，就写几个echarts 注意：
- 每个图表id不能重复
- prop也不能重复
- updateEcharts 监听 service 层数据变更也最好不重复
- 建议写成组件形式引入，给页面渲染减少负担
实现二：通过秋云ucharts图表组件实现，如下： 我这里用的是echatrs示例，注意ECharts渲染，如果您开启了ECharts渲染，options是需要绑定至eopts上
//template代码
<view class="charts-box">
<qiun-data-charts type="column" :chartData="chartData" :eopts="eopts"/>
</view>
const eopts= {
tooltip: {
trigger: axis
},
legend: {
top: 0,
type: scroll
},
grid: {
left: 3%,
right: 4%,
containLabel: true
},
xAxis: [
{
type: category,
data: [1月, 2月, 3月, 4月, 5月, 6月, 7月, 8月, 9月, 10月, 11月, 12月],
axisPointer: {
type: shadow
},
axisLabel: {
interval: 0
}
}
],
yAxis: [
{
type: value,
axisLabel: {
formatter: {value}
}
}
]
};
export default {
data() {
return {
chartData: {
},
eopts,
};
},
onShow() {
this.getAlarmStatistics();
},
methods: {
// 接口数据
getAlarmStatistics() {
//如不使用uniClinetDB获取数据源，并且需要展示Loading状态，请先清空series，使组件变更为Loading状态，即this.chartData.series=[]即可展示，然后再从服务端获取数据，拼接完成后再传入this.chartData
this.chartData.series = [];
api.getAlarmStatistics().then(res => {
// console.log(res.data.result);
//动态更新图表数据
// 1.先定义个临时变量拼接图表数据
let series = res.data.result;
//2.再把临时数据赋值给chartData， 因组件监听了chartData,所以chartData的初始值应为对象即{}
this.chartData= {
series };
});
},
}
<style>
.charts-box {
width: 100%;
height: 240px;
}
</style>
遇到的问题： 打包后echarts图表不显示问题 现象描述：正常本机测试情况下，echarts图表显示的没问题。但是只要打包后，第一次首页加载没问题，但进入其他tab页面再返回首页时，echarts图表就是显示不出来了，一直处于loading状态，监测控制台也没有任何的错误输出。 于是，就百度了一下网上给出的解决办法，摸索了好久，尝试了很多方法，都还是没有效果，最后回到官网查看了一下常见问题及注意事项才发现动态更新图表数据时，调试接口数据拿到返回值后直接给了chartData，导致了数据一直处于loading状态，图表加载不显示，一开始我还以为是vue页面生命周期触发机制问题，困扰了好久，我也真是无语住了，都想放弃了，就抱着试试的心态又测试了一下竟然成功了
