uni-app开发日记 : echarts图表插件使用教程

前言
之前在接到一个app项目,在许多博客、论坛上去查看,有许多的说是可以运行。但是,的确可以运行,可是不报错,不显示图表啊!我哩哦giao!许多网友评论说是,版本更改,插件内容丢失所致!

我这里是我去uniapp官网上找的插件。用的是renderjs-echarts-deom,他有个好处,echarts官网上的图表样式代码,无需更改就可以复制使用,很方便开发,而且,样式比其他的丰富。当然,也可以使用ucharts,他是跨全端的,h5,app,小程序(小程序基本都可以使用),建议大家使用!

直接上步骤:
1.在uniapp官网上的插件市场上找到renderjs-echarts-deom
在这里插入图片描述
注意:
仅支持 app-vue、h5 端
要求hbuildx 版本2.5.5+以上版本
app端要求使用v3编译器

2.直接导入到hbuildx里面,导入之后是这样子的
在这里插入图片描述
这个插件的核心就是static/echarts.js.

3.根据官网样例,运行的图表这样
在这里插入图片描述
4.使用自己的自定义图表样式。

在这里插入图片描述
我们去echarts官网上找一个图例的option粘过来
在这里插入图片描述
替换项目里面的option值其他不变
在这里插入图片描述
再次运行结果:
在这里插入图片描述
我们可以根据echarts官网替换opotion示例随意的更改图表样式。

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值