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

Posted 2021-01-24 小蘑菇123

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的全局变量才行