uniapp echarts在app端显示空白

插件下载地址：https://ext.dcloud.net.cn/plugin?id=6983

 

 我这里使用  npm install echarts --save 安装比较慢，采用了下面方法：

1.将插件下载下来；

2. 将node_modules文件夹和package.json文件夹复制到项目根目录下；

package.json文件：

 3.引用并使用：

 

<view class="content">
        <view class="data-item">
            <view class="head-title">水质数据统计查看</view>
            <view class="tab-list">
                <view class="list-item"
                    :class="{'active':waterIndex==0?true:false}"
                    @click="setWaterIndex(0)"
                >日报表</view>
                <view class="list-item"
                    :class="{'active':waterIndex==1?true:false}"
                    @click="setWaterIndex(1)"
                >周报表</view>
                <view class="list-item"
                    :class="{'active':waterIndex==2?true:false}"
                    @click="setWaterIndex(2)"
                >月报表</view>
            </view>
            <!--  #ifdef MP-WEIXIN -->
            <view class="chart-wrap">
                <echarts ref="echarts" :option="option" canvasId="echarts" class="echarts-wrap"></echarts>
            </view>
            <!-- #endif -->
            <!-- #ifdef APP-PLUS || H5 -->
            <view class="chart-wrap">
                <yh-echarts :option="option" style="height: 400rpx;"></yh-echarts>
            </view>
            <!-- #endif -->
        </view>
    </view>

<script>
    // #ifdef MP-WEIXIN
    import myEcharts from '@/components/echarts-uniapp/echarts-uniapp.vue';
    // #endif
    
    // #ifdef APP-PLUS || H5
    import yhEcharts from '../../components/yh-echarts.vue'
    import * as echarts from 'echarts';
    // #endif 
    export default {
        data() {
            return {
                waterIndex:0,
                option:{},
                option1: '',
            }
        },
        components:{
            // #ifdef MP-WEIXIN
            "echarts":myEcharts,
            // #endif
            // #ifdef APP-PLUS || H5
            yhEcharts
            // #endif 
        },
        onLoad() {
            this.option = {
                  tooltip: {
                    trigger: 'axis'
                  },
                  legend: {
                    data: ['温度(℃)', 'PH值', '余氯(mg/L)', '浊度', '尿素',"orp(mv)"]
                  },
                  grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                  },
                  toolbox: {
                    feature: {
                      saveAsImage: {}
                    }
                  },
                  xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: [
                    {
                      name: '温度(℃)',
                      type: 'line',
                      stack: 'Total',
                      data: [120, 132, 101, 134, 90, 230, 210,100]
                    },
                    {
                      name: 'PH值',
                      type: 'line',
                      stack: 'Total',
                      data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                      name: '余氯(mg/L)',
                      type: 'line',
                      stack: 'Total',
                      data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                      name: '浊度',
                      type: 'line',
                      stack: 'Total',
                      data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                      name: '尿素',
                      type: 'line',
                      stack: 'Total',
                      data: [820, 932, 901, 934, 1290, 1330, 1320]
                    },
                    {
                      name: 'orp(mv)',
                      type: 'line',
                      stack: 'Total',
                      data: [100 ,,30, 280, 634, 1210, 1320, 990]
                    }
                  ]
                };
                
        },
        methods: {
            setWaterIndex(index){
                this.waterIndex = index;
            },
        }
    }
</script>

.data-item{
        width:694rpx;
        padding:0 28rpx;
        background:#fff;
        border-bottom:30rpx solid #f4f4f4;
        .chart-wrap{
            width:634rpx;
            height:350rpx;
            padding:30rpx;
            background:#fff;
            border-radius:20rpx;
            margin:0 auto;
            .echarts-wrap{
                width: 634rpx;
                height: 350rpx;
            }
        }
        
        .tab-list{
            width: 508rpx;
            height: 60rpx;
            background: #FFFFFF;
            border: 1px solid #1AA7FF;
            border-radius: 30rpx;
            display:flex;
            margin:0 auto 50rpx;
            overflow:hidden;
            .list-item{
                flex:1;
                line-height:60rpx;
                text-align:center;
                color:$themeColor;
            }
            .active{
                background:$themeColor;
                color:#fff;
            }
        }
        .head-title{
            font-size: 32rpx;
            font-weight: bold;
            padding:40rpx 0;
        }
    }
    page{
        font-size: 28rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        background:#f4f4f4;
    }