原生微信小程序使用u-charts(组件版)折线图示例

这篇具有很好参考价值的文章主要介绍了原生微信小程序使用u-charts(组件版)折线图示例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、写在前面

        之前一直使用的都是 wx-charts,链接: xiaolin3303/wx-charts: 微信小程序图表charts组件 ,但是这个库已经五六年没有维护了,经常出现 canvas层级过高弹窗无法覆盖等问题(微信小程序前面新推出了 canvas-2d,解决了这个问题)

        摸索了官网文档一个下午,今天来介绍以下 u-charts 的组件版的基本使用,官网 uCharts官网 - 秋云uCharts跨平台图表库,下面这些tab可能会帮助到你

原生微信小程序使用u-charts(组件版)折线图示例

 

二、下载组件

源码地址:uCharts: 高性能跨平台图表库 微信小程序 (gitee.com)

点进去找到 “微信小程序”原生微信小程序使用u-charts(组件版)折线图示例

选择组件版 (原生版也可以,但是需要自己创造实例,比较麻烦,我折腾了几个小时后 换成了组件版发现快多了)

原生微信小程序使用u-charts(组件版)折线图示例

点进去,把src下的文件全部拷贝下来 (可以把整个仓库下载为zip,再找到这里面,就可以一键复制了)

原生微信小程序使用u-charts(组件版)折线图示例

 在微信小程序根目录下 新建一个文件夹 components

然后再在components下新建一个文件夹,取名 qiun-wx-ucharts

把上面src里面的所有文件,都复制粘贴到 qiun-wx-ucharts 里

原生微信小程序使用u-charts(组件版)折线图示例

 至此,就可以直接使用了

三、基本使用

在需要使用图表的页面(假设页面为 test.wxml )

1.test.json 引入组件

{
  "usingComponents": {
    "qiun-wx-ucharts": "/components/qiun-wx-ucharts/index"
  }
}

 2.test.wxml 放置组件

<view class="table">
  <qiun-wx-ucharts type="line" opts="{{opts}}" chartData="{{chartData}}" canvas2d="{{true}}" canvasId="myChart" />
</view>

3.test.wxss 设置组件宽高

这是必须配置的css,组件会自动获取css的宽高,来给canvas设置宽度 (下面的 .table 是组件的父元素的类名)

  .table {
    width: 100%;
    height: 300px;
  }

4.test.js 配置数据

折线的数据目前是写死的,你可以根据你的需要,去更新 this.data.chartData ,图表会自动重绘

