小程序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的全局變量才行


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM