So führen Sie ein Echart-Diagramm in das WeChat-Applet ein

Vor nicht allzu langer Zeit hat das ECharts-Team mit dem Team des WeChat Mini-Programms zusammengearbeitet, um ein Update zur Unterstützung von Canvas 2D im ECharts WeChat Mini-Programm anzukündigen.

Durch die Verwendung von Canvas 2D kann Canvas in der WeChat-Applet-Umgebung näher an die W3C-Standard-Canvas-Schnittstelle herangeführt werden, wodurch Fehler behoben werden, die durch die inkonsistente Implementierung der vorherigen Schnittstelle verursacht wurden. Darüber hinaus kann das Rendering auf derselben Ebene von Canvas 2D das Problem der Überlagerungsebenen zwischen Diagrammen und anderen nativen Komponenten lösen.

Eine kurze Einführung in Echarts:

Datendiagramme in kommerzieller Qualität. Es handelt sich um eine reine JavaScript-Symbolbibliothek, die mit den meisten Browsern kompatibel ist und auf der leichten Canvas-Klassenbibliothek ZRender unten basiert, um eine intuitive, lebendige und interaktive Bereitstellung zu ermöglichen. Hochgradig anpassbare Datenvisualisierungsdiagramme. Innovative Drag-and-Drop-Neuberechnungen, Datenansichten, Wertebereichs-Roaming und andere Funktionen verbessern das Benutzererlebnis erheblich und geben Benutzern die Möglichkeit, Daten zu extrahieren und zu integrieren.

Text:

Vorbereitung: Mini-Programmentwicklungsumgebung, ECharts-Komponenten herunterladen, GitHub-Adresse: https://github.com/ecomfe/echarts-for-weixin

Betriebsprozess:

1. Kopieren Sie ec-canvas nach In das Projekt (es muss nicht das Stammverzeichnis sein, aber wenn Sie später darauf verweisen, achten Sie bitte darauf, die Dateiadresse zu ändern)

2 Die entsprechende Seiten-JSON-Datei stellt die Komponente vor

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

(kostenloses Video-Tutorial : php-Video-Tutorial)

3. Entsprechende Seiten-JS-Datei

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-Datei

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

5, Seitenstil

/**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, Renderings

Verwandte Empfehlungen: Mini Program Development Tu Torial

Das obige ist der detaillierte Inhalt vonSo führen Sie ein Echart-Diagramm in das WeChat-Applet ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!