微信小程序中使用ECharts异步加载数据实现图表功能

具体代码如下所示:

为青铜峡等地区用户提供了全套网页设计制作服务,及青铜峡网站建设行业解决方案。主营业务为网站设计制作、网站建设、青铜峡网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!


 
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方法里发送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 + ' :
' + params.value[0] + 'm ' + params.value[1] + 'm '; } else { return params.seriesName + ' :
' + params.name + ' : ' + params.value + 'm '; } }, axisPointer: { show: true, type: 'cross', lineStyle: { type: 'dashed', width: 1 } } }, legend: { data: ["学生"], 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: '学生', // 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) { }, }) } });

总结

以上所述是小编给大家介绍的微信小程序中使用ECharts 异步加载数据实现图表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


文章名称:微信小程序中使用ECharts异步加载数据实现图表功能
文章路径:http://ybzwz.com/article/pgppgg.html