微信小程序使用echarts以及tooltip功能

谁践踏了优雅 2022-08-29 15:52 933阅读 0赞

const app = getApp()
    import * as echarts from '../../components/ec-canvas/echarts';
     
    let chart = null;
    let data = { 
        xData: [],
        yData: []
    }
    
    function setOption() { 
        var option = { 
            color: ["#00C8C8"],
            grid: { 
                containLabel: true
            },
            tooltip: { 
                show: true,
                trigger: 'axis',
                position: function(point, params, dom, rect, size){ 
                    let x = point[0],
                        y = point[1],
                        viewWidth = size.viewSize[0],
                        boxWidth = size.contentSize[0],
                        posX = 0;
                    if(x + boxWidth > viewWidth){ 
                        posX = x - boxWidth;    
                    }else{ 
                        posX = x; 
                    }
                    return [posX,y];
                },
                label: { 
                    normal: { 
                        show: true
                    }
                },
                axisPointer: { 
                   lineStyle: { 
                        type: 'dashed',
                        color: '#00C8C8'
                    },
                },
                formatter: '{b0}: {c0}人'
            },
            xAxis: { 
                type: 'category',
                boundaryGap: false,
                axisTick: { 
                    show: false
                },
                axisLine: { 
                    lineStyle: { 
                        color: '#5A6684'
                    }
                },
                data: data.xData,
            },
            yAxis: { 
                x: 'center',
                type: 'value',
                splitLine: { 
                    lineStyle: { 
                        type: 'solid'
                    }
                },
                axisTick: { 
                    show: false
                },
                axisLine: { 
                    lineStyle: { 
                        color: '#5A6684'
                    }
                },
            },
            series: [{ 
                name: '',
                type: 'line',
                smooth: false,
    
                data: data.yData
            }]
        };
        chart.setOption(option);
    }
    Page({ 
        data: { 
            shop_info: wx.getStorageSync('shopInfo'),
            chart_data: '',
            chart_width: 375,
            chart_height: 600,
            real_time_chart_day: '',
            rank_data: '',
            update_time: '',
            ec: { 
                lazyLoad: true    // 延迟加载
            },
            ec_charts: ''
        },
        onLoad: function (options) { 
    
            let that = this
            wx.getSystemInfo({ 
                success (res) { 
                    that.setData({ 
                        chart_width: res.screenWidth * 2
                    })
                }
            })
            // 获取echarts组件
            this.ec_charts = this.selectComponent('#mychart')
            this.getFlowData();
        },
        getFlowData(){ 
            app.Util.molliAjax(
                app.Api.real_time_flow_trend
                .replace(/{mall_id}/g, wx.getStorageSync('shopInfo').mall_id)
                .replace(/{shop_id}/g, wx.getStorageSync('shopInfo').id),
                { }, 'GET')
                .then((res) => { 
                    data.xData = res.data.time_trend
                    data.yData = res.data.customer_count
                    this.init()
                    console.log(data)
                })
        },
        // 初始化图表，第一次加载时必须有这一步，但后面如果数据发生改变，只改变 setOption() 函数就可刷新图表，因为图表的属性参数等都在其中控制
        init() { 
            this.ec_charts.init((canvas, width, height) => { 
                // 在这里初始化图表
                chart = echarts.init(canvas, null, { 
                    width: width,
                    height: height
                });
                setOption(chart);
                // 注意这里一定要返回 chart 实例，否则会影响事件处理等
                return chart;
            })
        },
    })

{
      "usingComponents": {
          "ec-canvas": "../../components/ec-canvas/ec-canvas"
      }
    }

<view class="data_charts">
            <view class="sub_title">xxxxx</view>
            <ec-canvas 
                id="mychart" 
                canvas-id="mychart-line" 
                ec="{ {ec}}" 
                width="{ {chart_width}}" 
                height="{ {chart_height}}" 
                data="{ {chart_data}}"
                bindmytooltip="myTooltip">
            </ec-canvas>
        </view>

先附上所有代码

1.小程序使用echarts  
将echarts从github上down下来之后，放进组建文件夹中，然后在页面js开头引入。  
当时踩了一个坑，如果按照官方文档的方法，异步掉接口之后获取数据时，是无法使用tooltip功能的，所以并没有采用官方的方法，而已使用了echarts本来的init方法。

this.ec_charts = this.selectComponent('#mychart');

这一步当时要了我的命，怎么的都有个报错，后来看了一个大哥的解释才知道，这玩意儿得放在onLoad里面，才不会有报错。

2.tooltip功能实现  
tooltip自定义功能暂时没有研究出来，如果按照正常的formatter：function的话，会直接返回字符串，似乎并不支持这个功能，所以这里使用了原生的tooltip。  
同时这里也有一个问题，那就是tooltip并不支持自动识别是否超出canvas绘图区域，所以需要自己判断，实际上这部分和web端已经没有区别了。

position: function(point, params, dom, rect, size){ 
                    let x = point[0],
                        y = point[1],
                        viewWidth = size.viewSize[0],
                        boxWidth = size.contentSize[0],
                        posX = 0;
                    if(x + boxWidth > viewWidth){ 
                        posX = x - boxWidth;    
                    }else{ 
                        posX = x; 
                    }
                    return [posX,y];
                },

发表评论取消回复

表情：

评论列表（有 0 条评论，933人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序——Echarts使用（保姆式教程）

一、Echarts 简介二、小程序中引入 Echarts1、下载echarts插件2、定制图形，生成 echarts.min.js 文件3、替换 echarts.js 文...

川长思鸟来/ 2024年04月29日 19:13/ 0 赞/ 84 阅读

相关【微信小程序】小程序功能开发

![在这里插入图片描述][5c1311f37b4f4d35bc8b87d24d718292.jpeg_pic_center] 文章目录 1. 用户登录

快来打我*/ 2024年04月01日 09:16/ 0 赞/ 151 阅读

相关微信小程序 - 定位功能

（1）查看微信小程序文档 ![1149706-20190705163818472-567622913.png][] ![1149706-201907051638264

╰半夏微凉°/ 2023年08月17日 16:01/ 0 赞/ 223 阅读

相关微信小程序使用Echarts全步骤

-------------------- 要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) ----

傷城~/ 2023年05月31日 03:06/ 0 赞/ 28 阅读

相关微信小程序复制功能

wx.setClipboardData({ data: 'data', success (res) { wx.getClip

╰半橙微兮°/ 2022年12月25日 03:00/ 0 赞/ 319 阅读

相关微信小程序地图功能

一，显示地图 <map id="map" longitude="{ {longitude}}" latitude="{ {latitude

Dear 丶/ 2022年12月20日 02:55/ 0 赞/ 256 阅读

相关微信小程序授权功能

思路： 1.首先获取授权，看看到底有没有这个授权，如果有，那么就不再进行再次请求，如果没有，那么再次请求或者其他的业务逻辑。 2.查看授权信息接口：wx.getSett

男娘i/ 2022年10月23日 08:26/ 0 赞/ 422 阅读

相关微信小程序使用echarts以及tooltip功能

const app = getApp() import as echarts from '../../components/ec-canvas/echarts

谁践踏了优雅/ 2022年08月29日 15:52/ 0 赞/ 934 阅读

相关微信小程序使用键盘搜索功能

记录下。 1、name=‘search’;//search内容随便写 2、bindconfirm='shop_search_function'；//这个变量是

柔情只为你懂/ 2021年12月15日 16:29/ 0 赞/ 461 阅读

相关微信小程序中使用Echarts统计图

效果图 ![在这里插入图片描述][20201105103346917.gif_pic_left] 注意：ec-canvas 一定要在 wxss 文件里设置宽和

旧城等待，/ 2021年09月02日 09:50/ 0 赞/ 1327 阅读