關于微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問題

更新時間：2022年07月18日 16:05:16 作者：smallWhite_js

這篇文章主要介紹了微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

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文件中配置

{
  "component": true,
  "usingComponents": {
    "ec-canvas": "../../../ec-canvas/ec-canvas"
  }
}

在需要使用的wxml和wxss中寫好容器的樣式代碼

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

最后在js文件中引用并編寫圖例代碼及數(shù)據(jù)即可

import * as echarts from '../../../ec-canvas/echarts'

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  var option = {
    barWidth: 20,
    grid:{
      x:40,    //圖例左邊距
      y:30,    //圖例上邊距
      x2:25,   //圖例右邊距
      y2:20,   //圖例下邊距
  },
    xAxis: {
      type: 'category',
      data: ['1','2','3','5','6','7','8'],  //x軸數(shù)據(jù)
      axisLabel: {
        interval: 0,
        textStyle: {
          show:true,
          fontSize: '9',
        },
    },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        textStyle: {
          show:true,
          fontSize: '10',
        },
    },
    },
    series: [
      //柱形圖
      {
        data: [10,20,30,40,50,60,70],
        type: 'bar',
        color: 'rgb(0, 153, 255)',
      },
      //線型圖
      {
        data: [15,25,35,45,55,65,75],
        type: 'line',
        color: 'rgb(255, 136, 0)',
        itemStyle: {
          normal: {
            label: {
              show: true, //開啟顯示
              position: 'top', //在上方顯示
              textStyle: { //數(shù)值樣式
                color: 'black',
                fontSize: '9'
              }
            }
          }
        },
      }
    ]
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    },
    canvasIsShow: true, //圖表是否渲染
  },
})

2、圖例重新渲染方法

使用后，如果需要讓圖例隨數(shù)據(jù)變化而變化或者重新渲染，可直接使用

wx:if="{{ }}"來進行條件渲染，即可做到重新刷新3、圖例圖層太高，可能會導致部分樣式被遮擋，如下圖情況：

給被遮擋標簽加入position:fixed;z-index:9999后，在模擬器中顯示正常，但在真機上這個問題依舊存在，把被遮擋的<view>改為<cover-view>就可以解決問題，如下圖

但是在<cover-view>標簽里，無法使用<input>或者<picker>等標簽，那可以投機取巧靈活使用

<picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">
      <cover-view class="epidemic-header">
        <cover-view class="cover-input">
        {{casArray[casIndex]}}
        </cover-view>
      </cover-view>
    </picker>

這樣就可以修改<cover-view>里的顯示內(nèi)容啦

到此這篇關于微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問題的文章就介紹到這了,更多相關微信小程序echarts內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: