收藏
回答

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

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug ec-canvas 客户端 7.0.5 2.7.7

- 当前 Bug 的表现(可附上截图)


- 预期表现


- 复现路径


- 提供一个最简复现 Demo

// 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() {


},


})


// 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() { }, })
回答关注问题邀请回答
收藏

1 个回答

  • 灵芝
    灵芝
    2019-07-18

    请勿重复发帖,此重复帖隐藏,感谢配合

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