关于不能放大和缩放问题(小程序)
实测是echarts版本的问题,5.4.x,5.3.x都有问题,当我选择用5.1.2版本就可以双指放大缩小了!
tooltip文字有黑色阴影的设置tooltip.shadowBlur = 0
tooltip: {
show: true,
trigger: 'axis',
shadowBlur: 0, // 去除文字阴影
backgroundColor: 'rgba(0,0,0,0.4)',
textStyle: {
color: '#fff'
},
},
echarts版本:v5.4.0,如果自定义构建的话一定要记得勾选”缩放组件-dataZoom“
import * as echarts from '../../ec-canvas/echarts';
var chartThree;
// 内置型数据区域缩放组件(dataZoomInside):内置于坐标系中,使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动(触屏上)来缩放或漫游坐标系。
// 滑动条型数据区域缩放组件(dataZoomSlider):有单独的滑动条,用户在滑动条上进行缩放或漫游。
function getOption(titles, xData, legendDatta, series, top) {
var option = {
title: {
text: titles,
left: 'center'
},
tooltip: {
show: true,
trigger: 'axis',
shadowBlur: 0, // 去除文字阴影
backgroundColor: 'rgba(0,0,0,0.4)',
textStyle: {
color: '#fff'
},
},
dataZoom: {
type: 'inside'
},
grid: {
top: top || '15%',
left: '0%',
right: '1%',
bottom: '30rpx',
containLabel: true
},
legend: { // 显示图例组件
show: legendDatta ? true : false,
data: legendDatta,
bottom: '0',
z: 100
},
xAxis: {
type: 'category',
boundaryGap: true,
axisTick: {
show: false, // 不显示坐标轴刻度线
},
data: xData,
},
yAxis: {
x: 'center',
type: 'value',
name: '元',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: series
};
return option;
}
Page({
data: {
ecThree: null,
},
// result:接收后台请求返回的数据,在请求哪个方法中自己组装下格式
getPublicCanvas(result) {
let series = [],
name_arrs = [],
xData = [];
result[0].market_item.map(sub => {
let dates = sub.date.split('-')
xData.push(`${dates[1]}-${dates[2]}`)
})
result.map(item => {
name_arrs.push(item.level_name)
series.push({
name: item.level_name,
type: 'line',
smooth: true, // 曲线
data: item.price_arrs
})
})
let option = getOption('', xData, name_arrs, series, '10%');
this.getThirty(option)
},
// 渲染30天
getThirty(option) {
let ecThree = {
onInit: function (canvas, width, height, dpr) {
chartThree = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chartThree);
chartThree.setOption(option);
return chartThree;
}
}
this.setData({
ecThree,
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
this.setData({
ecThree: null,
})
chartThree = null
},
})
<view class="two-echarts">
<ec-canvas id="mychart-three" canvas-id="mychart3" ec="{{ ecThree }}" wx:if="{{ ecThree }}"></ec-canvas>
</view>
wxss:
.two-echarts {
padding: 28rpx;
width: 100%;
height: 700rpx;
}
如果是地图的放大与缩放,这个字段设置为roam: true
geo: {
map: "china",
// 开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
roam: true,
zoom: 1.1,
scaleLimit: {//滚轮缩放的极限控制
},