WeChat 미니 프로그램에서 전자 차트를 사용하는 방법과 발생할 수 있는 함정, 와서 수집하여 번개를 피하세요! !

이 글에서는 WeChat 미니 프로그램에서 전자 차트를 사용할 때 발생할 수 있는 몇 가지 사용 방법과 문제 요약을 공유하여 함정을 피할 수 있기를 바랍니다.

WeChat 미니 프로그램 사용 방법과 몇 가지 함정이 도움이 되기를 바랍니다.

WeChat 미니 프로그램에서 echarts 사용하기

1. echarts 미니 프로그램 버전을 다운로드합니다

다운로드 주소: https://github.com/ecomfe/echarts-for-weixin

2. 사용 단계

1. 프로젝트 종속성 소개

WeChat 애플릿 버전 echarts를 github에서 이동합니다. 파일에 있는 ec-canvas 파일을 자신의 프로젝트에 복사하세요. 실제로는 echarts의 WeChat 애플릿 버전의 종속 파일입니다.

【관련 학습 추천: Mini 프로그램 개발 튜토리얼】

2. 라이브러리 가져오기

echarts가 사용되는 페이지의 json 파일에 echarts를 도입하고 가져온 경로는 다음에 따라 가져옵니다. 나만의 프로젝트 구조

전역 구성 파일인 app.json에도 도입할 수 있어 모든 페이지에 공통적으로 적용되며, 여러 페이지에서 echart를 사용할 경우 하나씩 소개할 필요가 없습니다. 더 편리하게

echarts를 사용하는 페이지에서 echarts를 js 파일로 가져오며, 가져온 경로는 자신의 프로젝트 구조에 맞게 가져와야 합니다

사용 방법

컴포넌트 id와 canvas-id는 모두 직접 지정할 수 있습니다

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

js 코드

옵션 구성과 관련하여 공식 웹사이트로 이동하여 설명서를 읽거나 예제를 참조하세요. 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. 의존성 및 라이브러리를 도입하고 공식적인 사용 방법에 따라 사용하는 문제에 대해 , echarts 그림이 표시되지 않습니다.

해결 방법: HTML에서 echarts를 사용할 때 외부 레이어에 포함된 뷰 태그의 너비와 높이도 설정해야 합니다. (공식 메소드 스타일은 외부 요소의 너비와 높이를 설정하지 않지만 공식 예제에서는 표시될 수 있으므로 많은 사람들이 오해하고 함정에 빠지게 됩니다.)

2의 역할에 대해. devicePixelRatio

Yes 공식 코드에서 초기 생성된 echart를 보면 아래와 같이 코드가 나와 있습니다. devicePixelRatio를 설정한 후 WeChat 개발자 도구에서 미리 보면 echarts 차트 픽셀이 매우 좋지 않습니다. 예, devicePixelRatio를 제거하면 WeChat 개발자 도구에 표시되는 echarts 차트의 픽셀이 매우 선명해지는 반면, 휴대전화에 표시되는 픽셀은 더 나빠지므로 이는

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오를 방문하세요. !

위 내용은 WeChat 미니 프로그램에서 전자 차트를 사용하는 방법과 발생할 수 있는 함정, 와서 수집하여 번개를 피하세요! !의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!