zoukankan      html  css  js  c++  java
  • 小程序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,
            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的全局变量才行

  • 相关阅读:
    纯CSS3实现不错的表单验证效果
    CANVAS模仿龙卷风特效
    HTML+CSS画一朵向日葵
    canvas水波纹效果
    樱花的季节,教大家用canvas画出飞舞的樱花树
    网站SEO,HTTP请求的关键数字----6
    css3绘制腾讯logo
    关于js的parseInt方式在不同浏览器下的表现
    封装keyframes插件
    模仿jquery的fileupload插件
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/10063327.html
Copyright © 2011-2022 走看看