欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

前言:網(wǎng)上有許多的圖表庫,如:Echarts、Tau Charts、ChartJS等等,具體自行百度。

網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)!專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了從化免費建站歡迎大家使用!

這次我們使用的是:Echarts

官方教程:點擊查看

Echarts下載地址:飛機(jī)直達(dá)

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

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

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

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

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

<view class="container">
 <ec-canvas id="mychart-dom-bar"  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);

 //這里復(fù)制了官方示例配置
 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({

 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  ec:{
   onInit:initChart
  }
 },

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

 },

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

 },

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

 },

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

 },

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

 },

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

 },

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

 },

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

 }
})

效果圖

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

總結(jié):因為也是第一接觸Echarts時,遇到了一個小坑,忘記給ec-canvas設(shè)置寬高了,導(dǎo)致頁面空白。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站名稱:在微信小程序中使用圖表的方法示例
文章來源:http://www.chinadenli.net/article10/gpcddo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作網(wǎng)站設(shè)計網(wǎng)站排名手機(jī)網(wǎng)站建設(shè)云服務(wù)器外貿(mào)建站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)