RaymondHe
丢蕾老谋
2020-08-31 17:57
采纳率: 66.7%
浏览 152

Echarts官网实例(散点图:Life Expectancy and GDP)在微信小程序里如何实现?

最近有个需求需要把echarts做到小程序中展示。需要用到的模板是:散点图:Life Expectancy and GDP。

该模板的官方链接和代码在:https://echarts.apache.org/examples/zh/editor.html?c=scatter-life-expectancy-timeline

我已经把对应的json数据放到变量“list_data”里面了。但是我不知道如何结合官方代码 让它能读取到这个数据。官方的数据读取代码应该是在这一行,即
$.get(ROOT_PATH ......

这行代码应该需要修改,但是怎么修改呢?小白表示看不懂这一行,这个get function都不在这一页,不知道内在逻辑,不知道如何修改。麻烦大佬们指点指点,谢谢。官网的代码是在网页端运行的,和小程序框架不大一样,感觉麻烦一些。

(注:直接替换json文件地址参数:ROOT_PATH + '/data/asset/data/life-expectancy.json' 成joson绝对地址或相对地址 是不可行的,已经验证)

部分官方js代码如下(也可以在上面的链接里看):

$.get(ROOT_PATH + '/data/asset/data/life-expectancy.json', function (data) {
    myChart.hideLoading();

    var itemStyle = {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    };

我目前的报错是:$ is not defined

页面一直在卡在loading界面:
图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • kingwolf_JavaScript
    浴火_凤凰 2020-08-31 18:39
    已采纳

    $一般认为是jQuery的定义 先引入jQuery的JS
    然后再使用上面的代码

    wx.request({
    url:ROOT_PATH + '/data/asset/data/life-expectancy.json',
    data:data,
    header:{
    // "Content-Type":"application/json"
    },
    success:function(res){
    myChart.hideLoading();

    var itemStyle = {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    };
            console.log(res.data);
        },
        fail:function(err){
            console.log(err)
        }
    
    })
    
    点赞 评论
  • caozhy

    看这个 微信小程序中使用echarts
    https://www.jianshu.com/p/b95f2d8eb107

    点赞 评论

相关推荐