Apprenez à utiliser les graphiques echarts dans les mini-programmes WeChat

Avant-propos

Les statistiques de données, c'est nous Pour les fonctions fréquemment utilisées, nous les utilisons généralement davantage côté PC. La plupart d'entre elles sont utilisées dans l'analyse des données statistiques dans le système de gestion. Récemment, nous avons rencontré la même demande lors de la création de mini-programmes WeChat. du côté du mini programme Affiché sous forme de graphique, enregistrez ici votre propre processus de configuration et d'utilisation.

Préparation

Tout d'abord, les echarts de Baidu ne fournissent pas de version mini programme , trouvez-le ici Une version applet d'entrepôt packagée d'echarts qui peut être utilisée sur WeChat Téléchargez le dernier package via ce lien. Après la décompression, il existe un dossier ec-canvas qui contient les composants encapsulés. Placez-les dans le répertoire du dossier des composants du mini programme à utiliser. utiliser.

<span style="display: block; background: url(https://my-wechat.mdnice.com/point.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #282c34; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs copyable" style="overflow-x: auto; padding: 16px; color: #abb2bf; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #282c34; border-radius: 5px;">├── ec-canvas<br/>│   ├── ec-canvas.js<br/>│   ├── ec-canvas.json<br/>│   ├── ec-canvas.wxml<br/>│   ├── ec-canvas.wxss<br/>│   ├── echarts.min.js<br/>│   └── wx-canvas.js<br/><span class="copy-code-btn">复制代码</span></code>

Utilisez

1. pour configurer sur la page que vous besoin d'utiliser Le composant graphique est introduit dans le fichier

<span style="display: block; background: url(https://my-wechat.mdnice.com/point.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #282c34; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs copyable" style="overflow-x: auto; padding: 16px; color: #abb2bf; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #282c34; border-radius: 5px;"><span class="hljs-string" style="color: #98c379; line-height: 26px;">"usingComponents"</span>: {<br/>    <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">"ec-canvas"</span>: <span class="hljs-string" style="color: #98c379; line-height: 26px;">"../../ec-canvas/ec-canvas"</span><br/>  }<br/><span class="copy-code-btn">复制代码</span></code>

2. index.wxml Nous avons créé un composant :

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

3. Où ec est un objet que nous définissons dans index.js, qui permet d'initialiser et de définir le graphique après le chargement de la page. La structure d'index.js est la suivante :

<span style="display: block; background: url(https://my-wechat.mdnice.com/point.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #282c34; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs copyable" style="overflow-x: auto; padding: 16px; color: #abb2bf; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #282c34; border-radius: 5px;">Page({<br/>  <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">data</span>: {<br/>    <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">ec</span>: {<br/>      <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">onInit</span>: initChart<br/>    }<br/>  },<br/>  onLoad(){<br/>      <span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">// 在需要的地方获取dom</span><br/>      <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">this</span>.echartsComponnet1 = <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">this</span>.selectComponent(<span class="hljs-string" style="color: #98c379; line-height: 26px;">&#39;#mychart-dom-bar1&#39;</span>)<br/>      <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">this</span>.init_echarts1({ <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">value</span>: res.data.rotateSpeed || <span class="hljs-number" style="color: #d19a66; line-height: 26px;">0</span>, <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">name</span>: <span class="hljs-string" style="color: #98c379; line-height: 26px;">&#39;x1000&#39;</span> })<br/>  }<br/>  <span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">// 初始化</span><br/>    init_echarts1 (data) {<br/>      <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">this</span>.echartsComponnet1.init(<span class="hljs-function" style="line-height: 26px;">(<span class="hljs-params" style="line-height: 26px;">canvas, width, height</span>) =></span> {<br/>        <span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">// 初始化图表</span><br/>        <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">const</span> chart = echarts.init(canvas, <span class="hljs-literal" style="color: #56b6c2; line-height: 26px;">null</span>, {<br/>          <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">width</span>: width,<br/>          <span class="hljs-attr" style="color: #d19a66; line-height: 26px;">height</span>: height<br/>        })<br/>        <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">this</span>.chart = chart<br/>        <span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">// setGaugeChartOption1获取到基础配置</span><br/>        chart.setOption(setGaugeChartOption1(data))<br/>        <span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">// 注意这里一定要返回 chart 实例，否则会影响事件处理等</span><br/>        <span class="hljs-keyword" style="color: #c678dd; line-height: 26px;">return</span> chart<br/>      })<br/>    },<br/>});<br/><span class="copy-code-btn">复制代码</span></code>

Copier après la connexion