小程序echarts数据不改变,或者是一次渲染成功,第二次进入,渲染失败的解决办法

1、引入echarts插件:

  import * as echarts from '../../ec-canvas/echarts';

2、data中定义:
  ecBar: {
    onInit: initChart
  },
3、app.js中定义全局变量:
  globalData: {
    userInfo: null,
    all_date: []
  },
4、onload中,定义一个  all_date ,用来接收数据
5、循环出来的数据,赋值:app.globalData.all_date = all_date
6、在 value 中赋值:
function initChart(canvas, width, height) {
    const chart = echarts.init(canvas, null, {
        width: width,
        height: height
    });
    canvas.setChart(chart);

    var option = {
        backgroundColor: "#ffffff",
        color: ["#37A2DA", "#FF9F7F"],
        tooltip: {},
        xAxis: {
            show: false
        },
        yAxis: {
            show: false
        },
        radar: {
            indicator: [{
                name: '10米折返跑',
                max: 5
            },
            {
                name: '立定跳远',
                max: 5
            },
            {
                name: '网球掷远',
                max: 5
            },
            {
                name: '走平衡木',
                max: 5
            },
            {
                name: '坐位体前屈',
                max: 5
            },
            {
                name: '双脚连续跳',
                max: 5
            }
            ]
        },
        series: [{
            name: '',
            type: 'radar',
            itemStyle: {
                normal: {
                    areaStyle: {
                        type: 'default'
                    }
                }
            },
            data: [{
                value: app.globalData.all_date,
                name: ''
            }]
        }]
    };

    chart.setOption(option);
    return chart;
}

7、在 wxml  调用:<ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ecBar }}"></ec-canvas>

总体来说,设置单页的全局变量,不能改变小程序图表的二次渲染,要设置成app.js的全局变量才行

posted @ 2018-12-04 12:01  小蘑菇123  阅读(5169)  评论(1编辑  收藏  举报