ネイティブ WeChat アプレットで echart を使用する

现在越来越多的项目都在使用可视化的功能，那么使用 echarts 实现是一种不错的选择，本文将带给大家如何在原生微信小程序中使用 echarts，保姆级教程

1. WeChat アプレットバージョンの echarts ファイルをダウンロードします。

文件地址：https://github.com/ecomfe/echarts-for-weixin/tree/master

画像-20230513135005534

2. eチャートの導入

1. WeChat アプレットプロジェクトを作成するか、既存の WeChat アプレットプロジェクトを開きます。次の例では、新しい作成方法を採用しています。コンピューターファイル内に空のフォルダーを作成し、自分で名前を付けます。

画像-20230513135033888

2. 作成した空のファイルにダウンロードしたechartsファイルを入れます

画像-20230513135050827

3. WeChat 開発者ツールを使用して、作成したフォルダーを開きます

4. 作成結果を確認する

画像-20230513135148225

3. 使用上の注意事項

1. app.wxss ファイルを見つけて、コンテナーのデフォルトコードをコメントまたはクリアする必要があります。そうしないと、後続のコンテナーがコンテナークラス名を使用しません。

画像-20230513135308220

2. 新しいプロジェクトの場合は、デフォルトで生成されるページファイルを削除できます

画像-20230513135240466

3. app.json ファイルのページ構成オプションを変更します。

画像-20230513135332271

画像-20230513135347259

4 番目に、プロジェクトで echarts ファイルを使用します

1. ページの json ファイルに echarts.js ファイルを導入します

{
	"usingComponents":{
		// 引入目录以自己当前项目的路径为准，省略后缀.js
		"ec-canvas":"../../ec-canvas/ec-canvas" 
	}
}

2. dom 構造を作成し、ページの wxml ファイルで使用します。

<!-- 创建容器-此区域用于展示图表 -->
<view class="container">
  <!-- 使用 ec-canvas 组件，此处的命名为引入组件路径前面的定义 key 键的名字 -->
  <!-- 需要设置 id canvas-id ec 三个属性 -->
  <!-- id canvas-id ec名称可以自己定义，符合命名规范即可 -->
  <ec-canvas id="myChart" canvas-id="myChart" ec="{
   
   {ec}}"></ec-canvas>
</view>

3. ページの wxss ファイルでコンテナのサイズとスタイルを定義します。

/* 定义容器大小 */
.container{
  width: 100%;
  height: 500rpx;
  background-color: bisque;
}

/* ec-canvas 组件宽高与父元素一致即可 */
ec-canvas{
  width: 100%;
  height: 500rpx;
}

4. このうち、ec は、index.js で定義したオブジェクトで、ページが読み込まれた後にチャートを初期化して設定できるようにし、ページの js ファイルで echarts を使用します。

// 引入 echarts 文件
import * as echarts from '../../ec-canvas/echarts';

// 定义 initChart 方法
// initChart 需要传递四个参数 canvas, width, height, dpr
function initChart(canvas, width, height, dpr) {
  // 使用引入的 echarts的init方法对 chart 变量赋值进行初始化
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });

  canvas.setChart(chart);
	
  // 此为配置项。配置图表展现样式与数据
  var option = {};

  chart.setOption(option);

  return chart;
}

Page({
  data: {
    // 此处的ec名称与wxml结构中命名保持一致
    ec: {
      // 使用 onInit 方法定义
      onInit: initChart
    }
  }
});

5. この時点では、オプション構成項目はまだ空です。その後、それを構成し、echarts 公式 Web サイトに入り、例 https://echarts.apache.org/examples/zh/index.html を入力します。

6. 必要なグラフを選択し、クリックして入力します。この例では、デモンストレーションとして縦棒グラフを使用しています。

画像-20230513135841873

7. 設定項目のコピー

画像-20230513141932932

8. コピーした設定項目をコードのオプション設定項目に入れます

// 引入 echarts 文件
import * as echarts from '../../ec-canvas/echarts';

// 定义 initChart 方法
// initChart 需要传递四个参数 canvas, width, height, dpr
function initChart(canvas, width, height, dpr) {
  // 使用引入的 echarts的init方法对 chart 变量赋值进行初始化
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });

  canvas.setChart(chart);

  var option =  {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  }

  chart.setOption(option);

  return chart;
}

Page({
  data: {
    // 此处的ec名称与wxml结构中命名保持一致
    ec: {
      // 使用 onInit 方法定义
      onInit: initChart
    }
  }
});

9. チャートが表示されるようになります。他のチャートを置き換える必要がある場合は、オプションの設定項目を置き換えることができます

画像-20230513142136286

V. 結論

以上就是 echarts 在小程序中基本的使用方法，如果需要自己定义图表的样式可以参考文档进行个性化的定制：https://echarts.apache.org/zh/option.html
就可以展示出图表，如果需要更换其他图表更换 option 的配置项即可

[外链图片转存中...(img-2TXBNgcO-1683960179758)]

## 五、结语

上記はアプレットでの echarts の基本的な使用方法ですが、チャートのスタイルを自分で定義する必要がある場合は、カスタマイズ用のドキュメントを参照してください: https://echarts.apache.org/zh/option.html