Maison > Article > Applet WeChat > Apprenez à utiliser les graphiques echarts dans les mini-programmes WeChat
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.
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>
<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>
<view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view>复制代码<.>
<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;">'#mychart-dom-bar1'</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;">'x1000'</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>
Recommandations d'apprentissage associées :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!