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

具体代码如下：

从 '../../ec-canvas/echarts' 导入 * 作为 echarts；
var barec = null
页（{
 onShareAppMessage：函数（res）{
  返回 {
   title: 'ECharts可以在微信小程序中使用了！ ',
   路径：'/pages/index/index',
   成功：函数（）{}，
   失败：函数 () { }
  }
 },
 数据： {
  欧共体：{
   onInit：函数（画布，宽度，高度）{
    barec = echarts.init(画布, null, {
     宽度：宽度，
     高度： 高度
    });
    canvas.setChart(barec);
    返回barec；
   }
  }
 },
 onReady() {
  setTimeout(this.getData, 500);
 },
//在getData方法中发送ajax
 获取数据（）{
  wx.showLoading({
   title: '正在加载...',
  })
   wx.请求({
    网址: 'http://192.168.3.81/heart.php',
    牧人：{
     “内容类型”：“json”
    },
    成功：函数（res）{
     控制台.log(res);
     var data = www.sychzs.cn;
     控制台.log(数据);
     barec.setOption({
      网格： {
       左：“3%”，
       右：“7%”，
       底部：“3%”，包含标签：true
      },
      工具提示：{
       // 触发器: '轴',
       显示延迟：0，
       格式化程序：函数（参数）{
        if (params.value.length > 1) {
         返回 params.seriesName + ' :
'
          + params.value[0] + 'm'
          + params.value[1] + 'm';
        }
        别的 {
         返回 params.seriesName + ' :
'
          + 参数名称 + ':'
          + params.value + 'm';
        }
       },
       轴指针：{
        显示：真实，
        类型：'十字'，
        线条样式：{
         类型：'虚线'，
         宽度：1
        }
       }
      },
      传奇： {
       数据：[“学生”]，
       左：“中心”
      },
      x轴：[
       {
        类型：'值'，
        规模：真实，
        轴标签：{
         格式化程序：'{value} m'
        },
        分割线：{
         显示：假
        }
       }
      ],
      y 轴：[
       {
        类型：'值'，
        规模：真实，轴标签：{
         格式化程序：'{value} m'
        },
        分割线：{
         显示：假
        }
       }
      ],
      系列： [{
       姓名：'学生'，
      // 符号大小: 20,
       数据：数据，
       类型：'分散'，
       标记区域：{
        沉默：真实，
        项目样式：{
         普通的： {
          颜色：'透明'，
          边框宽度：1，
          边框类型：'虚线'
         }
        },
        数据： [[{
         名称：“教室”，
         x轴：'0'，
         y 轴：'0'
        }, {
         x轴：'20'，
         y 轴：'20'
        }]]
       },
       标记点：{
        // 数据： [
        // { type: 'max', name: '最大值' },
        // { type: 'min', name: '最小值' }
        //]
       },
       标记线：{
        线条样式：{
         普通的： {
          类型：“固体”
         }
        },
        // 数据： [
        // { 类型: '平均', 名称: '平均' },
        // { x 轴: 160 }
        //]
       }
      }]})
     wx.hideLoading();
    },
    失败：函数（res）{}，
    完整：函数（res）{}，
   })
 }
});

总结

以上是小编介绍的使用ECharts异步加载数据实现图表功能的微信小程序。希望对您有所帮助。如果您有任何疑问，请给我留言，编辑会及时回复您。 。也非常感谢大家对来客网网站的支持！