Artikel ini akan berkongsi dengan anda beberapa kaedah penggunaan dan ringkasan masalah menggunakan echarts dalam program mini WeChat, supaya anda boleh mengelakkan perangkap saya harap ia dapat membantu anda!

Cara menggunakan program mini WeChat dan beberapa masalah, saya harap ia dapat membantu anda

Menggunakan echarts dalam program mini WeChat

1 Muat turun versi program mini echarts

Alamat muat turun: https://github.com/ecomfe/echarts- untuk -weixin

2 Langkah untuk menggunakan

1 >Selepas menarik ecarta versi applet WeChat daripada github, salin fail ec-canvas dalam fail ke projek anda sendiri, ia sebenarnya adalah fail kebergantungan bagi ecarta versi applet WeChat.

Tutorial Pembangunan Program Mini

2. Import perpustakaan

Perkenalkan echart dalam fail json halaman tempat echarts digunakan. Laluan yang diimport diimport mengikut struktur projek anda sendiri

Anda juga boleh memperkenalkannya dalam apl fail konfigurasi global .json, supaya semuanya selesai Halaman adalah universal dan tidak perlu diperkenalkan satu demi satu Apabila beberapa halaman menggunakan echarts, ia lebih mudah

Kaedah penggunaan

Gunakan komponen dalam wxml, Kedua-dua id dan canvas-id boleh dinamakan sendiri

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

kod css

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() {
  }
});

Mengelakkan perangkap dan terpijak guruh

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

1 . Berkenaan masalah memperkenalkan kebergantungan dan perpustakaan, dan menggunakannya mengikut kaedah penggunaan rasmi, gambar echarts bukanlah. dipaparkan Penyelesaian: Apabila menggunakan echarts dalam HTML, lebar dan tinggi teg paparan yang dibalut dalam lapisan luar juga mesti ditetapkan. (Gaya kaedah rasmi tidak menetapkan lebar dan ketinggian elemen luar, tetapi ia boleh dipaparkan dalam contoh rasmi, yang mengelirukan ramai orang dan membawa kepada perangkap)

devicePixelRatio

Anda boleh melihat bahawa apabila echarts pada mulanya dibuat dalam kod rasmi, kod adalah seperti yang ditunjukkan di bawah selepas anda menetapkan devicePixelRatio, carta bagi echarts boleh dilihat dalam alat pembangun WeChat Piksel carta echarts sangat lemah Apabila dipratonton pada telefon mudah alih, ia sangat jelas Selepas mengalih keluar devicePixelRatio, piksel carta echarts yang dilihat dalam alat pembangun WeChat menjadi sangat. jelas, tetapi piksel yang dilihat pada telefon mudah alih adalah lemah , jadi ini harus disesuaikan dengan piksel carta mengikut unit piksel peranti

Video Pengaturcaraan ! !

Atas ialah kandungan terperinci Cara menggunakan echarts dalam program mini WeChat dan masalah yang mungkin anda hadapi, datang dan kumpulkan untuk mengelakkan kilat! !. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!