|
关于不能放大和缩放问题（小程序）
实测是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
},
})
|