首頁  >  文章  >  微信小程式  >  微信小程式中echarts的用法和可能遇見的坑,快來收藏避雷! !

微信小程式中echarts的用法和可能遇見的坑,快來收藏避雷! !

青灯夜游
青灯夜游轉載
2021-09-23 19:40:364195瀏覽

這篇文章跟大家分享一些微信小程式中使用echarts的使用方法和問題總結,讓大家可避坑踩雷,希望能夠給大家提供幫助!

微信小程式中echarts的用法和可能遇見的坑,快來收藏避雷! !

微信小程式的使用方法和一些避雷踩坑的問題,希望能夠給大家提供幫助

微信小程式中使用echarts

一、下載小程式版的echarts

#下載網址:https://github.com/ecomfe/echarts- for-weixin

二、使用步驟

#1.引進專案依賴

微信小程式中echarts的用法和可能遇見的坑,快來收藏避雷! !

微信小程式中echarts的用法和可能遇見的坑,快來收藏避雷! !

微信小程式中echarts的用法和可能遇見的坑,快來收藏避雷! !

將微信小程式版echarts 從github 上拉下來後,將檔案裡的ec-canvas 檔案複製一個到自己專案裡,實際上就是微信小程式版echarts 的依賴檔案。

【相關學習推薦:

小程式開發教學

#2.介紹庫

#在使用的echarts 的頁面的json 檔案中引入echarts ,引入的路徑根據自己的專案結構來引入

在全域設定檔app.json 裡引入也可以,這樣就全部頁面通用,不用一個個頁面引入,當多個頁面使用echarts 時,比較方便

微信小程式中echarts的用法和可能遇見的坑,快來收藏避雷! !

#在使用的echarts 的頁面的js 檔案中引入echarts ,引入的路徑根據自己的專案結構來引入

使用方法

微信小程式中echarts的用法和可能遇見的坑,快來收藏避雷! !

wxml中使用元件, id 和canvas-id 都可以自行命名

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
js 程式碼

###關於option 配置,可自行去官網看文件或參考範例,https://echarts.apache.org /zh/option.html#title######
import * as echarts from &#39;../../ec-canvas/echarts&#39;;

const app = getApp();

function initChart(canvas, width, height, dpr) {
  //主要是这个 echarts 的创建
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  
  // option 的配置可以根据自己的需求去 echarts 官网查看配置的属性方法
  var option = {
    backgroundColor: "#ffffff",
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: &#39;pie&#39;,
      center: [&#39;50%&#39;, &#39;50%&#39;],
      radius: [&#39;20%&#39;, &#39;40%&#39;],
      data: [{
        value: 55,
        name: &#39;北京&#39;
      }, {
        value: 20,
        name: &#39;武汉&#39;
      }, {
        value: 10,
        name: &#39;杭州&#39;
      }, {
        value: 20,
        name: &#39;广州&#39;
      }, {
        value: 38,
        name: &#39;上海&#39;
      }]
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() {
  }
});
###css 程式碼###
.container{
  width: 100%;
  height: 100vw;
}
ec-canvas {
  width: 100%;
  height: 100%;
}
######避坑踩雷#########1、關於引入依賴,引入庫,依照官方的使用方法使用後,echarts 圖不顯示的問題######解決方法:html在使用echarts 時,外層包裹著的view 標籤也要設定寬高 (官方的方法樣式裡沒有設定外層元素的寬高,在官方的範例中又可以顯示,這就誤導了很多人會掉坑)###############2 、關於###devicePixelRatio### 的作用######可以看到官方程式碼裡初始創建echarts 時,程式碼如下圖,當你設定了devicePixelRatio 後,echarts的圖表在微信開發者工具中看到的echarts 圖表像素是很差的,用手機預覽的時候,是很清晰的,當把devicePixelRatio 去掉後,微信開發者工具中看到的echarts 圖表像素變得很清晰,手機看到的是像素變差了,所以這個應該是根據設備的像素單位來適應圖表的像素吧###############更多編程相關知識,請訪問:###編程視頻### ! ! ###

以上是微信小程式中echarts的用法和可能遇見的坑,快來收藏避雷! !的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除