// pages/chart/chart.js
Page({

  /**
   * 页面的初始数据
   */
  data:{
    chartData: {},//数据里包含了 categories x轴数组,series 需要绘制的曲线数组
    opts: {//配置项,这里只展示了部分,关于配置项的详细解释可以到官网文档查看
     color: ["#1890FF", "#91CB74"],
     enableScroll: false,//是否开启滚动
     dataLabel: false,
     xAxis: {
       disableGrid: true,//是否 不纵向绘制网格
       type: 'grid',
       gridType: 'dash',
       scrollBackgroundColor: '#00000000',//默认为 #EFEBEF
       scrollColor: '#DEE7F7',//默认为 #A6A6A6
       rotateLabel: true,//开启文字旋转功能
     },
     yAxis: {
       gridType: "dash",
       dashLength: 2,
     },
     extra: {
       line: {
         type: "curve",
         width: 2,
         activeType: "hollow"
       }
     }
   },
 },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let data = { // 数据里包含了 categories x轴数组,series 需要绘制的曲线数组
      categories: ["2016","2017","2018","2019","2020","2021"],
      series: [
        {
          name: "目标值",
          data: [35,36,31,33,13,34]
        },
        {
          name: "完成量",
          data: [18,27,21,24,6,28]
        }
      ]
    };
    //只要给 chartData 修改了值,就会触发图表的重新绘制
    this.setData({
      chartData : JSON.parse(JSON.stringify(data)) //深拷贝数据,防止出现问题
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

5.效果示例

原生微信小程序使用u-charts(组件版)折线图示例

点击后可以查看数据点 原生微信小程序使用u-charts(组件版)折线图示例

 

四、进阶用法

1.开启滚动

当数据量很多的时候,折线的点就会堆积在一起,很不美观

原生微信小程序使用u-charts(组件版)折线图示例

我们可以开启滚动模式,设置一屏幕展示多少个数据项,就可以更美观了

(1)在js文件的data中修改以下配置项:

 opts.enableScroll 改为 true,开启滚动模式 必须填写

opts.xAxis.itemCount 设置为“一屏幕想展示的数据量” Number 必须填写

(2)在wxml文件中

 给组件props新增一个 ontouch="true"  这一点官网文档没写明,我试了很久才发现要这个东西,才能滚动

(3)代码

js文件中修改opts:

//在上文js代码中,修改 data里的opts 

opts: {//配置项,这里只展示了部分,关于配置项的详细解释可以到官网文档查看
      color: ["#1890FF", "#91CB74"],

      enableScroll: true,//是否开启滚动 ————滚动需要的配置

      xAxis: {
        disableGrid: true,//是否 不纵向绘制网格
        type: 'grid',
        gridType: 'dash',

        itemCount: 10,//x轴单屏显示数据的数量,默认为5个 ————滚动需要的配置

        scrollBackgroundColor: '#00000000',//默认为 #EFEBEF
        scrollColor: '#DEE7F7',//默认为 #A6A6A6
        rotateLabel: true,//开启文字旋转功能
      },
      yAxis: {
        gridType: "dash",
        dashLength: 2,
      },
      extra: {
        line: {
          type: "curve",
          width: 2,
          activeType: "hollow"
        }
      }
    },

wxml里新增一个props传递 ontouch 

<view class="table">
  <qiun-wx-ucharts type="line" opts="{{opts}}" chartData="{{chartData}}" canvas2d="{{true}}" canvasId="myChart" ontouch />
</view>

效果

原生微信小程序使用u-charts(组件版)折线图示例向右滑动 原生微信小程序使用u-charts(组件版)折线图示例

关于滚动还有一些其他配置项,详情到官网文档查看

注意:开启滚动后,在微信小程序开发者工具观看会有异常,但是实际是没问题的,请扫码观看 

2.点击后获取数据索引 (获取当前点击的数据)

getIndex 官网文档

原生微信小程序使用u-charts(组件版)折线图示例

 

这个在官网文档的示例全是 uniapp 的,找不到微信小程序的,连问答区都没人问这个问题。

涉及知识点:给自定义组件传递自定义事件

上面文档中 @getIndex 这种有 @ 符的是uniapp的写法,在微信小程序中并不适合

然而又不想使用原生的创建实例的方法,只想用组件形式(我们现在讲的是组件方法,原生方法是 引入 u-charts.js 文件后,new一个uCharts实例出来操作,比较复杂)

其实很简单,给小程序自定义组件传递自定义事件,只需要 bind:xxx="xxxx"  

我们需要传递 getIndex 这个自定义事件,就写   bind:getIndex="touchcanvas" (其中touchcanvas是在当前页面绑定的函数,getIndex是自定义事件的名称)

<view class="table">
  <qiun-wx-ucharts type="line" opts="{{opts}}" chartData="{{chartData}}" canvas2d="{{true}}" canvasId="myChart" ontouch bind:getIndex="touchcanvas" />
</view>

然后在js文件里,写 touchcanvas 函数,通过e就能获取数据的索引号了

  //图表点击操作
  touchcanvas(e) {
    let index = e.detail.currentIndex.index //这个就是数组的索引
    
    let arr = [ 
        //....
    ]; //假设这里面装了图表正在展示的数据
    //就能通过 arr[index] 获取当前点击的数据
    console.log(index, arr[index] )
  },

五、最后

        这篇文章只讲述了折线图的基本使用方法,更多配置项建议阅读官方文档 (链接在文章开头)

        本文的第四点 进阶用法,是我的踩坑记录:1. 为什么设置了允许滚动,滑动页面没有效果?2.到底怎么获取索引号?为什么官网都是uniapp的演示,找不到我想要的内容文章来源地址https://www.toymoban.com/news/detail-484816.html

到了这里,关于原生微信小程序使用u-charts(组件版)折线图示例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序中使用echart、动态加载几条折线

     echart小程序示例 gitub地址:GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本 在小程序中放入 效果   json 组件的位置取决于一示例中的的echart的位置 wxml js wxss

    2024年01月19日
    浏览(39)
  • 微信小程序(原生)封装弹框组件

    小程序封装原生弹框组件(一个弹框,点击确定关闭弹框,有需要的直接复制哦) 上面是组件的内容,下面是引用方法 首先第一步在app.json或者单文件json文件引入 我用的比较多就在app.json引入的 下面是文件使用方法: 只需要子啊data中控制这两个属性就可以了,喜欢的点个赞

    2024年02月11日
    浏览(63)
  • 微信小程序原生写法——24小时时间选择器组件

    使用picker-view来封装成的一个时间选择器 开始时间是当前时间的一个小时之后,秒默认是0秒 可能还有一些情况未处理,后续发现再更新 js文件 第一版:略繁琐 第二版js文件:根据当前时间的时间戳A与24小时之后的时间戳B两者来进行处理获取对应的列表 json文件 wxml文件 wxs

    2024年02月04日
    浏览(63)
  • 微信小程序原生开发功能合集二:下拉选择组件封装

      本章实现小程序中下拉选择组件的封装实现,通过自定义组件的方式实现下拉选择功能,使用小程序的picker组件实现下拉数据的展示及相关自定义处理,封装数据加载过程,数据切换逻辑监听等。   本节实现select组件的开发说明,另使用nodejs创建express服务器,为远程

    2024年02月02日
    浏览(62)
  • 微信小程序修改原生组件样式(uni-app)

    微信小程序修改原生组件样式 全局修改,直接将修改的样式写在全局的样式文件中; 特殊情况:修改swiper指示点样式时,需要包裹在swiper的样式选择器下才生效。 直接将下列代码放在全局样式中是不会生效的,需要加上swiper组件的元素选择器或swiper组件的其他样式名也可。

    2024年02月05日
    浏览(76)
  • 原生微信小程序基础-分包加载&&自定义组件&&&项目全流程

    小程序分包加载 小程序分包加载-为什么要分包加载 微信平台对小程序单个包的代码 体积限制为 2M ,超过 2M 的情况下可以采用分包来解决 即使小程序代码体积没有超过 2M 时也可以拆分成多个包来实现 按需加载 配置文件能忽略的只有静态资源, 代码无法被忽略 配置忽略文

    2024年02月08日
    浏览(53)
  • 支付宝原生小程序组件与父级传递数据(微信小程序基本一样)

    1. 声明组件 在对应的目录下,右击点击 新建小程序 ,之后会生成对应的文件 2. 子组件

    2024年02月16日
    浏览(74)
  • 微信小程序canvas层级太高,与其他非原生组件层级冲突

     官网已经提出新版本以支持同层渲染,但是实际项目中层级还是冲突的。  最后在文档中找到这样一段话,用真机打开,层级就正常了 。所以建议大家,多使用真机调试去测试!!!!

    2024年02月11日
    浏览(47)
  • 微信小程序原生实现无边框table组件支持横向和纵向滚动

    效果图(支持单元格样式自定义) table组件代码 wxml文件 wxss文件 js文件 组件使用 1、在page页面的json文件中引入组件(默认大家都会引入); 2、在page页面的wxml文件中使用组件 3、在page页面的js文件中设置数据 4、在page页面的wxss文件中修改样式

    2024年02月07日
    浏览(67)
  • 【微信小程序】echart中canvas原生组件层级太高遮挡vantui中的组件

    之前的问题图片如下: 最开始想到的方案是降低canvas的层级,但是canvas是原生组件,他的层级是没法改变 所以又想到改变vant组件的层级,但是一样无果。。。 随后,看到网上大篇幅的都是使用显示隐藏来操控picker的,这样会如果页面可以滑动,就导致用户还是可以看到ec

    2024年02月13日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包