溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

微信小程序中使用ECharts 異步加載數(shù)據(jù)實(shí)現(xiàn)圖表功能

發(fā)布時(shí)間：2020-10-12 10:51:21 來(lái)源：腳本之家 閱讀：203 作者：陪伴才是最長(zhǎng)情的告白* 欄目：web開(kāi)發(fā)

具體代碼如下所示：

<view class="container">
 <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
import * as echarts from '../../ec-canvas/echarts';
var barec = null
Page({
 onShareAppMessage: function (res) {
  return {
   title: 'ECharts 可以在微信小程序中使用啦！',
   path: '/pages/index/index',
   success: function () { },
   fail: function () { }
  }
 },
 data: {
  ec: {
   onInit: function (canvas, width, height) {
    barec = echarts.init(canvas, null, {
     width: width,
     height: height
    });
    canvas.setChart(barec);
    return barec;
   }
  }
 },
 onReady() {
  setTimeout(this.getData, 500);
 },
//getData方法里發(fā)送ajax
 getData(){
  wx.showLoading({
   title: '加載中...',
  })
   wx.request({
    url: 'http://192.168.3.81/heart.php',
    herder:{
     "content-type":"json"
    },
    success:function(res){
     console.log(res);
     var data = res.data.info;
     console.log(data);
     barec.setOption({
      grid: {
       left: '3%',
       right: '7%',
       bottom: '3%',
       containLabel: true
      },
      tooltip: {
       // trigger: 'axis',
       showDelay: 0,
       formatter: function (params) {
        if (params.value.length > 1) {
         return params.seriesName + ' :<br/>'
          + params.value[0] + 'm '
          + params.value[1] + 'm ';
        }
        else {
         return params.seriesName + ' :<br/>'
          + params.name + ' : '
          + params.value + 'm ';
        }
       },
       axisPointer: {
        show: true,
        type: 'cross',
        lineStyle: {
         type: 'dashed',
         width: 1
        }
       }
      },
      legend: {
       data: ["學(xué)生"],
       left: 'center'
      },
      xAxis: [
       {
        type: 'value',
        scale: true,
        axisLabel: {
         formatter: '{value} m'
        },
        splitLine: {
         show: false
        }
       }
      ],
      yAxis: [
       {
        type: 'value',
        scale: true,
        axisLabel: {
         formatter: '{value} m'
        },
        splitLine: {
         show: false
        }
       }
      ],
      series: [{
       name: '學(xué)生',
      // symbolSize: 20,
       data:data,
       type: 'scatter',
       markArea: {
        silent: true,
        itemStyle: {
         normal: {
          color: 'transparent',
          borderWidth: 1,
          borderType: 'dashed'
         }
        },
        data: [[{
         name: '教室',
         xAxis: '0',
         yAxis: '0'
        }, {
         xAxis: '20',
         yAxis: '20'
        }]]
       },
       markPoint: {
        // data: [
        //  { type: 'max', name: '最大值' },
        //  { type: 'min', name: '最小值' }
        // ]
       },
       markLine: {
        lineStyle: {
         normal: {
          type: 'solid'
         }
        },
        // data: [
        //  { type: 'average', name: '平均值' },
        //  { xAxis: 160 }
        // ]
       }
      }]
     })
     wx.hideLoading(); 
    },
    fail: function (res) { },
    complete: function (res) { },
   })
 }
});

總結(jié)

以上所述是小編給大家介紹的微信小程序中使用ECharts 異步加載數(shù)據(jù)實(shí)現(xiàn)圖表功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手