首页 > 软件开发 > JavaScript >

小程序端如何使用echarts

来源:互联网 2023-03-17 00:02:59 版权归原作者所有,如有侵权,请联系我们

一般情况下,我们在Web项目中使用echarts图形插件。那么,小程序端如何使用echarts?ZuB办公区 - 实用经验教程分享!

小程序端如何使用echartsZuB办公区 - 实用经验教程分享!

工具/原料

  • echarts
  • 微信小程序
  • 微信小程序开发工具
  • WPS
  • 截图工具

方法/步骤

  • 1

    下载ec-canvas插件,然后将这个插件相关文件复制到微信小程序项目中ZuB办公区 - 实用经验教程分享!

    小程序端如何使用echartsZuB办公区 - 实用经验教程分享!

  • 2

    在user.json文件中,配置使用插件ec-canvasZuB办公区 - 实用经验教程分享!

    小程序端如何使用echartsZuB办公区 - 实用经验教程分享!

  • 3

    在页面文件中,插入一个ec-canvas标签,设置id、canvas-id和ec属性ZuB办公区 - 实用经验教程分享!

    小程序端如何使用echartsZuB办公区 - 实用经验教程分享!

  • 4

    打开对应页面的JavaScript文件,导入echartsZuB办公区 - 实用经验教程分享!

    小程序端如何使用echartsZuB办公区 - 实用经验教程分享!

  • 5

    在data对象中,初始化变量ec,并进行赋值ZuB办公区 - 实用经验教程分享!

    小程序端如何使用echartsZuB办公区 - 实用经验教程分享!

  • 6

    在Page对象外层,定义生成图形的函数initChart,并绑定图形数据和属性ZuB办公区 - 实用经验教程分享!

    小程序端如何使用echartsZuB办公区 - 实用经验教程分享!

    小程序端如何使用echartsZuB办公区 - 实用经验教程分享!

    小程序端如何使用echartsZuB办公区 - 实用经验教程分享!

  • 6本页面未经授权抓取自百度经验
  • 7

    在做页面样式文件中,利用标签选择器,设置宽度和高度ZuB办公区 - 实用经验教程分享!

    小程序端如何使用echartsZuB办公区 - 实用经验教程分享!

  • 总结

    • 1、下载图形插件ZuB办公区 - 实用经验教程分享!

      2、拷贝图形插件ZuB办公区 - 实用经验教程分享!

      3、配置图形插件ZuB办公区 - 实用经验教程分享!

      4、定义图形变量ZuB办公区 - 实用经验教程分享!

      5、构建图形数据ZuB办公区 - 实用经验教程分享!

      6、保存预览查看ZuB办公区 - 实用经验教程分享!

      小程序端如何使用echartsZuB办公区 - 实用经验教程分享!

    注意事项

    • 注意小程序端如何使用echarts
    • 注意如何在小程序中实现不同类型的图形

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!ZuB办公区 - 实用经验教程分享!


    标签: 微信小程序JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号