小程序用uchart或者echart图,Android出现柱状图不能点击滑动的bug
发布于 6 年前 作者 fangdong 14370 次浏览 来自 官方Issues

小程序用uchart或者echart图表,Android手机微信app版本不是最新版的话频繁出现柱状图和其他图不能点击滑动的bug,下拉刷新可以刷新数据,就是图表不能点击,更新微信app最新版后没那么频繁出现但使用时间长点还是会出现柱状图卡死,一会又正常了,已测试过同样的代码百度小程序不会出现这种问题

ps: uniapp开发微信小程序,下面是手机体验版录屏,前面是卡住了点击不了,后面又行了,以上贴的代码是uniapp开发用e-chart

uchart点击卡死状态录屏,页面没有报错:

下面echart框架卡死状态录屏:

下面是echart uniapp 代码:

<template>

  <view class=“container”>

    <uni-echarts

      class=“ec-canvas”

      id=“chart-bar”

      ref=“canvas-bar”

      canvas-id=“chart-bar”

      :ec=“bar”

    ></uni-echarts>

    <uni-echarts

      class=“ec-canvas”

      id=“chart-pie”

      ref=“canvas-pie”

      canvas-id=“chart-pie”

      :ec=“pie”

    ></uni-echarts>

  </view>

</template>

<script>

import uniEcharts from ‘@/components/uni-echarts/uni-echarts’;

export default {

  components: {

    uniEcharts

  },

  data() {

    return {

      bar: {

        lazyload: false,

        option: {

          color: [’#37a2da’, ‘#32c5e9’, ‘#67e0e3’],

          tooltip: {

            trigger: ‘axis’,

            axisPointer: {            // 坐标轴指示器,坐标轴触发有效

              type: ‘shadow’        // 默认为直线,可选为:‘line’ | ‘shadow’

            },

            confine: true

          },

          legend: {

            data: [‘热度’, ‘正面’, ‘负面’]

          },

          grid: {

            left: 20,

            right: 20,

            bottom: 15,

            top: 40,

            containLabel: true

          },

          xAxis: [

            {

              type: ‘value’,

              axisLine: {

                lineStyle: {

                  color: ‘#999’

                }

              },

              axisLabel: {

                color: ‘#666’

              }

            }

          ],

          yAxis: [

            {

              type: ‘category’,

              axisTick: { show: false },

              data: [‘汽车之家’, ‘今日头条’, ‘百度贴吧’, ‘一点资讯’, ‘微信’, ‘微博’, ‘知乎’],

              axisLine: {

                lineStyle: {

                  color: ‘#999’

                }

              },

              axisLabel: {

                color: ‘#666’

              }

            }

          ],

          series: [

            {

              name: ‘热度’,

              type: ‘bar’,

              label: {

                normal: {

                  show: true,

                  position: ‘inside’

                }

              },

              data: [300, 270, 340, 344, 300, 320, 310],

              itemStyle: {

                // emphasis: {

                //   color: ‘#37a2da’

                // }

              }

            },

            {

              name: ‘正面’,

              type: ‘bar’,

              stack: ‘总量’,

              label: {

                normal: {

                  show: true

                }

              },

              data: [120, 102, 141, 174, 190, 250, 220],

              itemStyle: {

                // emphasis: {

                //   color: ‘#32c5e9’

                // }

              }

            },

            {

              name: ‘负面’,

              type: ‘bar’,

              stack: ‘总量’,

              label: {

                normal: {

                  show: true,

                  position: ‘left’

                }

              },

              data: [-20, -32, -21, -34, -90, -130, -110],

              itemStyle: {

                // emphasis: {

                //   color: ‘#67e0e3’

                // }

              }

            }

          ]

        }

      },

      pie: {

        lazyload: false,

        option: {

          backgroundColor: “#ffffff”,

          color: ["#37A2DA", “#32C5E9”, “#67E0E3”, “#91F2DE”, “#FFDB5C”, “#FF9F7F”],

          series: [{

            label: {

              normal: {

                fontSize: 14

              }

            },

            type: ‘pie’,

            center: [‘50%’, ‘50%’],

            radius: [0, ‘60%’],

            data: [{

              value: 55,

              name: ‘北京’

            }, {

              value: 20,

              name: ‘武汉’

            }, {

              value: 10,

              name: ‘杭州’

            }, {

              value: 20,

              name: ‘广州’

            }, {

              value: 38,

              name: ‘上海’

            },

            ],

            itemStyle: {

              emphasis: {

                shadowBlur: 10,

                shadowOffsetX: 0,

                shadowColor: ‘rgba(0, 2, 2, 0.3)’

              }

            }

          }]

        }

      }

    };

  },

  onReady() { }

}

</script>

<style>

.container {

  display: flex;

  flex-direction: column;

}

.ec-canvas {

  width: 750upx;

  height: 750upx;

  display: block;

}

</style>

回到顶部