【uniapp/ucharts】采用 uniapp 框架的 h5 应用使用 ucharts（没有 uni_modules）

已于 2024-04-26 10:54:16 修改
阅读量454 收藏
点赞数 1
分类专栏： uniapp Vue 文章标签： uni-app
于 2024-04-26 10:50:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45682058/article/details/138212050
版权
uniapp 同时被 2 个专栏收录
19 篇文章 2 订阅
订阅专栏
Vue
18 篇文章 0 订阅
订阅专栏
花间半盘棋
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
uniapp_统计图_uCharts.zip
01-05
【标题】"uniapp_统计图_uCharts"指的是在uni-app框架下使用uCharts库创建统计图表的应用示例。uni-app是一个多端开发框架，它允许开发者使用一套代码，跨平台构建iOS、Android、H5、小程序等多个平台的应用。...
uniapp/微信小程序/h5三级地址选择器地区数据
04-14
开发uniapp时，vant组件库中的地址需要自己加，所以就自己封装了一个地址data，使用方法可移步H5开发记录帖
【uniapp】使用图表
Qxn530的博客
10-14 6713
图表的使用以及遇到的问题
undefineduni_modules/qiun-data-charts/static/h5/echarts.min.js net::ERR_NAME_NOT_RESOLVED
LlanyW的专栏
09-19 360
未h5运行基础路径时，运行是正常，那就是uniapp项目h5配置之后，导致路径不对。找到qiun-charts框引用echarts.min.js的地方，查看拼接如下。发布到nginx之后，报错 ，使用qiun-data-charts的柱图，使用的是echarts的配置，然后：echarts.min.js文件找不的报错。如上图：在qiun-data-charts.vue文件时，配置的运行路径字段是：window.location.pathname，uni-app项目vue发布h5网页配置了运行路径。
uCharts图表在小程序中可以显示，但在H5和APP中无法显示
qq_38003956的博客
06-15 596
uCharts图表在小程序中可以显示，但在H5和APP中无法显示
小程序、H5、APP等实现 Charts 图表
wzk17631391315的博客
10-08 191
【代码】小程序、H5、APP等实现 Charts 图表。
秋云uCharts 高性能跨平台图表库，支持H5、APP、小程序、Vue、Taro等更多支持canvas的框架平台
chenchuang0128的博客
04-13 1371
秋云uCharts高性能跨平台图表库，支持H5、APP、小程序（微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平台，支持饼图、圆环图、线图、柱状图、山峰图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图等常见图表。
前端vue基于echart ucharts实现散点图分H5端及全端通用
chenchuang0128的博客
06-05 420
前端vue基于echart实现散点图, 下载完整代码请访问uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?data: ['我的位置', '其他同事']#### JS代码 （引入组件 填充数据）#### HTML代码部分。name: "其他同事",name: "我的位置",-- 散点图 -->-- 散点图 -->// 模拟散点图数据。name: '业绩',name: '成长',// 专利含金量图。
uniapp/h5多选模糊搜索下拉框（可以进行搜索匹配以及多选功能）
04-01
uniapp/h5通用模糊下拉搜索下拉多选框； 使用步骤： 1、下载资源包，并进行解压； 2、将components文件夹中的文件拷贝到自己项目的components文件夹中； 3、在业务文件夹中引用组件multipleDataPickey，使用实例如...
多平台管理系统模板uniapp-admin_uniadmin_uniapp应用模板_uniapp模板_uniapp模版_unia
09-11
1. **uni-app框架**：uni-app是一个由ECharts开发的跨平台开发框架，使用Vue.js语法，支持编写一次，发布到多个平台，包括iOS、Android、H5、微信小程序、支付宝小程序等。 2. **前端模板**：前端模板是预先设计好...
APP蓝牙Demo.zip_settinglyb_uniapp 开发app_蓝牙_蓝牙 uni_跨平台蓝牙demo
07-14
uni-app是一个基于Vue.js的多端开发框架，能够帮助开发者用一套代码生成iOS、Android、H5等多个平台的应用。 描述指出，该APP在用户首次访问时，会检测蓝牙状态，如果未开启，则自动启动蓝牙服务。这一功能对于需要...
关于uni-app怎么引入uni-ui扩展组件
weixin_44032619的博客
04-11 5232
uni-easyinput没在页面显示效果
uniapp的uni_modules目录需要提交到Git吗？为什么有了node_modules，还需要再发明一个uni_modules的轮子？node_modules和uni_modules的区别
南北极之间
05-17 8739
uniapp的uni_modules目录需要提交到Git吗？为什么有了node_modules，还需要再发明一个uni_modules的轮子？node_modules和uni_modules的区别
uniapp插件开发：uniapp使用uni_modules开发插件、发布插件，直接导入，一键升级
热门推荐
qq_42961150的博客
10-28 1万+
目录 背景 开发前提条件 插件开发步骤 参考 更多 背景 uni_modules是uni-app的插件模块化规范（HBuilderX 3.1.0+支持），通常是对一组js sdk、组件、页面、uniCloud云函数、公共模块等的封装，用于嵌入到uni-app项目中使用，也支持直接封装为项目模板。 插件开发者，可以像开发uni-app项目一样编写一个uni_modules插件，并在HBuilderX中直接上传至插件市场。 uni_modules开发的插件，可以直接在uniapp的任意页面直接使用，与ea
uniapp：uni_modules组件开发与发布
chenzimin_blog
12-14 1万+
文章目录一、前言二、开发准备三、 uni_modules 插件开发1、创建uni_modules目录2、新建uni_modules插件3、发布到插件市场4、修改插件基本信息5、发布新版本6、查看发布的插件7、示例 一、前言 uni_modules是uni-app的插件模块化规范（HBuilderX 3.1.0+支持），通常是对一组js sdk、组件、页面、uniCloud云函数、公共模块等的封装，用于嵌入到uni-app项目中使用，也支持直接封装为项目模板。 插件开发者，可以像开发uni-app项目一样编写
uni-app自定义导航栏
yinge0508的博客
02-19 281
uniapp 导入ucharts图表插件 H5项目， 使用echarts eopts配置
LlanyW的专栏
12-19 1519
先下载ucharts H5示例源码：uCharts: 高性能跨平台图表库，支持H5、APP、小程序（微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平台，支持饼图、圆环图、线图、柱状图、山峰图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图等常见图表。
踩坑日记-ucharts根据不同的图表类型使用不同的h5
最新发布
qq_65839745的博客
05-24 448
一开始还是挺没有头绪的，我知道是因为我禁止了事件冒泡导致的后果，但是我的折线图又是需要禁止事件冒泡的，让我处于两难的境地，但是我看ucharts源码的时候发现用到了很多#ifdef和#endif，我就想是否可以根据不同的type来使用不同的h5，于是着手修改程序。可以看到第一个type就是我们要找的type了，于是直接在view中使用v-if=“type===’line‘”即可，由于我使用的是仪表盘和折线图，所以需要v-if和v-elseif v-else,我修改完的h5如下。
uniapp h5 ucharts 折线图进行多个特殊标点
05-26
如果您想在 uniapp h5 中使用 uCharts 折线图进行多个特殊标点，则可以通过以下步骤实现： 1. 在您的页面中引入 uCharts 组件，并在 data 中定义折线图的配置项，如下所示： ``` <template> <u-charts :opts="opts" /> </template> <script> import uCharts from '@/components/u-charts/u-charts.vue' export default { components: { uCharts }, data() { return { opts: { type: 'line', categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], series: [ { name: 'line', data: [10, 20, 30, 40, 50, 60, 70], color: '#FF0000' } ], xAxis: { disableGrid: true }, yAxis: { title: 'Value' } } } } } </script> ``` 2. 在您的页面中定义特殊标点的数据，并将其添加到配置项的 series 数组中，如下所示： ``` <template> <u-charts :opts="opts" /> </template> <script> import uCharts from '@/components/u-charts/u-charts.vue' export default { components: { uCharts }, data() { return { opts: { type: 'line', categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], series: [ { name: 'line', data: [10, 20, 30, 40, 50, 60, 70], color: '#FF0000' }, { name: 'point', data: [ { name: 'Mon', value: 10, color: '#00FF00', pointShape: 'diamond', pointSize: 10 }, { name: 'Wed', value: 30, color: '#0000FF', pointShape: 'triangle', pointSize: 10 }, { name: 'Sat', value: 60, color: '#FF00FF', pointShape: 'circle', pointSize: 10 } ] } ], xAxis: { disableGrid: true }, yAxis: { title: 'Value' } } } } } </script> ``` 在上述代码中，我们定义了一个名为 'point' 的 series，其中包含三个特殊标点数据，分别对应星期一、三和六。这些特殊标点的颜色、形状和大小都可以自定义。 3. 最后，您可以根据需要进一步调整折线图的样式和显示效果，以满足您的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花间半盘棋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值