echarts 放大与缩放的功能

本文介绍了在ECharts小程序版本5.4.x和5.3.x中遇到的图表无法双指放大缩小的问题,并提供了解决方案。问题根源在于ECharts版本,切换到5.1.2版本即可恢复此功能。同时,文章还展示了如何配置tooltip去除文字阴影,以及如何启用dataZoom组件实现图表缩放。对于地图缩放,可以通过设置`roam: true`实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

关于不能放大和缩放问题(小程序)

实测是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: {//滚轮缩放的极限控制
},

小程序 echarts图表开发基础篇(一)

小程序 echarts图表开发项目篇(二)

小程序 echarts进阶篇(三),减少echarts的体积

小程序 echarts进阶篇(四),手指缩放与放大

在使用Echarts开发图表时,可以通过添加dataZoom组件来实现图表的放大缩小功能。根据引用和引用的内容,我们可以通过配置dataZoom的相关参数来实现放大缩小功能。具体来说,可以使用type为'slider'的dataZoom组件来实现鼠标滑块的方式进行图表的缩放操作,通过设置xAxisIndex和yAxisIndex来指定对哪个轴进行缩放。同时,也可以使用type为'inside'的dataZoom组件来实现鼠标滚轮的方式进行图表的缩放操作。zoomOnMouseWheel参数可以设置鼠标滚轮触发缩放的方式,例如'alt'表示按住alt键并滚动鼠标滚轮进行缩放。通过调整dataZoom的start和end参数来控制缩放的范围。这样,就可以在Echarts图表中实现放大缩小功能了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue.js+Echarts开发图表放大缩小功能实例](https://download.csdn.net/download/weixin_38663443/12969946)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [echarts缩放](https://blog.csdn.net/darkCloudss/article/details/109046513)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [echart报表缩放](https://blog.csdn.net/tang05709/article/details/104966710)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

余温无痕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值