WeChat ミニ プログラムでの echart の使用方法と考えられる落とし穴、落雷を避けるために、echart を集めに来てください。 ！

この記事では、落とし穴や雷雨を回避できるように、WeChat ミニ プログラムで echart を使用するいくつかの方法と問題の概要を紹介します。

WeChat ミニ プログラムの使用方法といくつかの落とし穴、お役に立てれば幸いです

WeChat ミニ プログラムでの echart の使用

1. echarts のミニ プログラム バージョンをダウンロードします。

ダウンロード アドレス: https://github.com/ecomfe/echarts- -weixin

#2. 手順を使用します

##1. プロジェクトの依存関係を導入します ##Github から WeChat アプレット バージョンの echarts を取得した後、ファイル内の ec-canvas ファイルを自分のプロジェクトにコピーします (実際には、WeChat アプレット バージョンの echarts の依存関係ファイルです)。

[関連する学習の推奨事項:

小プログラム開発チュートリアル

]

2. ライブラリをインポートします

echarts を使用するページの json ファイルに echarts を導入します。インポートされたパスは、独自のプロジェクト構造に従ってインポートされます。

グローバル設定ファイル アプリに導入することもできます。 json を使用して、すべてがecharts を使用して、ページの js ファイルに echarts をインポートします。インポートされたパスは、独自のプロジェクト構造に従ってインポートされます。

使用方法

wxml でコンポーネント を使用します。id と Canvas-id は両方とも自分で名前を付けることができます

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

js code

オプションの設定については、次の場所にアクセスできます。公式 Web サイトでドキュメントを読むか、例を参照してください。 https://echarts.apache.org /zh/option.html#title

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

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: 'pie',
      center: ['50%', '50%'],
      radius: ['20%', '40%'],
      data: [{
        value: 55,
        name: '北京'
      }, {
        value: 20,
        name: '武汉'
      }, {
        value: 10,
        name: '杭州'
      }, {
        value: 20,
        name: '广州'
      }, {
        value: 38,
        name: '上海'
      }]
    }]
  };

  chart.setOption(option);
  return chart;
}

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

  onReady() {
  }
});

css code

.container{
  width: 100%;
  height: 100vw;
}
ec-canvas {
  width: 100%;
  height: 100%;
}

落とし穴を避けて雷を踏む

1. 依存関係の導入について、Libraryを導入し、公式の使い方に従って使用したところ、echartsの画像が表示されない問題

#解決策: HTML で echart を使用する場合、外側のレイヤーでラップされたビュー タグの幅と高さも設定する必要があります。 (公式のメソッドスタイルでは外側要素の幅と高さを設定していませんが、公式の例では表示できます。これは多くの人を誤解させ、罠につながります)

2、devicePixelRatioの役割について

公式コードで最初にechartsを作成したときのコードは以下のとおりであることがわかります。 echarts のピクセルは WeChat 開発者ツールで確認できます echarts チャートのピクセルは非常に貧弱です。携帯電話でプレビューすると、非常に鮮明です。devicePixelRatio を削除すると、WeChat 開発者ツールで表示される echarts チャートのピクセルは次のようになります。非常に鮮明ですが、携帯電話で表示されるピクセルは貧弱です。そのため、デバイスのピクセル単位に従って、これをチャートのピクセルに適合させる必要があります

プログラミング関連の知識については、

プログラミング ビデオ

をご覧ください。 ！

以上がWeChat ミニ プログラムでの echart の使用方法と考えられる落とし穴、落雷を避けるために、echart を集めに来てください。 ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。