收藏
回答

小程序运行ec-canvas 使用dataZoom 真机调试很卡

微信使用echarts ec-canvas 区域缩放 真机调试不流畅 很卡


// pages/study/study.js

import * as echarts from '../../ec-canvas/echarts';


function initChart(canvas, width, height) {

const chart = echarts.init(canvas, null, {

width: width,

height: height

});

canvas.setChart(chart);

var option = {

xAxis: {

type: 'category',

data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

},

yAxis: {

type: 'value'

},

dataZoom: [{ // 内置于坐标系中,使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动(触屏上)来缩放或漫游坐标系

type: 'inside',

start: 0,

end: 10

}, {

start: 0,

end: 10, // handleIcon 手柄的 icon 形状,支持路径字符串

handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',

handleSize: '80%', //  控制手柄的尺寸,可以是像素大小,也可以是相对于 dataZoom 组件宽度的百分比,默认跟 dataZoom 宽度相同。

handleStyle: {

color: 'pink',

shadowBlur: 3, // shadowBlur图片阴影模糊值,shadowColor阴影的颜色

shadowColor: 'red',

shadowOffsetX: 2,

shadowOffsetY: 2

}

}],

series: [{

data: [820, 932, 901, 934, 1290, 1330, 1320],

type: 'line'

}]

}

chart.setOption(option);

return chart;

}

Page({


/**

  * 页面的初始数据

  */

data: {

ec: {

onInit: initChart

}

},


/**

  * 生命周期函数--监听页面加载

  */

onLoad: function(options) {


},


/**

  * 生命周期函数--监听页面初次渲染完成

  */

onReady: function() {


},


/**

  * 生命周期函数--监听页面显示

  */

onShow: function() {


},


/**

  * 生命周期函数--监听页面隐藏

  */

onHide: function() {


},


/**

  * 生命周期函数--监听页面卸载

  */

onUnload: function() {


},


/**

  * 页面相关事件处理函数--监听用户下拉动作

  */

onPullDownRefresh: function() {


},


/**

  * 页面上拉触底事件的处理函数

  */

onReachBottom: function() {


},


/**

  * 用户点击右上角分享

  */

onShareAppMessage: function() {


},


})


回答关注问题邀请回答
收藏

3 个回答

  • 愿风忽悠你
    愿风忽悠你
    03-20

    dataZoom的inside设置throttle为0就好了(默认100),这是触发视图刷新的频率

    03-20
    有用
    回复
  • 混世魔女🤔
    混世魔女🤔
    2019-08-01

    请问问题解决了么?

    2019-08-01
    有用
    回复 4
    • DIV
      DIV
      2019-08-01
      没有 准备上传上去再看看
      2019-08-01
      回复
    • One More Step
      One More Step
      2019-11-21
      上传上去之后如何
      2019-11-21
      回复
    • DIV
      DIV
      2019-11-21回复One More Step
      换了其他方式 真机就很卡
      2019-11-21
      回复
    • One More Step
      One More Step
      2019-11-21
      我这边dataZoom上传上去只能滑动一次,再滑就没反应了,你那边换了什么方式,可以正常滑动吗
      2019-11-21
      回复
  • DIV
    DIV
    2019-07-18


    2019-07-18
    有用
    回复
登录 后发表内容