WeChat 애플릿에 echart 차트를 도입하는 방법

얼마 전 ECharts 팀은 WeChat Mini 프로그램 팀과 협력하여 ECharts WeChat Mini 프로그램에서 Canvas 2D를 지원하는 업데이트를 발표했습니다.

Canvas 2D를 사용하면 WeChat 애플릿 환경의 Canvas를 W3C 표준 Canvas 인터페이스에 더 가깝게 만들 수 있으므로 이전 인터페이스의 일관성 없는 구현으로 인해 발생하는 버그를 해결할 수 있습니다. 또한 Canvas 2D의 동일 레이어 렌더링은 차트와 기타 기본 구성 요소 간의 오버레이 수준 문제를 해결할 수 있습니다.

echarts에 대한 간략한 소개:

상업용 수준의 데이터 차트입니다. 이는 대부분의 브라우저와 호환되는 순수 JavaScript 아이콘 라이브러리입니다. 하단 레이어는 경량 캔버스 클래스 라이브러리 ZRender를 사용하여 직관적이고 생생하며 대화형 기능이 뛰어납니다. 사용자 정의 가능한 데이터 시각화 차트. 혁신적인 드래그 앤 드롭 재계산, 데이터 보기, 값 범위 로밍 및 기타 기능은 사용자 경험을 크게 향상시키고 사용자에게 데이터 마이닝 및 통합 기능을 제공합니다.

텍스트:

준비: 미니 프로그램 개발 환경, ECharts 구성 요소 다운로드, gitHub 주소: https://github.com/ecomfe/echarts-for-weixin

작업 프로세스:

1 ec-canvas를 In에 복사합니다. (루트 디렉터리일 필요는 없으나 나중에 참조할 때 파일 주소 변경에 주의하시기 바랍니다)

2 해당 페이지 json 파일에는

{  
"usingComponents": {    
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

컴포넌트가 소개되어 있습니다. : php 동영상 튜토리얼)

3. 해당 페이지 js 파일

import * as echarts from '../../ec-canvas/echarts';
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    title: {
      text: '测试下面legend的红色区域不应被裁剪',
      left: 'center'
    },
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    legend: {
      data: ['A', 'B', 'C'],
      top: 50,
      left: 'center',
      backgroundColor: 'red',
      z: 100
    },
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: 'A',
      type: 'line',
      smooth: true,
      data: [18, 36, 65, 30, 78, 40, 33]
    }, {
      name: 'B',
      type: 'line',
      smooth: true,
      data: [12, 50, 51, 35, 70, 30, 20]
    }, {
      name: 'C',
      type: 'line',
      smooth: true,
      data: [10, 30, 31, 50, 40, 20, 10]
}]
  };
  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      onInit: initChart
    }
  },
  onReady() {
  }
});

4, wxml 파일

<!--index.wxml-->
<view class="container">
  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}">
  </ec-canvas>
  </view>

5, 페이지 스타일

/**app.wxss**/
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

6, 렌더링

관련 권장 사항: 미니 프로그램 개발 튜토리얼

위 내용은 WeChat 애플릿에 echart 차트를 도입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!