使用uni-ec-canvas組件時(shí)刁赦，一定要設(shè)置：force-use-old-canvas的值為true娶聘，不然就是各種大坑。以滑動(dòng)不了首當(dāng)其沖甚脉。

巨坑：force-use-old-canvas的值為true 發(fā)布線上一定要?jiǎng)h除丸升。不然會(huì)有tooltip無(wú)法展示，畫(huà)面失真等的情況牺氨。

設(shè)置完之后狡耻，canvas的層級(jí)過(guò)高，會(huì)出現(xiàn)懸浮在各個(gè)組件之上的情況猴凹，如果有自定義navbar也無(wú)法覆蓋夷狰。
此時(shí)需要把uni-ec-canvas使用在scroll-view里，就解決問(wèn)題了郊霎。
注：開(kāi)發(fā)者工具與真機(jī)時(shí)常有不一樣的效果沼头。
代碼：

<scroll-view class="order-scroll-view" :scroll-y="true" :style="{'height':winHeight+'px'}" :show-scrollbar="false"> 
    <view class="card-all">
      <!-- 故障占比 -->
      <view class="card-class">
        <view class="title">故障占比</view>
        <view class="container">
          <view class="flex jend">
            <view v-for="(item,index) in selectList" :key="index" @click="getOne(item.value,item.val)" :class="{'selectOneClass': item.value===selectOne}">{{item.name}}</view>
          </view>
          <view id="repairOneId">
            <uni-ec-canvas
              :force-use-old-canvas="true"
              class="uni-ec-canvas"
              id="pie-chart"
              canvas-id="repair-chart-one-id"
              :ec="repairChartOne"
            ></uni-ec-canvas>
          </view>
        </view>
      </view>
      <!-- 報(bào)修趨勢(shì) -->
      <view class="card-class">
        <view class="title">報(bào)修趨勢(shì)</view>
        <view class="container">
          <view class="flex jend">
            <view v-for="(item,index) in selectList" :key="index" @click="getTwo(item.value,item.val)" :class="{'selectOneClass': item.value===selectTwo}">{{item.name}}</view>
          </view>
          <view>
            <uni-ec-canvas
              :force-use-old-canvas="true"
              class="uni-ec-canvas"
              id="line-chart"
              canvas-id="repair-chart-two-id"
              :ec="repairChartTwo"
            ></uni-ec-canvas>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
...
  data() {
    return {
      repairChartTwo: {
        option: {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [{
            type: 'category',
              axisLine: { //坐標(biāo)軸軸線相關(guān)設(shè)置。數(shù)學(xué)上的x軸
              show: true,
              lineStyle: {
                color: '#aaaaaa'
              },
            },
            axisLabel: { //坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置
              interval: 0,
              textStyle: {
                color: '#666666',
                margin: 15,
              },
              rotate:30,
            },
            axisTick: {
              show: false,
            },
            boundaryGap: false,
            data: [],
          }],
          yAxis: [{
            type: 'value',
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          }],
          grid: {
            left: '50',
            bottom: '50'
          },
          series: [{
            name: '維修工單',
            type: 'line',
            smooth: false,
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 4,
            label: {
              show: false,
              position: 'top',
              textStyle: {
                color: '#555555',
              }
            },
            itemStyle: {
              color: "rgba(236,201,157, 0.6)",
              borderColor: "#fff",
              borderWidth: 2,
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: 'linear',
                  colorStops: [{
                    offset: 0,
                    color: '#ff5200' // 0% 處的顏色
                  }, {
                    offset: 1,
                    color: '#ffbf00' // 100% 處的顏色
                  }],
                  globalCoord: false // 缺省為 false
                },              
                shadowColor: 'rgba(236,201,157, 0.6)',
                shadowBlur: 5,
                shadowOffsetY: 3,
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(236, 169, 44, 1)',
                    },{
                      offset: 1,
                      color: 'rgba(236, 169, 44,0)',
                    },
                  ],
                  false
                ),
              },
            },
            data: []
            }
          ]
        }
      },
      selectOne: 'seven',
      selectTwo: 'seven',
      repairChartOne: {
        option: {
          tooltip: {
            trigger: 'item'
          },
          grid:{
            left:'0',
            right:'0',
            top:'8%',
            bottom:'8%'
          },
          series: [
            {
              type: 'pie',
              radius: ['32%', '65%'], 
              hoverOffset: 0,
              color: ['#0987f3','#1856a3','#ff7c69','#f0c4bb','#f69821'],
              data: [],
              label: {
                formatter: '{a|书劝：}{b|l2eqni7%}',
                rich: {
                  a: {
                    padding: [0, 0, 0, 10]
                  },
                  b: {
                    padding: [0, 5, 0, 0]
                  }
                }
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
            },
            {
              type: 'pie',
              hoverAnimation: false,
              color: 'rgba(255, 255, 255, .5)',
              radius: '40%',
              tooltip: {
                show: false
              },
              label: {
                show: false,
                position: 'center'
              },
              data: [
                {
                  value: 100
                }
              ]
            }
          ]
        }
      },
      selectList: [
        {
          value: 'seven',
          name: '7日',
          val: '7'
        },{
          value: 'month',
          name: '本月',
          val: '月'
        },{
          value: 'all',
          name: '全部',
          val: '全部'
        }
      ],
    };
  },