Learn how to use echarts charts in WeChat mini programs

Preface

Data statistics is our For frequently used functions, we generally use them more on the PC side. Most of them are used for statistical data analysis in the management system. Recently, we have encountered the same demand when making WeChat mini programs. We collect data statistics on the mini program side. Displayed in the form of a chart, record your own configuration and usage process here.

Preparation

First of all, Baidu’s echarts does not provide a mini program version, find it here A packaged warehouse applet version of echarts that can be used on WeChat. Download the latest package through this link. After decompression, there is a ec-canvas folder that contains the encapsulated components. Place them in the component folder directory of the mini program for use. use.

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

Use

1. Configure on the page you need to use The chart component is introduced in the file

<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. We created a component:

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

3. Where ec is an object we define in index.js, which enables the chart to be initialized and set after the page is loaded. The structure of index.js is as follows:

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