在微信小程序中使用圖表的方法示例

來源：懂視網責編：小采時間：2020-11-27 21:58:11

在微信小程序中使用圖表的方法示例

在微信小程序中使用圖表的方法示例:前言：網上有許多的圖表庫，如：Echarts、Tau Charts、ChartJS等等，具體自行百度。這次我們使用的是：Echarts 官方教程：點擊查看 Echarts下載地址：飛機直達 1.下載好之后，把里面的ec-canvas文件夾復制到項目中，如：在項目中建立一個文件夾compon

推薦度：

點擊下載本文 文檔為doc格式

導讀在微信小程序中使用圖表的方法示例:前言：網上有許多的圖表庫，如：Echarts、Tau Charts、ChartJS等等，具體自行百度。這次我們使用的是：Echarts 官方教程：點擊查看 Echarts下載地址：飛機直達 1.下載好之后，把里面的ec-canvas文件夾復制到項目中，如：在項目中建立一個文件夾compon

前言：網上有許多的圖表庫，如：Echarts、Tau Charts、ChartJS等等，具體自行百度。

這次我們使用的是：Echarts

官方教程：點擊查看

Echarts下載地址：飛機直達

1.下載好之后，把里面的ec-canvas文件夾復制到項目中，如：在項目中建立一個文件夾component ，然后把ec-canvas放到component文件夾里面。

2.在pages中新建一個頁面，我這邊建立了一個echarsDemo頁面，然后在echarsDemo目錄中的index.json文件中引入圖表組件，代碼如下：

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

3.index.wxml代碼 (注意一定要給ec-canvas 設定寬高)

<view class="container">
 <ec-canvas id="mychart-dom-bar" style="width:100%;height:300px;" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

4.index.js代碼

import * as echarts from '../../component/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: 'ECharts 入門示例'
 },
 tooltip: {},
 legend: {
 data: ['銷量']
 },
 xAxis: {
 data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
 },
 yAxis: {},
 series: [{
 name: '銷量',
 type: 'bar',
 data: [5, 20, 36, 10, 10, 20]
 }]
 };
 chart.setOption(option);
 return chart;
}

Page({

 /**
 * 頁面的初始數據
 */
 data: {
 ec:{
 onInit:initChart
 }
 },

 /**
 * 生命周期函數--監聽頁面加載
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函數--監聽頁面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函數--監聽頁面顯示
 */
 onShow: function () {

 },

 /**
 * 生命周期函數--監聽頁面隱藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函數--監聽頁面卸載
 */
 onUnload: function () {

 },

 /**
 * 頁面相關事件處理函數--監聽用戶下拉動作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 頁面上拉觸底事件的處理函數
 */
 onReachBottom: function () {

 },

 /**
 * 用戶點擊右上角分享
 */
 onShareAppMessage: function () {

 }
})

效果圖