微信小程序使用echarts图表,真机调试不显示。

755 阅读1分钟

代码如下:

  1. WXML代码:

<view class="echart_panel"> <ec-canvas ec="{{ ecLine }}"></ec-canvas> </view>

  1. Css代码: .echart_panel { margin: 0 auto; width: 90%; height: 300px; }

  2. JS代码: 在Page外面声明一个全局变量

let chartLine;

在Page.data中声明变量

        ecLine: {
                 lazyLoad: true // 懒加载
        }

在onLoad中创建实例: 代码:

 onLoad() {
        this.setData({
            ecLine: {
                onInit: (canvas, width, height) => {
                    chartLine = echarts.init(canvas, null, {
                        width: width,
                        height: height
                    });
                    canvas.setChart(chartLine);
                    var option = this.getOption(['总数','在线','未激活'], [27,5,15]);
                    chartLine.setOption(option);
                }
            }
        })
    },
     getOption(xData, data_cur) {
        var option = {
            // backgroundColor: "#f5f4f3",
            color: ["#37A2DA", "#f2960d", "#67E0E3", "#9FE6B8"],
            title: {
                text: '历史在线数量',
                textStyle: {
                    fontWeight: '500',
                    fontSize: 15,
                    color: '#000'
                },
                x: 'center',
                y: '0'
            },
            grid: {
                top: '15%',
                left: '0%',
                right: '0%',
                bottom: '60rpx',
                containLabel: true
            },
            tooltip: {
                show: true,
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: xData || [],
            },
            yAxis: {
                x: 'center',
                name: '台',
                type: 'value'
            },
            series: [{
                zIndex: 2,
                type: 'bar',
                smooth: true,
                symbolSize: 0,
                data: data_cur || []
            }]
        };
        return option;
    },
  1. 如果动态更改数据:
         var option = this.getOption(['总数','在线','未激活'], [27,5,15]);
       setTimeout(()=>{
        chartLine.setOption(option);
       },500)      

记得使用定时器 不然会报错 setOption is undefind。

  1. 然后你会发现真机调试不显示,解决方案发布体验版本即可,因为小程序真机测试不可以使用canvas。 记得在开发管理开发设置里添加合法域名,如果还是报错要清楚缓存,以及HTTPS的校验。