同时，uniapp使用秋云uCharts图表组件1，我们的项目是依赖于uniapp的vue-cli项目
操作：将uni_modules目录复制到src目录，即src/uni_modules。
2、直接在页面上调用即可，页面上无需注册组件qiun-data-charts。 注：父元素class='charts-box '样式需要宽度和高度。
view class=' charts-box ' qiun-data-charts type=' column ' : chart data=' chart data '/view 3，图标数据格式，官方文档
chart data : (categories : (2016、2017、2018、2019、2020、series3360 ) name: { name: 粘贴到uni _ modules/qiun-data-charts/js _ SDK/u-charts/config-uchar ts.js将形成每个图表类型的缺省配置，并显示相同图表类型的
二. uniapp使用echarts图形插件
uni-app的echarts图形组件下载： uni-app的echarts图形组件包开箱即用。 -小程序文档资源-CSDN下载
1、下载上述echarts组件并将其放置在项目的src/components目录中，即src/components/uni-ec-canvas。
2、导入使用页面使用，图表配置查看官方文档： Documentation - Apache ECharts
view style='height: 600rpx； 边距-顶部： 30 rpx；' v-if=' caninit ' uni-EC-canvas 3360 on init=' init chart '/viewscriptimportunieccanvasfrom ' @/components/uni-ass e charts.js ' export default { components 3360 { unieccanvas }，data (图表配置包括chart data : { categories : [ ] )， series: [] }控制图表呈现计时，解决异步请求数据重新呈现导致的图表问题canInit: false } }、methods: { //此处显示的图表init charart dpr ) constchart=echarts.init )配置canvas，null，{width33333}的canvas.setchart(chart； console.log(123，this.chartData ) var option={ tooltip : } trigger 3360 ' axis '，是否将tooltip框限制在图表区域内namelocation:'middle '，axis tick : { alignwithlabel 3360 true }， /data3360“漏电流”(data 3360 this.chart data.categories )、Yaxis: ) type: ) value )、legend 3360 )/data3360 返回图表； } }}/script微信小程序端页面效果：
请注意：由于前端要求服务器在渲染图表之前检索数据，因此可能会出现渲染时间问题。
我的解决方案是将v-if=“canInit "添加到包含图表组件的外部view中，并在数据请求成功后通过canInit=true来呈现图表。
如果有错误，请指出来。
被记录在了2021-09-23。