小程序 echarts组件 图表 监听点击事件 触摸事件 (组件: uni-ec-canvas)

组件下载:

链接:https://pan.baidu.com/s/1Q43zRCQeauSsOpAknx98Bw
提取码:5vls

有修改了原组件。

调用:

import uniEcCanvas from "@/components/uni-ec-canvas/uni-ec-canvas";

 

tapIndex:点击或者触摸了哪一项,
<uni-ec-canvas
     v-on:tapIndex="tapIndex2"
     class="uni-ec-canvas"
     id="line-chart1"
     canvas-id="multi-charts-line"
     :ec="ec2">
</uni-ec-canvas>

方法

tapIndex2(e) {
   console.log(e);//e是点击
 },

图表初始化  echarts对应属性没变,只是设置渐变无效,这个功能还在修改中

复制代码
ec2: {
                    option: {
                        tooltip: {
                            formatter: '{a} <br/>{b} : {c}%'
                        },
                        toolbox: {
                            feature: {
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        series: [{
                            name: '业务指标',
                            type: 'gauge',
                            detail: {
                                formatter: '{value}%'
                            },
                            data: [{
                                value: 50,
                                name: '完成率'
                            }]
                        }]
                    }
                },
复制代码

 

posted @   凉面好好吃  阅读(2407)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示