微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题

javascript 文章 2022-07-20 10:08 547 0 全屏看文

AI助手支持GPT4.0

1、微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减少文件大小占比,也可以下载以前旧版本文件比较小的应付使用

下载echarts: https://echarts.apache.org/zh/download.html

定制下载:https://echarts.apache.org/zh/builder.html

旧版本查看: https://archive.apache.org/dist/echarts/

下载好后,在使用页面的json文件中配置

1 {2   "component": true,3   "usingComponents": {4     "ec-canvas": "../../../ec-canvas/ec-canvas"5   }6 }

在需要使用的wxml和wxss中写好容器的样式代码

1 <view class="echarts1" >2     <view wx:if="{{canvasIsShow}}" class="container" style="width: 100%; height: 100%;">3           <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>4     </view>5   </view>

最后在js文件中引用并编写图例代码及数据即可

 1 import * as echarts from '../../../ec-canvas/echarts' 2  3 function initChart(canvas, width, height, dpr) { 4   const chart = echarts.init(canvas, null, { 5     width: width, 6     height: height, 7     devicePixelRatio: dpr // 像素 8   }); 9   canvas.setChart(chart);10 11   var option = {12     barWidth: 20,13     grid:{14       x:40,    //图例左边距15       y:30,    //图例上边距16       x2:25,   //图例右边距17       y2:20,   //图例下边距18   },19     xAxis: {20       type: 'category',21       data: ['1','2','3','5','6','7','8'],  //x轴数据22       axisLabel: {23         interval: 0,  24         textStyle: {25           show:true,26           fontSize: '9',27         }, 28     },29     },30     yAxis: {31       type: 'value',32       axisLabel: {33         textStyle: {34           show:true,35           fontSize: '10',36         }, 37     },38     },39     series: [40       //柱形图41       {42         data: [10,20,30,40,50,60,70],43         type: 'bar',44         color: 'rgb(0, 153, 255)',45       },46       //线型图47       {48         data: [15,25,35,45,55,65,75],49         type: 'line',50         color: 'rgb(255, 136, 0)',51         itemStyle: {52           normal: {53             label: {54  show: true, //开启显示55  position: 'top', //在上方显示56  textStyle: { //数值样式57    color: 'black',58    fontSize: '9'59  }60             }61           }62         },63       }64     ]65   };66   chart.setOption(option);67   return chart;68 }69 70 Page({71   data: {72     ec: {73       onInit: initChart74     },75     canvasIsShow: true, //图表是否渲染76   },77 })

2、图例重新渲染方法

使用后,如果需要让图例随数据变化而变化或者重新渲染,可直接使用

wx:if="{{ }}"
来进行条件渲染,即可做到重新刷新
3、图例图层太高,可能会导致部分样式被遮挡,如下图情况:

 给被遮挡标签加入position: fixed;z-index: 9999后,在模拟器中显示正常,但在真机上这个问题依旧存在,把被遮挡的<view>改为<cover-view>就可以解决问题,如下图

 但是在<cover-view>标签里,无法使用<input>或者<picker>等标签,那可以投机取巧灵活使用

1 <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">2       <cover-view class="epidemic-header">3         <cover-view class="cover-input">4         {{casArray[casIndex]}}5         </cover-view>6       </cover-view>7     </picker>

这样就可以修改<cover-view>里的显示内容啦

-EOF-

AI助手支持GPT4.0