Commit 0888f8fc 吴良建

更改名字吧

1 个父辈 0bfe38e7
{ {
"name" : "ssqds", "name" : "乐透双色球",
"appid" : "__UNI__5563EE0", "appid" : "__UNI__5563EE0",
"description" : "", "description" : "",
"versionName" : "1.0.0", "versionName" : "1.0.0",
...@@ -41,9 +41,14 @@ ...@@ -41,9 +41,14 @@
] ]
}, },
/* ios打包配置 */ /* ios打包配置 */
"ios" : {}, "ios" : {
"idfa" : false,
"dSYMs" : false
},
/* SDK配置 */ /* SDK配置 */
"sdkConfigs" : {}, "sdkConfigs" : {
"ad" : {}
},
"icons" : { "icons" : {
"android" : { "android" : {
"hdpi" : "unpackage/res/icons/72x72.png", "hdpi" : "unpackage/res/icons/72x72.png",
......
## 2.5.0-20230101(2023-01-01)
- 秋云图表组件 修改条件编译顺序,确保uniapp的cli方式的项目依赖不完整时可以正常显示
- 秋云图表组件 恢复props属性directory的使用,以修复vue3项目中,开启echarts后,echarts目录识别错误的bug
- uCharts.js 修复区域图、混合图只有一个数据时图表显示不正确的bug
- uCharts.js 修复折线图、区域图中时间轴类别图表tooltip指示点显示不正确的bug
- uCharts.js 修复x轴使用labelCount时,并且boundaryGap = 'justify' 并且关闭Y轴显示的时候,最后一个坐标值不显示的bug
- uCharts.js 修复折线图只有一组数据时 ios16 渲染颜色不正确的bug
- uCharts.js 修复玫瑰图半径显示不正确的bug
- uCharts.js 柱状图、山峰图增加正负图功能,y轴网格如果需要显示0轴则由 min max 及 splitNumber 确定,后续版本优化自动显示0轴
- uCharts.js 柱状图column增加 opts.extra.column.labelPosition,数据标签位置,有效值为 outside外部, insideTop内顶部, center内中间, bottom内底部
- uCharts.js 雷达图radar增加 opts.extra.radar.labelShow,否显示各项标识文案是,默认true
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.boxPadding,提示窗边框填充距离,默认3px
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.fontSize,提示窗字体大小配置,默认13px
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.lineHeight,提示窗文字行高,默认20px
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShow,是否显示左侧图例,默认true
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShape,图例形状,图例标识样式,有效值为 auto自动跟随图例, diamond◆, circle●, triangle▲, square■, rect▬, line-
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelFontSize,字体大小配置,默认13px
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelPadding,标签边框内填充距离,默认6px
- uCharts.js 折线图line增加 opts.extra.line.linearType,渐变色类型,可选值 none关闭渐变色,custom 自定义渐变色。使用自定义渐变色时请赋值serie.linearColor作为颜色值
- uCharts.js 折线图line增加 serie.linearColor,渐变色数组,格式为2维数组[起始位置,颜色值],例如[[0,'#0EE2F8'],[0.3,'#2BDCA8'],[0.6,'#1890FF'],[1,'#9A60B4']]
- uCharts.js 折线图line增加 opts.extra.line.onShadow,是否开启折线阴影,开启后请赋值serie.setShadow阴影设置
- uCharts.js 折线图line增加 serie.setShadow,阴影配置,格式为4位数组:[offsetX,offsetY,blur,color]
- uCharts.js 折线图line增加 opts.extra.line.animation,动画效果方向,可选值为vertical 垂直动画效果,horizontal 水平动画效果
- uCharts.js X轴xAxis增加 opts.xAxis.lineHeight,X轴字体行高,默认20px
- uCharts.js X轴xAxis增加 opts.xAxis.marginTop,X轴文字距离轴线的距离,默认0px
- uCharts.js X轴xAxis增加 opts.xAxis.title,当前X轴标题
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontSize,标题字体大小,默认13px
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetY,标题纵向偏移距离,负数为向上偏移,正数向下偏移
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetX,标题横向偏移距离,负数为向左偏移,正数向右偏移
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontColor,标题字体颜色,默认#666666
## 报错TypeError: Cannot read properties of undefined (reading 'length')
- 如果是uni-modules版本组件,请先登录HBuilderX账号;
- 在HBuilderX中的manifest.json,点击重新获取uniapp的appid,或者删除appid重新粘贴,重新运行;
- 如果是cli项目请使用码云上的非uniCloud版本组件;
- 或者添加uniCloud的依赖;
- 或者使用原生uCharts;
## 2.4.5-20221130(2022-11-30)
- uCharts.js 优化tooltip当文字很多变为左侧显示时,如果画布仍显显示不下,提示框错位置变为以左侧0位置起画
- uCharts.js 折线图修复特殊情况下只有单点数据,并改变线宽后点变为圆形的bug
- uCharts.js 修复Y轴disabled启用后无效并报错的bug
- uCharts.js 修复仪表盘起始结束角度特殊情况下显示不正确的bug
- uCharts.js 雷达图新增参数 opts.extra.radar.radius , 自定义雷达图半径
- uCharts.js 折线图、区域图增加tooltip指示点,opts.extra.line.activeType/opts.extra.area.activeType,可选值"none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
## 2.4.4-20221102(2022-11-02)
- 秋云图表组件 修复使用echarts时reload、reshow无法调用重新渲染的bug,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/40)
- 秋云图表组件 修复使用echarts时,初始化时宽高不正确的bug,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/42)
- 秋云图表组件 修复uniapp的h5使用history模式时,无法加载echarts的bug
- 秋云图表组件 小程序端@complete、@scrollLeft、@scrollRight、@getTouchStart、@getTouchMove、@getTouchEnd事件增加opts参数传出,方便一些特殊需求的交互获取数据。
- uCharts.js 修复calTooltipYAxisData方法内formatter格式化方法未与y轴方法同步的问题,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/43)
- uCharts.js 地图新增参数opts.series[i].fillOpacity,以透明度方式来设置颜色过度效果,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/38)
- uCharts.js 地图新增参数opts.extra.map.active,是否启用点击激活变色
- uCharts.js 地图新增参数opts.extra.map.activeTextColor,是否启用点击激活变色
- uCharts.js 地图新增渲染完成事件renderComplete
- uCharts.js 漏斗图修复当部分数据相同时tooltip提示窗点击错误的bug
- uCharts.js 漏斗图新增参数series.data[i].centerText 居中标签文案
- uCharts.js 漏斗图新增参数series.data[i].centerTextSize 居中标签文案字体大小,默认opts.fontSize
- uCharts.js 漏斗图新增参数series.data[i].centerTextColor 居中标签文案字体颜色,默认#FFFFFF
- uCharts.js 漏斗图新增参数opts.extra.funnel.minSize 最小值的最小宽度,默认0
- uCharts.js 进度条新增参数opts.extra.arcbar.direction,动画方向,可选值为cw顺时针、ccw逆时针
- uCharts.js 混合图新增参数opts.extra.mix.line.width,折线的宽度,默认2
- uCharts.js 修复tooltip开启horizentalLine水平横线标注时,图表显示错位的bug
- uCharts.js 优化tooltip当文字很多变为左侧显示时,如果画布仍显显示不下,提示框错位置变为以左侧0位置起画
- uCharts.js 修复开启滚动条后X轴文字超出绘图区域后的隐藏逻辑
- uCharts.js 柱状图、条状图修复堆叠模式不能通过{value,color}赋值单个柱子颜色的问题
- uCharts.js 气泡图修复不识别series.textSize和series.textColor的bug
## 报错TypeError: Cannot read properties of undefined (reading 'length')
1. 如果是uni-modules版本组件,请先登录HBuilderX账号;
2. 在HBuilderX中的manifest.json,点击重新获取uniapp的appid,或者删除appid重新粘贴,重新运行;
3. 如果是cli项目请使用码云上的非uniCloud版本组件;
4. 或者添加uniCloud的依赖;
5. 或者使用原生uCharts;
## 2.4.3-20220505(2022-05-05)
- 秋云图表组件 修复开启canvas2d后将series赋值为空数组显示加载图标时,再次赋值后画布闪动的bug
- 秋云图表组件 修复升级hbx最新版后ECharts的highlight方法报错的bug
- uCharts.js 雷达图新增参数opts.extra.radar.gridEval,数据点位网格抽希,默认1
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabel, 是否显示刻度点值,默认false
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabelTofix,刻度点值小数位数,默认0
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointShow,是否显示末端刻度圆点,默认false
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointRadius,刻度圆点的半径,默认3
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointColor,刻度圆点的颜色,默认#cccccc
- uCharts.js 雷达图新增参数opts.extra.radar.linearType,渐变色类型,可选值"none"关闭渐变,"custom"开启渐变
- uCharts.js 雷达图新增参数opts.extra.radar.customColor,自定义渐变颜色,数组类型对应series的数组长度以匹配不同series颜色的不同配色方案,例如["#FA7D8D", "#EB88E2"]
- uCharts.js 雷达图优化支持series.textColor、series.textSize属性
- uCharts.js 柱状图中温度计式图标,优化支持全圆角类型,修复边框有缝隙的bug,详见官网【演示】中的温度计图表
- uCharts.js 柱状图新增参数opts.extra.column.activeWidth,当前点击柱状图的背景宽度,默认一个单元格单位
- uCharts.js 混合图增加opts.extra.mix.area.gradient 区域图是否开启渐变色
- uCharts.js 混合图增加opts.extra.mix.area.opacity 区域图透明度,默认0.2
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图,增加opts.series[0].data[i].labelText,自定义标签文字,避免formatter格式化的繁琐,详见官网【演示】中的饼图
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图,增加opts.series[0].data[i].labelShow,自定义是否显示某一个指示标签,避免因饼图类别太多导致标签重复或者居多导致图形变形的问题,详见官网【演示】中的饼图
- uCharts.js 增加opts.series[i].legendText/opts.series[0].data[i].legendText(与series.name同级)自定义图例显示文字的方法
- uCharts.js 优化X轴、Y轴formatter格式化方法增加形参,统一为fromatter:function(value,index,opts){}
- uCharts.js 修复横屏模式下无法使用双指缩放方法的bug
- uCharts.js 修复当只有一条数据或者多条数据值相等的时候Y轴自动计算的最大值错误的bug
- 【官网模板】增加外部自定义图例与图表交互的例子,[点击跳转](https://www.ucharts.cn/v2/#/layout/info?id=2)
## 注意:非unimodules 版本如因更新 hbx 至 3.4.7 导致报错如下,请到码云更新非 unimodules 版本组件,[点击跳转](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)
> Error in callback for immediate watcher "uchartsOpts": "SyntaxError: Unexpected token u in JSON at position 0"
## 2.4.2-20220421(2022-04-21)
- 秋云图表组件 修复HBX升级3.4.6.20220420版本后echarts报错的问题
## 2.4.2-20220420(2022-04-20)
## 重要!此版本uCharts新增了很多功能,修复了诸多已知问题
- 秋云图表组件 新增onzoom开启双指缩放功能(仅uCharts),前提需要直角坐标系类图表类型,并且ontouch为true、opts.enableScroll为true,详见实例项目K线图
- 秋云图表组件 新增optsWatch是否监听opts变化,关闭optsWatch后,动态修改opts不会触发图表重绘
- 秋云图表组件 修复开启canvas2d功能后,动态更新数据后画布闪动的bug
- 秋云图表组件 去除directory属性,改为自动获取echarts.min.js路径(升级不受影响)
- 秋云图表组件 增加getImage()方法及@getImage事件,通过ref调用getImage()方法获,触发@getImage事件获取当前画布的base64图片文件流。
- 秋云图表组件 支付宝、字节跳动、飞书、快手小程序支持开启canvas2d同层渲染设置。
- 秋云图表组件 新增加【非uniCloud】版本组件,避免有些不需要uniCloud的使用组件发布至小程序需要提交隐私声明问题,请到码云[【非uniCloud版本】](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6),或npm[【非uniCloud版本】](https://www.npmjs.com/package/@qiun/uni-ucharts)下载使用。
- uCharts.js 新增dobuleZoom双指缩放功能
- uCharts.js 新增山峰图type="mount",数据格式为饼图类格式,不需要传入categories,具体详见新版官网在线演示
- uCharts.js 修复折线图当数据中存在null时tooltip报错的bug
- uCharts.js 修复饼图类当画布比较小时自动计算的半径是负数报错的bug
- uCharts.js 统一各图表类型的series.formatter格式化方法的形参为(val, index, series, opts),方便格式化时有更多参数可用
- uCharts.js 标记线功能增加labelText自定义显示文字,增加labelAlign标签显示位置(左侧或右侧),增加标签显示位置微调labelOffsetX、labelOffsetY
- uCharts.js 修复条状图当数值很小时开启圆角后样式错误的bug
- uCharts.js 修复X轴开启disabled后,X轴仍占用空间的bug
- uCharts.js 修复X轴开启滚动条并且开启rotateLabel后,X轴文字与滚动条重叠的bug
- uCharts.js 增加X轴rotateAngle文字旋转自定义角度,取值范围(-90至90)
- uCharts.js 修复地图文字标签层级显示不正确的bug
- uCharts.js 修复饼图、圆环图、玫瑰图当数据全部为0的时候不显示数据标签的bug
- uCharts.js 修复当opts.padding上边距为0时,Y轴顶部刻度标签位置不正确的bug
## 另外我们还开发了各大原生小程序组件,已发布至码云和npm
[https://gitee.com/uCharts/uCharts](https://gitee.com/uCharts/uCharts)
[https://www.npmjs.com/~qiun](https://www.npmjs.com/~qiun)
## 对于原生uCharts文档我们已上线新版官方网站,详情点击下面链接进入官网
[https://www.uCharts.cn/v2/](https://www.ucharts.cn/v2/)
## 2.3.7-20220122(2022-01-22)
## 重要!使用vue3编译,请使用cli模式并升级至最新依赖,HbuilderX编译需要使用3.3.8以上版本
- uCharts.js 修复uni-app平台组件模式使用vue3编译到小程序报错的bug。
## 2.3.7-20220118(2022-01-18)
## 注意,使用vue3的前提是需要3.3.8.20220114-alpha版本的HBuilder!
## 2.3.67-20220118(2022-01-18)
- 秋云图表组件 组件初步支持vue3,全端编译会有些问题,具体详见下面修改:
1. 小程序端运行时,在uni_modules文件夹的qiun-data-charts.js中搜索 new uni_modules_qiunDataCharts_js_sdk_uCharts_uCharts.uCharts,将.uCharts去掉。
2. 小程序端发行时,在uni_modules文件夹的qiun-data-charts.js中搜索 new e.uCharts,将.uCharts去掉,变为 new e。
3. 如果觉得上述步骤比较麻烦,如果您的项目只编译到小程序端,可以修改u-charts.js最后一行导出方式,将 export default uCharts;变更为 export default { uCharts: uCharts }; 这样变更后,H5和App端的renderjs会有问题,请开发者自行选择。(此问题非组件问题,请等待DC官方修复Vue3的小程序端)
## 2.3.6-20220111(2022-01-11)
- 秋云图表组件 修改组件 props 属性中的 background 默认值为 rgba(0,0,0,0)
## 2.3.6-20211201(2021-12-01)
- uCharts.js 修复bar条状图开启圆角模式时,值很小时圆角渲染错误的bug
## 2.3.5-20211014(2021-10-15)
- uCharts.js 增加vue3的编译支持(仅原生uCharts,qiun-data-charts组件后续会支持,请关注更新)
## 2.3.4-20211012(2021-10-12)
- 秋云图表组件 修复 mac os x 系统 mouseover 事件丢失的 bug
## 2.3.3-20210706(2021-07-06)
- uCharts.js 增加雷达图开启数据点值(opts.dataLabel)的显示
## 2.3.2-20210627(2021-06-27)
- 秋云图表组件 修复tooltipCustom个别情况下传值不正确报错TypeError: Cannot read property 'name' of undefined的bug
## 2.3.1-20210616(2021-06-16)
- uCharts.js 修复圆角柱状图使用4角圆角时,当数值过大时不正确的bug
## 2.3.0-20210612(2021-06-12)
- uCharts.js 【重要】uCharts增加nvue兼容,可在nvue项目中使用gcanvas组件渲染uCharts,[详见码云uCharts-demo-nvue](https://gitee.com/uCharts/uCharts)
- 秋云图表组件 增加tapLegend属性,是否开启图例点击交互事件
- 秋云图表组件 getIndex事件中增加返回uCharts实例中的opts参数,以便在页面中调用参数
- 示例项目 pages/other/other.vue增加app端自定义tooltip的方法,详见showOptsTooltip方法
## 2.2.1-20210603(2021-06-03)
- uCharts.js 修复饼图、圆环图、玫瑰图,当起始角度不为0时,tooltip位置不准确的bug
- uCharts.js 增加温度计式柱状图开启顶部半圆形的配置
## 2.2.0-20210529(2021-05-29)
- uCharts.js 增加条状图type="bar"
- 示例项目 pages/ucharts/ucharts.vue增加条状图的demo
## 2.1.7-20210524(2021-05-24)
- uCharts.js 修复大数据量模式下曲线图不平滑的bug
## 2.1.6-20210523(2021-05-23)
- 秋云图表组件 修复小程序端开启滚动条更新数据后滚动条位置不符合预期的bug
## 2.1.5-2021051702(2021-05-17)
- uCharts.js 修复自定义Y轴min和max值为0时不能正确显示的bug
## 2.1.5-20210517(2021-05-17)
- uCharts.js 修复Y轴自定义min和max时,未按指定的最大值最小值显示坐标轴刻度的bug
## 2.1.4-20210516(2021-05-16)
- 秋云图表组件 优化onWindowResize防抖方法
- 秋云图表组件 修复APP端uCharts更新数据时,清空series显示loading图标后再显示图表,图表抖动的bug
- uCharts.js 修复开启canvas2d后,x轴、y轴、series自定义字体大小未按比例缩放的bug
- 示例项目 修复format-e.vue拼写错误导致app端使用uCharts渲染图表
## 2.1.3-20210513(2021-05-13)
- 秋云图表组件 修改uCharts变更chartData数据为updateData方法,支持带滚动条的数据动态打点
- 秋云图表组件 增加onWindowResize防抖方法 fix by ど誓言,如尘般染指流年づ
- 秋云图表组件 H5或者APP变更chartData数据显示loading图表时,原数据闪现的bug
- 秋云图表组件 props增加errorReload禁用错误点击重新加载的方法
- uCharts.js 增加tooltip显示category(x轴对应点位)标题的功能,opts.extra.tooltip.showCategory,默认为false
- uCharts.js 修复mix混合图只有柱状图时,tooltip的分割线显示位置不正确的bug
- uCharts.js 修复开启滚动条,图表在拖动中动态打点,滚动条位置不正确的bug
- uCharts.js 修复饼图类数据格式为echarts数据格式,series为空数组报错的bug
- 示例项目 修改uCharts.js更新到v2.1.2版本后,@getIndex方法获取索引值变更为e.currentIndex.index
- 示例项目 pages/updata/updata.vue增加滚动条拖动更新(数据动态打点)的demo
- 示例项目 pages/other/other.vue增加errorReload禁用错误点击重新加载的demo
## 2.1.2-20210509(2021-05-09)
秋云图表组件 修复APP端初始化时就传入chartData或lacaldata不显示图表的bug
## 2.1.1-20210509(2021-05-09)
- 秋云图表组件 变更ECharts的eopts配置在renderjs内执行,支持在config-echarts.js配置文件内写function配置。
- 秋云图表组件 修复APP端报错Prop being mutated: "onmouse"错误的bug。
- 秋云图表组件 修复APP端报错Error: Not Found:Page[6][-1,27] at view.umd.min.js:1的bug。
## 2.1.0-20210507(2021-05-07)
- 秋云图表组件 修复初始化时就有数据或者数据更新的时候loading加载动画闪动的bug
- uCharts.js 修复x轴format方法categories为字符串类型时返回NaN的bug
- uCharts.js 修复series.textColor、legend.fontColor未执行全局默认颜色的bug
## 2.1.0-20210506(2021-05-06)
- 秋云图表组件 修复极个别情况下报错item.properties undefined的bug
- 秋云图表组件 修复极个别情况下关闭加载动画reshow不起作用,无法显示图表的bug
- 示例项目 pages/ucharts/ucharts.vue 增加时间轴折线图(type="tline")、时间轴区域图(type="tarea")、散点图(type="scatter")、气泡图demo(type="bubble")、倒三角形漏斗图(opts.extra.funnel.type="triangle")、金字塔形漏斗图(opts.extra.funnel.type="pyramid")
- 示例项目 pages/format-u/format-u.vue 增加X轴format格式化示例
- uCharts.js 升级至v2.1.0版本
- uCharts.js 修复 玫瑰图面积模式点击tooltip位置不正确的bug
- uCharts.js 修复 玫瑰图点击图例,只剩一个类别显示空白的bug
- uCharts.js 修复 饼图类图点击图例,其他图表tooltip位置某些情况下不准的bug
- uCharts.js 修复 x轴为矢量轴(时间轴)情况下,点击tooltip位置不正确的bug
- uCharts.js 修复 词云图获取点击索引偶尔不准的bug
- uCharts.js 增加 直角坐标系图表X轴format格式化方法(原生uCharts.js用法请使用formatter)
- uCharts.js 增加 漏斗图扩展配置,倒三角形(opts.extra.funnel.type="triangle"),金字塔形(opts.extra.funnel.type="pyramid")
- uCharts.js 增加 散点图(opts.type="scatter")、气泡图(opts.type="bubble")
- 后期计划 完善散点图、气泡图,增加markPoints标记点,增加横向条状图。
## 2.0.0-20210502(2021-05-02)
- uCharts.js 修复词云图获取点击索引不正确的bug
## 2.0.0-20210501(2021-05-01)
- 秋云图表组件 修复QQ小程序、百度小程序在关闭动画效果情况下,v-for循环使用图表,显示不正确的bug
## 2.0.0-20210426(2021-04-26)
- 秋云图表组件 修复QQ小程序不支持canvas2d的bug
- 秋云图表组件 修复钉钉小程序某些情况点击坐标计算错误的bug
- uCharts.js 增加 extra.column.categoryGap 参数,柱状图类每个category点位(X轴点)柱子组之间的间距
- uCharts.js 增加 yAxis.data[i].titleOffsetY 参数,标题纵向偏移距离,负数为向上偏移,正数向下偏移
- uCharts.js 增加 yAxis.data[i].titleOffsetX 参数,标题横向偏移距离,负数为向左偏移,正数向右偏移
- uCharts.js 增加 extra.gauge.labelOffset 参数,仪表盘标签文字径向便宜距离,默认13px
## 2.0.0-20210422-2(2021-04-22)
秋云图表组件 修复 formatterAssign 未判断 args[key] == null 的情况导致栈溢出的 bug
## 2.0.0-20210422(2021-04-22)
- 秋云图表组件 修复H5、APP、支付宝小程序、微信小程序canvas2d模式下横屏模式的bug
## 2.0.0-20210421(2021-04-21)
- uCharts.js 修复多行图例的情况下,图例在上方或者下方时,图例float为左侧或者右侧时,第二行及以后的图例对齐方式不正确的bug
## 2.0.0-20210420(2021-04-20)
- 秋云图表组件 修复微信小程序开启canvas2d模式后,windows版微信小程序不支持canvas2d模式的bug
- 秋云图表组件 修改非uni_modules版本为v2.0版本qiun-data-charts组件
## 2.0.0-20210419(2021-04-19)
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,如仍不好用,请重启电脑;
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font>
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
- uCharts.js 修复混合图中柱状图单独设置颜色不生效的bug
- uCharts.js 修复多Y轴单独设置fontSize时,开启canvas2d后,未对应放大字体的bug
## 2.0.0-20210418(2021-04-18)
- 秋云图表组件 增加directory配置,修复H5端history模式下如果发布到二级目录无法正确加载echarts.min.js的bug
## 2.0.0-20210416(2021-04-16)
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
## 初次使用如果提示未注册&lt;qiun-data-charts&gt;组件,请重启HBuilderX,如仍不好用,请重启电脑;
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font>
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
- 秋云图表组件 修复APP端某些情况下报错`Not Found Page`的bug,fix by 高级bug开发技术员
- 示例项目 修复APP端v-for循环某些情况下报错`Not Found Page`的bug,fix by 高级bug开发技术员
- uCharts.js 修复非直角坐标系tooltip提示窗右侧超出未变换方向显示的bug
## 2.0.0-20210415(2021-04-15)
- 秋云图表组件 修复H5端发布到二级目录下echarts无法加载的bug
- 秋云图表组件 修复某些情况下echarts.off('finished')移除监听事件报错的bug
## 2.0.0-20210414(2021-04-14)
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
## 初次使用如果提示未注册&lt;qiun-data-charts&gt;组件,请重启HBuilderX,如仍不好用,请重启电脑;
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font>
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
- 秋云图表组件 修复H5端在cli项目下ECharts引用地址错误的bug
- 示例项目 增加ECharts的formatter用法的示例(详见示例项目format-e.vue)
- uCharts.js 增加圆环图中心背景色的配置extra.ring.centerColor
- uCharts.js 修复微信小程序安卓端柱状图开启透明色后显示不正确的bug
## 2.0.0-20210413(2021-04-13)
- 秋云图表组件 修复百度小程序多个图表真机未能正确获取根元素dom尺寸的bug
- 秋云图表组件 修复百度小程序横屏模式方向不正确的bug
- 秋云图表组件 修改ontouch时,@getTouchStart@getTouchMove@getTouchEnd的触发条件
- uCharts.js 修复饼图类数据格式series属性不生效的bug
- uCharts.js 增加时序区域图 详见示例项目中ucharts.vue
## 2.0.0-20210412-2(2021-04-12)
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
## 初次使用如果提示未注册&lt;qiun-data-charts&gt;组件,请重启HBuilderX。如仍不好用,请重启电脑,此问题已于DCloud官方确认,HBuilderX下个版本会修复。
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
- 秋云图表组件 修复uCharts在APP端横屏模式下不能正确渲染的bug
- 示例项目 增加ECharts柱状图渐变色、圆角柱状图、横向柱状图(条状图)的示例
## 2.0.0-20210412(2021-04-12)
- 秋云图表组件 修复created中判断echarts导致APP端无法识别,改回mounted中判断echarts初始化
- uCharts.js 修复2d模式下series.textOffset未乘像素比的bug
## 2.0.0-20210411(2021-04-11)
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,并清空小程序开发者工具缓存。
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
- uCharts.js 折线图区域图增加connectNulls断点续连的功能,详见示例项目中ucharts.vue
- 秋云图表组件 变更初始化方法为created,变更type2d默认值为true,优化2d模式下组件初始化后dom获取不到的bug
- 秋云图表组件 修复左右布局时,右侧图表点击坐标错误的bug,修复tooltip柱状图自定义颜色显示object的bug
## 2.0.0-20210410(2021-04-10)
- 修复左右布局时,右侧图表点击坐标错误的bug,修复柱状图自定义颜色tooltip显示object的bug
- 增加标记线及柱状图自定义颜色的demo
## 2.0.0-20210409(2021-04-08)
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧【使用HBuilderX导入插件】即可体验,DEMO演示及在线生成工具(v2.0文档)[https://demo.ucharts.cn](https://demo.ucharts.cn)
## 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
- uCharts.js 修复钉钉小程序百度小程序measureText不准确的bug,修复2d模式下饼图类activeRadius为按比例放大的bug
- 修复组件在支付宝小程序端点击位置不准确的bug
## 2.0.0-20210408(2021-04-07)
- 修复组件在支付宝小程序端不能显示的bug(目前支付宝小程不能点击交互,后续修复)
- uCharts.js 修复高分屏下柱状图类,圆弧进度条 自定义宽度不能按比例放大的bug
## 2.0.0-20210407(2021-04-06)
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧【使用HBuilderX导入插件】即可体验,DEMO演示及在线生成工具(v2.0文档)[https://demo.ucharts.cn](https://demo.ucharts.cn)
## 增加 通过tofix和unit快速格式化y轴的demo add by `howcode`
## 增加 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
## 2.0.0-20210406(2021-04-05)
# 秋云图表组件+uCharts v2.0版本同步上线,使用方法详见https://demo.ucharts.cn帮助页
## 2.0.0(2021-04-05)
# 秋云图表组件+uCharts v2.0版本同步上线,使用方法详见https://demo.ucharts.cn帮助页
<!--
* qiun-data-charts 秋云高性能跨全端图表组件
* Copyright (c) 2021 QIUN® 秋云 https://www.ucharts.cn All rights reserved.
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
* 复制使用请保留本段注释,感谢支持开源!
* 为方便更多开发者使用,如有更好的建议请提交码云 Pull Requests !
*
* uCharts®官方网站
* https://www.uCharts.cn
*
* 开源地址:
* https://gitee.com/uCharts/uCharts
*
* uni-app插件市场地址:
* http://ext.dcloud.net.cn/plugin?id=271
*
-->
<template>
<view class="chartsview" :id="'ChartBoxId'+cid">
<view v-if="mixinDatacomLoading">
<!-- 自定义加载状态,请改这里 -->
<qiun-loading :loadingType="loadingType" />
</view>
<view v-if="mixinDatacomErrorMessage && errorShow" @tap="reloading">
<!-- 自定义错误提示,请改这里 -->
<qiun-error :errorMessage="errorMessage" />
</view>
<!-- APP和H5采用renderjs渲染图表 -->
<!-- #ifdef APP-VUE || H5 -->
<block v-if="echarts">
<view
:style="{ background: background }"
style="width: 100%;height: 100%;"
:data-directory="directory"
:id="'EC'+cid"
:prop="echartsOpts"
:change:prop="rdcharts.ecinit"
:resize="echartsResize"
:change:resize="rdcharts.ecresize"
v-show="showchart"
/>
</block>
<block v-else>
<view
v-on:tap="rdcharts.tap"
v-on:mousemove="rdcharts.mouseMove"
v-on:mousedown="rdcharts.mouseDown"
v-on:mouseup="rdcharts.mouseUp"
v-on:touchstart="rdcharts.touchStart"
v-on:touchmove="rdcharts.touchMove"
v-on:touchend="rdcharts.touchEnd"
:id="'UC'+cid"
:prop="uchartsOpts"
:change:prop="rdcharts.ucinit"
>
<canvas
:id="cid"
:canvasId="cid"
:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
:disable-scroll="disableScroll"
@error="_error"
v-show="showchart"
/>
</view>
</block>
<!-- #endif -->
<!-- 支付宝小程序 -->
<!-- #ifdef MP-ALIPAY -->
<block v-if="ontouch">
<canvas
:id="cid"
:canvasId="cid"
:width="cWidth * pixel"
:height="cHeight * pixel"
:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
:disable-scroll="disScroll"
@tap="_tap"
@touchstart="_touchStart"
@touchmove="_touchMove"
@touchend="_touchEnd"
@error="_error"
v-show="showchart"
/>
</block>
<block v-if="!ontouch">
<canvas
:id="cid"
:canvasId="cid"
:width="cWidth * pixel"
:height="cHeight * pixel"
:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
:disable-scroll="disScroll"
@tap="_tap"
@error="_error"
v-show="showchart"
/>
</block>
<!-- #endif -->
<!-- 其他小程序通过vue渲染图表 -->
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO || MP-KUAISHOU || MP-LARK || MP-JD || MP-360 -->
<block v-if="type2d">
<view v-if="ontouch" @tap="_tap">
<canvas
:id="cid"
:canvasId="cid"
:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
type="2d"
:disable-scroll="disScroll"
@touchstart="_touchStart"
@touchmove="_touchMove"
@touchend="_touchEnd"
@error="_error"
v-show="showchart"
/>
</view>
<view v-if="!ontouch" @tap="_tap">
<canvas
:id="cid"
:canvasId="cid"
:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
type="2d"
:disable-scroll="disScroll"
@error="_error"
v-show="showchart"
/>
</view>
</block>
<block v-if="!type2d">
<view v-if="ontouch" @tap="_tap">
<canvas
:id="cid"
:canvasId="cid"
:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
@touchstart="_touchStart"
@touchmove="_touchMove"
@touchend="_touchEnd"
:disable-scroll="disScroll"
@error="_error"
v-if="showchart"
/>
</view>
<view v-if="!ontouch" >
<canvas
:id="cid"
:canvasId="cid"
:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
:disable-scroll="disScroll"
@tap="_tap"
@error="_error"
v-if="showchart"
/>
</view>
</block>
<!-- #endif -->
</view>
</template>
<script>
import uCharts from '../../js_sdk/u-charts/u-charts.js';
import cfu from '../../js_sdk/u-charts/config-ucharts.js';
// #ifdef APP-VUE || H5
import cfe from '../../js_sdk/u-charts/config-echarts.js';
// #endif
function deepCloneAssign(origin = {}, ...args) {
for (let i in args) {
for (let key in args[i]) {
if (args[i].hasOwnProperty(key)) {
origin[key] = args[i][key] && typeof args[i][key] === 'object' ? deepCloneAssign(Array.isArray(args[i][key]) ? [] : {}, origin[key], args[i][key]) : args[i][key];
}
}
}
return origin;
}
function formatterAssign(args,formatter) {
for (let key in args) {
if(args.hasOwnProperty(key) && args[key] !== null && typeof args[key] === 'object'){
formatterAssign(args[key],formatter)
}else if(key === 'format' && typeof args[key] === 'string'){
args['formatter'] = formatter[args[key]] ? formatter[args[key]] : undefined;
}
}
return args;
}
// 时间转换函数,为了匹配uniClinetDB读取出的时间与categories不同
function getFormatDate(date) {
var seperator = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator + month + seperator + strDate;
return currentdate;
}
var lastMoveTime = null;
/**
* 防抖
*
* @param { Function } fn 要执行的方法
* @param { Number } wait 防抖多少毫秒
*
* 在 vue 中使用(注意:不能使用箭头函数,否则this指向不对,并且不能再次封装如:
* move(){ // 错误调用方式
* debounce(function () {
* console.log(this.title);
* }, 1000)});
* 应该直接使用:// 正确调用方式
* move: debounce(function () {
* console.log(this.title);
* }, 1000)
*/
function debounce(fn, wait) {
let timer = false;
return function() {
clearTimeout(timer);
timer && clearTimeout(timer);
timer = setTimeout(() => {
timer = false;
fn.apply(this, arguments); // 把参数传进去
}, wait);
};
}
export default {
name: 'qiun-data-charts',
mixins: [uniCloud.mixinDatacom],
props: {
type: {
type: String,
default: null
},
canvasId: {
type: String,
default: 'uchartsid'
},
canvas2d: {
type: Boolean,
default: false
},
background: {
type: String,
default: 'rgba(0,0,0,0)'
},
animation: {
type: Boolean,
default: true
},
chartData: {
type: Object,
default() {
return {
categories: [],
series: []
};
}
},
opts: {
type: Object,
default() {
return {};
}
},
eopts: {
type: Object,
default() {
return {};
}
},
loadingType: {
type: Number,
default: 2
},
errorShow: {
type: Boolean,
default: true
},
errorReload: {
type: Boolean,
default: true
},
errorMessage: {
type: String,
default: null
},
inScrollView: {
type: Boolean,
default: false
},
reshow: {
type: Boolean,
default: false
},
reload: {
type: Boolean,
default: false
},
disableScroll: {
type: Boolean,
default: false
},
optsWatch: {
type: Boolean,
default: true
},
onzoom: {
type: Boolean,
default: false
},
ontap: {
type: Boolean,
default: true
},
ontouch: {
type: Boolean,
default: false
},
onmouse: {
type: Boolean,
default: true
},
onmovetip: {
type: Boolean,
default: false
},
echartsH5: {
type: Boolean,
default: false
},
echartsApp: {
type: Boolean,
default: false
},
tooltipShow: {
type: Boolean,
default: true
},
tooltipFormat: {
type: String,
default: undefined
},
tooltipCustom: {
type: Object,
default: undefined
},
startDate: {
type: String,
default: undefined
},
endDate: {
type: String,
default: undefined
},
textEnum: {
type: Array,
default () {
return []
}
},
groupEnum: {
type: Array,
default () {
return []
}
},
pageScrollTop: {
type: Number,
default: 0
},
directory: {
type: String,
default: '/'
},
tapLegend: {
type: Boolean,
default: true
},
menus: {
type: Array,
default () {
return []
}
}
},
data() {
return {
cid: 'uchartsid',
inWx: false,
inAli: false,
inTt: false,
inBd: false,
inH5: false,
inApp: false,
inWin: false,
type2d: true,
disScroll: false,
openmouse: false,
pixel: 1,
cWidth: 375,
cHeight: 250,
showchart: false,
echarts: false,
echartsResize:{
state:false
},
uchartsOpts: {},
echartsOpts: {},
drawData:{},
lastDrawTime:null,
};
},
created(){
this.cid = this.canvasId
if (this.canvasId == 'uchartsid' || this.canvasId == '') {
let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
let len = t.length
let id = ''
for (let i = 0; i < 32; i++) {
id += t.charAt(Math.floor(Math.random() * len))
}
this.cid = id
}
const systemInfo = uni.getSystemInfoSync()
if(systemInfo.platform === 'windows' || systemInfo.platform === 'mac'){
this.inWin = true;
}
// #ifdef MP-WEIXIN
this.inWx = true;
if (this.canvas2d === false || systemInfo.platform === 'windows' || systemInfo.platform === 'mac') {
this.type2d = false;
}else{
this.type2d = true;
this.pixel = systemInfo.pixelRatio;
}
// #endif
//非微信小程序端强制关闭canvas2d模式
// #ifndef MP-WEIXIN
this.type2d = false;
// #endif
// #ifdef MP-TOUTIAO || MP-LARK || MP-ALIPAY
this.type2d = this.canvas2d;
// #endif
// #ifdef MP-ALIPAY
this.inAli = true;
this.pixel = systemInfo.pixelRatio;
// #endif
// #ifdef MP-BAIDU
this.inBd = true;
// #endif
// #ifdef MP-TOUTIAO
this.inTt = true;
// #endif
this.disScroll = this.disableScroll;
},
mounted() {
// #ifdef APP-VUE
this.inApp = true;
if (this.echartsApp === true) {
this.echarts = true;
this.openmouse = false;
}
// #endif
// #ifdef APP-NVUE
this.inApp = true;
this.mixinDatacomLoading = false
this.mixinDatacomErrorMessage = "暂不支持NVUE"
// #endif
// #ifdef H5
this.inH5 = true;
if(this.inWin === true){
this.openmouse = this.onmouse;
}
if (this.echartsH5 === true) {
this.echarts = true;
}
// #endif
this.$nextTick(()=>{
this.beforeInit();
})
// #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || APP-VUE
const time = this.inH5 ? 500 : 200;
const _this = this;
uni.onWindowResize(
debounce(function(res) {
if (_this.mixinDatacomLoading == true) {
return;
}
let errmsg = _this.mixinDatacomErrorMessage;
if (errmsg !== null && errmsg !== 'null' && errmsg !== '') {
return;
}
if (_this.echarts) {
_this.echartsResize.state = !_this.echartsResize.state;
} else {
_this.resizeHandler();
}
}, time)
);
// #endif
},
destroyed(){
if(this.echarts === true){
delete cfe.option[this.cid]
delete cfe.instance[this.cid]
}else{
delete cfu.option[this.cid]
delete cfu.instance[this.cid]
}
// #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
uni.offWindowResize(()=>{})
// #endif
},
watch: {
chartDataProps: {
handler(val, oldval) {
if (typeof val === 'object') {
if (JSON.stringify(val) !== JSON.stringify(oldval)) {
this._clearChart();
if (val.series && val.series.length > 0) {
this.beforeInit();
}else{
this.mixinDatacomLoading = true;
this.showchart = false;
this.mixinDatacomErrorMessage = null;
}
}
} else {
this.mixinDatacomLoading = false;
this._clearChart();
this.showchart = false;
this.mixinDatacomErrorMessage = '参数错误:chartData数据类型错误';
}
},
immediate: false,
deep: true
},
localdata:{
handler(val, oldval) {
if (JSON.stringify(val) !== JSON.stringify(oldval)) {
if (val.length > 0) {
this.beforeInit();
}else{
this.mixinDatacomLoading = true;
this._clearChart();
this.showchart = false;
this.mixinDatacomErrorMessage = null;
}
}
},
immediate: false,
deep: true
},
optsProps: {
handler(val, oldval) {
if (typeof val === 'object') {
if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === false && this.optsWatch == true) {
this.checkData(this.drawData);
}
} else {
this.mixinDatacomLoading = false;
this._clearChart();
this.showchart = false;
this.mixinDatacomErrorMessage = '参数错误:opts数据类型错误';
}
},
immediate: false,
deep: true
},
eoptsProps: {
handler(val, oldval) {
if (typeof val === 'object') {
if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === true) {
this.checkData(this.drawData);
}
} else {
this.mixinDatacomLoading = false;
this.showchart = false;
this.mixinDatacomErrorMessage = '参数错误:eopts数据类型错误';
}
},
immediate: false,
deep: true
},
reshow(val, oldval) {
if (val === true && this.mixinDatacomLoading === false) {
setTimeout(() => {
this.mixinDatacomErrorMessage = null;
this.echartsResize.state = !this.echartsResize.state;
this.checkData(this.drawData);
}, 200);
}
},
reload(val, oldval) {
if (val === true) {
this.showchart = false;
this.mixinDatacomErrorMessage = null;
this.reloading();
}
},
mixinDatacomErrorMessage(val, oldval) {
if (val) {
this.emitMsg({name: 'error', params: {type:"error", errorShow: this.errorShow, msg: val, id: this.cid}});
if(this.errorShow){
console.log('[秋云图表组件]' + val);
}
}
},
errorMessage(val, oldval) {
if (val && this.errorShow && val !== null && val !== 'null' && val !== '') {
this.showchart = false;
this.mixinDatacomLoading = false;
this.mixinDatacomErrorMessage = val;
} else {
this.showchart = false;
this.mixinDatacomErrorMessage = null;
this.reloading();
}
}
},
computed: {
optsProps() {
return JSON.parse(JSON.stringify(this.opts));
},
eoptsProps() {
return JSON.parse(JSON.stringify(this.eopts));
},
chartDataProps() {
return JSON.parse(JSON.stringify(this.chartData));
},
},
methods: {
beforeInit(){
this.mixinDatacomErrorMessage = null;
if (typeof this.chartData === 'object' && this.chartData != null && this.chartData.series !== undefined && this.chartData.series.length > 0) {
//拷贝一下chartData,为了opts变更后统一数据来源
this.drawData = deepCloneAssign({}, this.chartData);
this.mixinDatacomLoading = false;
this.showchart = true;
this.checkData(this.chartData);
}else if(this.localdata.length>0){
this.mixinDatacomLoading = false;
this.showchart = true;
this.localdataInit(this.localdata);
}else if(this.collection !== ''){
this.mixinDatacomLoading = false;
this.getCloudData();
}else{
this.mixinDatacomLoading = true;
}
},
localdataInit(resdata){
//替换enum类型为正确的描述
if(this.groupEnum.length>0){
for (let i = 0; i < resdata.length; i++) {
for (let j = 0; j < this.groupEnum.length; j++) {
if(resdata[i].group === this.groupEnum[j].value){
resdata[i].group = this.groupEnum[j].text
}
}
}
}
if(this.textEnum.length>0){
for (let i = 0; i < resdata.length; i++) {
for (let j = 0; j < this.textEnum.length; j++) {
if(resdata[i].text === this.textEnum[j].value){
resdata[i].text = this.textEnum[j].text
}
}
}
}
let needCategories = false;
let tmpData = {categories:[], series:[]}
let tmpcategories = []
let tmpseries = [];
//拼接categories
if(this.echarts === true){
needCategories = cfe.categories.includes(this.type)
}else{
needCategories = cfu.categories.includes(this.type)
}
if(needCategories === true){
//如果props中的chartData带有categories,则优先使用chartData的categories
if(this.chartData && this.chartData.categories && this.chartData.categories.length>0){
tmpcategories = this.chartData.categories
}else{
//如果是日期类型的数据,不管是本地数据还是云数据,都按起止日期自动拼接categories
if(this.startDate && this.endDate){
let idate = new Date(this.startDate)
let edate = new Date(this.endDate)
while (idate <= edate) {
tmpcategories.push(getFormatDate(idate))
idate = idate.setDate(idate.getDate() + 1)
idate = new Date(idate)
}
//否则从结果中去重并拼接categories
}else{
let tempckey = {};
resdata.map(function(item, index) {
if (item.text != undefined && !tempckey[item.text]) {
tmpcategories.push(item.text)
tempckey[item.text] = true
}
});
}
}
tmpData.categories = tmpcategories
}
//拼接series
let tempskey = {};
resdata.map(function(item, index) {
if (item.group != undefined && !tempskey[item.group]) {
tmpseries.push({ name: item.group, data: [] });
tempskey[item.group] = true;
}
});
//如果没有获取到分组名称(可能是带categories的数据,也可能是不带的饼图类)
if (tmpseries.length == 0) {
tmpseries = [{ name: '默认分组', data: [] }];
//如果是需要categories的图表类型
if(needCategories === true){
for (let j = 0; j < tmpcategories.length; j++) {
let seriesdata = 0;
for (let i = 0; i < resdata.length; i++) {
if (resdata[i].text == tmpcategories[j]) {
seriesdata = resdata[i].value;
}
}
tmpseries[0].data.push(seriesdata);
}
//如果是饼图类的图表类型
}else{
for (let i = 0; i < resdata.length; i++) {
tmpseries[0].data.push({"name": resdata[i].text,"value": resdata[i].value});
}
}
//如果有分组名
} else {
for (let k = 0; k < tmpseries.length; k++) {
//如果有categories
if (tmpcategories.length > 0) {
for (let j = 0; j < tmpcategories.length; j++) {
let seriesdata = 0;
for (let i = 0; i < resdata.length; i++) {
if (tmpseries[k].name == resdata[i].group && resdata[i].text == tmpcategories[j]) {
seriesdata = resdata[i].value;
}
}
tmpseries[k].data.push(seriesdata);
}
//如果传了group而没有传text,即没有categories(正常情况下这种数据是不符合数据要求规范的)
} else {
for (let i = 0; i < resdata.length; i++) {
if (tmpseries[k].name == resdata[i].group) {
tmpseries[k].data.push(resdata[i].value);
}
}
}
}
}
tmpData.series = tmpseries
//拷贝一下chartData,为了opts变更后统一数据来源
this.drawData = deepCloneAssign({}, tmpData);
this.checkData(tmpData)
},
reloading() {
if(this.errorReload === false){
return;
}
this.showchart = false;
this.mixinDatacomErrorMessage = null;
if (this.collection !== '') {
this.mixinDatacomLoading = false;
this.onMixinDatacomPropsChange(true);
} else {
this.beforeInit();
}
},
checkData(anyData) {
let cid = this.cid
//复位opts或eopts
if(this.echarts === true){
cfe.option[cid] = deepCloneAssign({}, this.eopts);
cfe.option[cid].id = cid;
cfe.option[cid].type = this.type;
}else{
if (this.type && cfu.type.includes(this.type)) {
cfu.option[cid] = deepCloneAssign({}, cfu[this.type], this.opts);
cfu.option[cid].canvasId = cid;
} else {
this.mixinDatacomLoading = false;
this.showchart = false;
this.mixinDatacomErrorMessage = '参数错误:props参数中type类型不正确';
}
}
//挂载categories和series
let newData = deepCloneAssign({}, anyData);
if (newData.series !== undefined && newData.series.length > 0) {
this.mixinDatacomErrorMessage = null;
if (this.echarts === true) {
cfe.option[cid].chartData = newData;
this.$nextTick(()=>{
this.init()
})
}else{
cfu.option[cid].categories = newData.categories;
cfu.option[cid].series = newData.series;
this.$nextTick(()=>{
this.init()
})
}
}
},
resizeHandler() {
//渲染防抖
let currTime = Date.now();
let lastDrawTime = this.lastDrawTime?this.lastDrawTime:currTime-3000;
let duration = currTime - lastDrawTime;
if (duration < 1000) return;
let chartdom = uni
.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
.select('#ChartBoxId'+this.cid)
.boundingClientRect(data => {
this.showchart = true;
if (data.width > 0 && data.height > 0) {
if (data.width !== this.cWidth || data.height !== this.cHeight) {
this.checkData(this.drawData)
}
}
})
.exec();
},
getCloudData() {
if (this.mixinDatacomLoading == true) {
return;
}
this.mixinDatacomLoading = true;
this.mixinDatacomGet()
.then(res => {
this.mixinDatacomResData = res.result.data;
this.localdataInit(this.mixinDatacomResData);
})
.catch(err => {
this.mixinDatacomLoading = false;
this.showchart = false;
this.mixinDatacomErrorMessage = '请求错误:' + err;
});
},
onMixinDatacomPropsChange(needReset, changed) {
if (needReset == true && this.collection !== '') {
this.showchart = false;
this.mixinDatacomErrorMessage = null;
this._clearChart();
this.getCloudData();
}
},
_clearChart() {
let cid = this.cid
if (this.echarts !== true && cfu.option[cid] && cfu.option[cid].context) {
const ctx = cfu.option[cid].context;
if(typeof ctx === "object" && !!!cfu.option[cid].update){
ctx.clearRect(0, 0, this.cWidth*this.pixel, this.cHeight*this.pixel);
ctx.draw();
}
}
},
init() {
let cid = this.cid
let chartdom = uni
.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
.select('#ChartBoxId'+cid)
.boundingClientRect(data => {
if (data.width > 0 && data.height > 0) {
this.mixinDatacomLoading = false;
this.showchart = true;
this.lastDrawTime = Date.now();
this.cWidth = data.width;
this.cHeight = data.height;
if(this.echarts !== true){
cfu.option[cid].background = this.background == 'rgba(0,0,0,0)' ? '#FFFFFF' : this.background;
cfu.option[cid].canvas2d = this.type2d;
cfu.option[cid].pixelRatio = this.pixel;
cfu.option[cid].animation = this.animation;
cfu.option[cid].width = data.width * this.pixel;
cfu.option[cid].height = data.height * this.pixel;
cfu.option[cid].onzoom = this.onzoom;
cfu.option[cid].ontap = this.ontap;
cfu.option[cid].ontouch = this.ontouch;
cfu.option[cid].onmouse = this.openmouse;
cfu.option[cid].onmovetip = this.onmovetip;
cfu.option[cid].tooltipShow = this.tooltipShow;
cfu.option[cid].tooltipFormat = this.tooltipFormat;
cfu.option[cid].tooltipCustom = this.tooltipCustom;
cfu.option[cid].inScrollView = this.inScrollView;
cfu.option[cid].lastDrawTime = this.lastDrawTime;
cfu.option[cid].tapLegend = this.tapLegend;
}
//如果是H5或者App端,采用renderjs渲染图表
if (this.inH5 || this.inApp) {
if (this.echarts == true) {
cfe.option[cid].ontap = this.ontap;
cfe.option[cid].onmouse = this.openmouse;
cfe.option[cid].tooltipShow = this.tooltipShow;
cfe.option[cid].tooltipFormat = this.tooltipFormat;
cfe.option[cid].tooltipCustom = this.tooltipCustom;
cfe.option[cid].lastDrawTime = this.lastDrawTime;
this.echartsOpts = deepCloneAssign({}, cfe.option[cid]);
} else {
cfu.option[cid].rotateLock = cfu.option[cid].rotate;
this.uchartsOpts = deepCloneAssign({}, cfu.option[cid]);
}
//如果是小程序端,采用uCharts渲染
} else {
cfu.option[cid] = formatterAssign(cfu.option[cid],cfu.formatter)
this.mixinDatacomErrorMessage = null;
this.mixinDatacomLoading = false;
this.showchart = true;
this.$nextTick(()=>{
if (this.type2d === true) {
const query = uni.createSelectorQuery().in(this)
query
.select('#' + cid)
.fields({ node: true, size: true })
.exec(res => {
if (res[0]) {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
cfu.option[cid].context = ctx;
cfu.option[cid].rotateLock = cfu.option[cid].rotate;
if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){
this._updataUChart(cid)
}else{
canvas.width = data.width * this.pixel;
canvas.height = data.height * this.pixel;
canvas._width = data.width * this.pixel;
canvas._height = data.height * this.pixel;
setTimeout(()=>{
cfu.option[cid].context.restore();
cfu.option[cid].context.save();
this._newChart(cid)
},100)
}
} else {
this.showchart = false;
this.mixinDatacomErrorMessage = '参数错误:开启2d模式后,未获取到dom节点,canvas-id:' + cid;
}
});
} else {
if(this.inAli){
cfu.option[cid].rotateLock = cfu.option[cid].rotate;
}
cfu.option[cid].context = uni.createCanvasContext(cid, this);
if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){
this._updataUChart(cid)
}else{
setTimeout(()=>{
cfu.option[cid].context.restore();
cfu.option[cid].context.save();
this._newChart(cid)
},100)
}
}
})
}
} else {
this.mixinDatacomLoading = false;
this.showchart = false;
if (this.reshow == true) {
this.mixinDatacomErrorMessage = '布局错误:未获取到父元素宽高尺寸!canvas-id:' + cid;
}
}
})
.exec();
},
saveImage(){
uni.canvasToTempFilePath({
canvasId: this.cid,
success: res=>{
//#ifdef H5
var a = document.createElement("a");
a.href = res.tempFilePath;
a.download = this.cid;
a.target = '_blank'
a.click();
//#endif
//#ifndef H5
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
uni.showToast({
title: '保存成功',
duration: 2000
});
}
});
//#endif
}
},this);
},
getImage(){
if(this.type2d == false){
uni.canvasToTempFilePath({
canvasId: this.cid,
success: res=>{
this.emitMsg({name: 'getImage', params: {type:"getImage", base64: res.tempFilePath}});
}
},this);
}else{
const query = uni.createSelectorQuery().in(this)
query
.select('#' + this.cid)
.fields({ node: true, size: true })
.exec(res => {
if (res[0]) {
const canvas = res[0].node;
this.emitMsg({name: 'getImage', params: {type:"getImage", base64: canvas.toDataURL('image/png')}});
}
});
}
},
// #ifndef APP-VUE || H5
_newChart(cid) {
if (this.mixinDatacomLoading == true) {
return;
}
this.showchart = true;
cfu.instance[cid] = new uCharts(cfu.option[cid]);
cfu.instance[cid].addEventListener('renderComplete', () => {
this.emitMsg({name: 'complete', params: {type:"complete", complete: true, id: cid, opts: cfu.instance[cid].opts}});
cfu.instance[cid].delEventListener('renderComplete')
});
cfu.instance[cid].addEventListener('scrollLeft', () => {
this.emitMsg({name: 'scrollLeft', params: {type:"scrollLeft", scrollLeft: true, id: cid, opts: cfu.instance[cid].opts}});
});
cfu.instance[cid].addEventListener('scrollRight', () => {
this.emitMsg({name: 'scrollRight', params: {type:"scrollRight", scrollRight: true, id: cid, opts: cfu.instance[cid].opts}});
});
},
_updataUChart(cid) {
cfu.instance[cid].updateData(cfu.option[cid])
},
_tooltipDefault(item, category, index, opts) {
if (category) {
let data = item.data
if(typeof item.data === "object"){
data = item.data.value
}
return category + ' ' + item.name + ':' + data;
} else {
if (item.properties && item.properties.name) {
return item.properties.name;
} else {
return item.name + ':' + item.data;
}
}
},
_showTooltip(e) {
let cid = this.cid
let tc = cfu.option[cid].tooltipCustom
if (tc && tc !== undefined && tc !== null) {
let offset = undefined;
if (tc.x >= 0 && tc.y >= 0) {
offset = { x: tc.x, y: tc.y + 10 };
}
cfu.instance[cid].showToolTip(e, {
index: tc.index,
offset: offset,
textList: tc.textList,
formatter: (item, category, index, opts) => {
if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {
return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);
} else {
return this._tooltipDefault(item, category, index, opts);
}
}
});
} else {
cfu.instance[cid].showToolTip(e, {
formatter: (item, category, index, opts) => {
if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {
return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);
} else {
return this._tooltipDefault(item, category, index, opts);
}
}
});
}
},
_tap(e,move) {
let cid = this.cid
let currentIndex = null;
let legendIndex = null;
if (this.inScrollView === true || this.inAli) {
let chartdom = uni
.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
.select('#ChartBoxId'+cid)
// #endif
// #ifdef MP-ALIPAY
.select('#'+this.cid)
// #endif
.boundingClientRect(data => {
e.changedTouches=[];
if (this.inAli) {
e.changedTouches.unshift({ x: e.detail.clientX - data.left, y: e.detail.clientY - data.top});
}else{
e.changedTouches.unshift({ x: e.detail.x - data.left, y: e.detail.y - data.top - this.pageScrollTop});
}
if(move){
if (this.tooltipShow === true) {
this._showTooltip(e);
}
}else{
currentIndex = cfu.instance[cid].getCurrentDataIndex(e);
legendIndex = cfu.instance[cid].getLegendDataIndex(e);
if(this.tapLegend === true){
cfu.instance[cid].touchLegend(e);
}
if (this.tooltipShow === true) {
this._showTooltip(e);
}
this.emitMsg({name: 'getIndex', params: { type:"getIndex", event:{ x: e.detail.x - data.left, y: e.detail.y - data.top }, currentIndex: currentIndex, legendIndex: legendIndex, id: cid, opts: cfu.instance[cid].opts}});
}
})
.exec();
} else {
if(move){
if (this.tooltipShow === true) {
this._showTooltip(e);
}
}else{
e.changedTouches=[];
e.changedTouches.unshift({ x: e.detail.x - e.currentTarget.offsetLeft, y: e.detail.y - e.currentTarget.offsetTop });
currentIndex = cfu.instance[cid].getCurrentDataIndex(e);
legendIndex = cfu.instance[cid].getLegendDataIndex(e);
if(this.tapLegend === true){
cfu.instance[cid].touchLegend(e);
}
if (this.tooltipShow === true) {
this._showTooltip(e);
}
this.emitMsg({name: 'getIndex', params: {type:"getIndex", event:{ x: e.detail.x, y: e.detail.y - e.currentTarget.offsetTop }, currentIndex: currentIndex, legendIndex: legendIndex, id: cid, opts: cfu.instance[cid].opts}});
}
}
},
_touchStart(e) {
let cid = this.cid
lastMoveTime=Date.now();
if(cfu.option[cid].enableScroll === true && e.touches.length == 1){
cfu.instance[cid].scrollStart(e);
}
this.emitMsg({name:'getTouchStart', params:{type:"touchStart", event:e.changedTouches[0], id:cid, opts: cfu.instance[cid].opts}});
},
_touchMove(e) {
let cid = this.cid
let currMoveTime = Date.now();
let duration = currMoveTime - lastMoveTime;
let touchMoveLimit = cfu.option[cid].touchMoveLimit || 24;
if (duration < Math.floor(1000 / touchMoveLimit)) return;//每秒60帧
lastMoveTime = currMoveTime;
if(cfu.option[cid].enableScroll === true && e.changedTouches.length == 1){
cfu.instance[cid].scroll(e);
}
if(this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true){
this._tap(e,true)
}
if(this.ontouch === true && cfu.option[cid].enableScroll === true && this.onzoom === true && e.changedTouches.length == 2){
cfu.instance[cid].dobuleZoom(e);
}
this.emitMsg({name: 'getTouchMove', params: {type:"touchMove", event:e.changedTouches[0], id: cid, opts: cfu.instance[cid].opts}});
},
_touchEnd(e) {
let cid = this.cid
if(cfu.option[cid].enableScroll === true && e.touches.length == 0){
cfu.instance[cid].scrollEnd(e);
}
this.emitMsg({name:'getTouchEnd', params:{type:"touchEnd", event:e.changedTouches[0], id:cid, opts: cfu.instance[cid].opts}});
if(this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true){
this._tap(e,true)
}
},
// #endif
_error(e) {
this.mixinDatacomErrorMessage = e.detail.errMsg;
},
emitMsg(msg) {
this.$emit(msg.name, msg.params);
},
getRenderType() {
//防止如果开启echarts且父元素为v-if的情况renderjs监听不到prop变化的问题
if(this.echarts===true && this.mixinDatacomLoading===false){
this.beforeInit()
}
},
toJSON(){
return this
}
}
};
</script>
<!-- #ifdef APP-VUE || H5 -->
<script module="rdcharts" lang="renderjs">
import uChartsRD from '../../js_sdk/u-charts/u-charts.js';
import cfu from '../../js_sdk/u-charts/config-ucharts.js';
import cfe from '../../js_sdk/u-charts/config-echarts.js';
var that = {};
var rootdom = null;
function rddeepCloneAssign(origin = {}, ...args) {
for (let i in args) {
for (let key in args[i]) {
if (args[i].hasOwnProperty(key)) {
origin[key] = args[i][key] && typeof args[i][key] === 'object' ? rddeepCloneAssign(Array.isArray(args[i][key]) ? [] : {}, origin[key], args[i][key]) : args[i][key];
}
}
}
return origin;
}
function rdformatterAssign(args,formatter) {
for (let key in args) {
if(args.hasOwnProperty(key) && args[key] !== null && typeof args[key] === 'object'){
rdformatterAssign(args[key],formatter)
}else if(key === 'format' && typeof args[key] === 'string'){
args['formatter'] = formatter[args[key]] ? formatter[args[key]] : undefined;
}
}
return args;
}
export default {
data() {
return {
rid:null
}
},
mounted() {
rootdom = {top:0,left:0}
// #ifdef H5
let dm = document.querySelectorAll('uni-main')[0]
if(dm === undefined){
dm = document.querySelectorAll('uni-page-wrapper')[0]
}
rootdom = {top:dm.offsetTop,left:dm.offsetLeft}
// #endif
setTimeout(()=>{
if(this.rid === null){
this.$ownerInstance && this.$ownerInstance.callMethod('getRenderType')
}
},200)
},
destroyed(){
delete cfu.option[this.rid]
delete cfu.instance[this.rid]
delete cfe.option[this.rid]
delete cfe.instance[this.rid]
},
methods: {
//==============以下是ECharts的方法====================
ecinit(newVal, oldVal, owner, instance){
let cid = JSON.stringify(newVal.id)
this.rid = cid
that[cid] = this.$ownerInstance || instance
let eopts = JSON.parse(JSON.stringify(newVal))
let type = eopts.type;
//载入并覆盖默认配置
if (type && cfe.type.includes(type)) {
cfe.option[cid] = rddeepCloneAssign({}, cfe[type], eopts);
}else{
cfe.option[cid] = rddeepCloneAssign({}, eopts);
}
let newData = eopts.chartData;
if(newData){
//挂载categories和series
if(cfe.option[cid].xAxis && cfe.option[cid].xAxis.type && cfe.option[cid].xAxis.type === 'category'){
cfe.option[cid].xAxis.data = newData.categories
}
if(cfe.option[cid].yAxis && cfe.option[cid].yAxis.type && cfe.option[cid].yAxis.type === 'category'){
cfe.option[cid].yAxis.data = newData.categories
}
cfe.option[cid].series = []
for (var i = 0; i < newData.series.length; i++) {
cfe.option[cid].seriesTemplate = cfe.option[cid].seriesTemplate ? cfe.option[cid].seriesTemplate : {}
let Template = rddeepCloneAssign({},cfe.option[cid].seriesTemplate,newData.series[i])
cfe.option[cid].series.push(Template)
}
}
if (typeof window.echarts === 'object') {
this.newEChart()
}else{
const script = document.createElement('script')
// #ifdef APP-VUE
script.src = './uni_modules/qiun-data-charts/static/app-plus/echarts.min.js'
// #endif
// #ifdef H5
const rooturl = window.location.origin
const directory = instance.getDataset().directory
script.src = rooturl + directory + 'uni_modules/qiun-data-charts/static/h5/echarts.min.js'
// #endif
script.onload = this.newEChart
document.head.appendChild(script)
}
},
ecresize(newVal, oldVal, owner, instance){
if(cfe.instance[this.rid]){
cfe.instance[this.rid].resize()
}
},
newEChart(){
let cid = this.rid
if(cfe.instance[cid] === undefined){
cfe.instance[cid] = echarts.init(that[cid].$el.children[0])
//ontap开启后才触发click事件
if(cfe.option[cid].ontap === true){
cfe.instance[cid].on('click', resdata => {
let event = JSON.parse(JSON.stringify({
x:resdata.event.offsetX,y:resdata.event.offsetY
}))
that[cid].callMethod('emitMsg',{name:"getIndex", params:{type:"getIndex", event:event, currentIndex:resdata.dataIndex, value:resdata.data, seriesName: resdata.seriesName,id:cid}})
})
// 增加ECharts的highlight消息,实现按下移动返回索引功能。add by onefish 创建于 2021-12-11 09:50
cfe.instance[cid].on('highlight', resdata => {
that[cid].callMethod('emitMsg',{name:"getHighlight", params:{type:"highlight", res:resdata, id:cid}})
})
}
this.updataEChart(cid,cfe.option[cid])
}else{
this.updataEChart(cid,cfe.option[cid])
}
},
updataEChart(cid,option){
//替换option内format属性为formatter的预定义方法
option = rdformatterAssign(option,cfe.formatter)
if(option.tooltip){
option.tooltip.show = option.tooltipShow?true:false;
option.tooltip.position = this.tooltipPosition()
//tooltipFormat方法,替换组件的tooltipFormat为config-echarts.js内对应的方法
if (typeof option.tooltipFormat === 'string' && cfe.formatter[option.tooltipFormat]) {
option.tooltip.formatter = option.tooltip.formatter ? option.tooltip.formatter : cfe.formatter[option.tooltipFormat]
}
}
// 颜色渐变添加的方法
if (option.series) {
for (let i in option.series) {
let linearGradient = option.series[i].linearGradient
if (linearGradient) {
option.series[i].color = new echarts.graphic.LinearGradient(linearGradient[0],linearGradient[1],linearGradient[2],linearGradient[3],linearGradient[4])
}
}
}
cfe.instance[cid].setOption(option, option.notMerge)
cfe.instance[cid].on('finished', function(){
that[cid].callMethod('emitMsg',{name:"complete",params:{type:"complete",complete:true,id:cid}})
if(cfe.instance[cid]){
cfe.instance[cid].off('finished')
}
});
//修复init初始化实例获取宽高不正确问题
if(
typeof that[cid].$el.children[0].clientWidth != 'undefined' &&
(
Math.abs( that[cid].$el.children[0].clientWidth - cfe.instance[cid].getWidth() )>3 ||
Math.abs( that[cid].$el.children[0].clientHeight - cfe.instance[cid].getHeight() )>3
)
){this.ecresize();}
},
tooltipPosition(){
return (point, params, dom, rect, size) => {
let x = point[0]
let y = point[1]
let viewWidth = size.viewSize[0]
let viewHeight = size.viewSize[1]
let boxWidth = size.contentSize[0]
let boxHeight = size.contentSize[1]
let posX = x + 30
let posY = y + 30
if (posX + boxWidth > viewWidth) {
posX = x - boxWidth - 30
}
if (posY + boxHeight > viewHeight) {
posY = y - boxHeight - 30
}
return [posX, posY]
}
},
//==============以下是uCharts的方法====================
ucinit(newVal, oldVal, owner, instance){
if(JSON.stringify(newVal) == JSON.stringify(oldVal)){
return;
}
if(!newVal.canvasId){
return;
}
let cid = JSON.parse(JSON.stringify(newVal.canvasId))
this.rid = cid
that[cid] = this.$ownerInstance || instance
cfu.option[cid] = JSON.parse(JSON.stringify(newVal))
cfu.option[cid] = rdformatterAssign(cfu.option[cid],cfu.formatter)
let canvasdom = document.getElementById(cid)
if(canvasdom && canvasdom.children[0]){
cfu.option[cid].context = canvasdom.children[0].getContext("2d")
if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){
this.updataUChart()
}else{
setTimeout(()=>{
cfu.option[cid].context.restore();
cfu.option[cid].context.save();
this.newUChart()
},100)
}
}
},
newUChart() {
let cid = this.rid
cfu.instance[cid] = new uChartsRD(cfu.option[cid])
cfu.instance[cid].addEventListener('renderComplete', () => {
that[cid].callMethod('emitMsg',{name:"complete",params:{type:"complete",complete:true,id:cid, opts: cfu.instance[cid].opts}})
cfu.instance[cid].delEventListener('renderComplete')
});
cfu.instance[cid].addEventListener('scrollLeft', () => {
that[cid].callMethod('emitMsg',{name:"scrollLeft",params:{type:"scrollLeft",scrollLeft:true,id:cid, opts: cfu.instance[cid].opts}})
});
cfu.instance[cid].addEventListener('scrollRight', () => {
that[cid].callMethod('emitMsg',{name:"scrollRight",params:{type:"scrollRight",scrollRight:true,id:cid, opts: cfu.instance[cid].opts}})
});
},
updataUChart() {
let cid = this.rid
cfu.instance[cid].updateData(cfu.option[cid])
},
tooltipDefault(item, category, index, opts) {
if (category) {
let data = item.data
if(typeof item.data === "object"){
data = item.data.value
}
return category + ' ' + item.name + ':' + data;
} else {
if (item.properties && item.properties.name) {
return item.properties.name ;
} else {
return item.name + ':' + item.data;
}
}
},
showTooltip(e,cid) {
let tc = cfu.option[cid].tooltipCustom
if (tc && tc !== undefined && tc !== null) {
let offset = undefined;
if (tc.x >= 0 && tc.y >= 0) {
offset = { x: tc.x, y: tc.y + 10 };
}
cfu.instance[cid].showToolTip(e, {
index: tc.index,
offset: offset,
textList: tc.textList,
formatter: (item, category, index, opts) => {
if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {
return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);
} else {
return this.tooltipDefault(item, category, index, opts);
}
}
});
} else {
cfu.instance[cid].showToolTip(e, {
formatter: (item, category, index, opts) => {
if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {
return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);
} else {
return this.tooltipDefault(item, category, index, opts);
}
}
});
}
},
tap(e) {
let cid = this.rid
let ontap = cfu.option[cid].ontap
let tooltipShow = cfu.option[cid].tooltipShow
let tapLegend = cfu.option[cid].tapLegend
if(ontap == false) return;
let currentIndex=null
let legendIndex=null
let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
let tmpe = {}
if(e.detail.x){//tap或者click的事件
tmpe = { x: e.detail.x - rchartdom.left, y:e.detail.y - rchartdom.top + rootdom.top}
}else{//mouse的事件
tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}
}
e.changedTouches = [];
e.changedTouches.unshift(tmpe)
currentIndex=cfu.instance[cid].getCurrentDataIndex(e)
legendIndex=cfu.instance[cid].getLegendDataIndex(e)
if(tapLegend === true){
cfu.instance[cid].touchLegend(e);
}
if(tooltipShow==true){
this.showTooltip(e,cid)
}
that[cid].callMethod('emitMsg',{name:"getIndex",params:{type:"getIndex",event:tmpe,currentIndex:currentIndex,legendIndex:legendIndex,id:cid, opts: cfu.instance[cid].opts}})
},
touchStart(e) {
let cid = this.rid
let ontouch = cfu.option[cid].ontouch
if(ontouch == false) return;
if(cfu.option[cid].enableScroll === true && e.touches.length == 1){
cfu.instance[cid].scrollStart(e);
}
that[cid].callMethod('emitMsg',{name:"getTouchStart",params:{type:"touchStart",event:e.changedTouches[0],id:cid, opts: cfu.instance[cid].opts}})
},
touchMove(e) {
let cid = this.rid
let ontouch = cfu.option[cid].ontouch
if(ontouch == false) return;
if(cfu.option[cid].enableScroll === true && e.changedTouches.length == 1){
cfu.instance[cid].scroll(e);
}
if(cfu.option[cid].ontap === true && cfu.option[cid].enableScroll === false && cfu.option[cid].onmovetip === true){
let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
let tmpe = { x: e.changedTouches[0].clientX - rchartdom.left, y:e.changedTouches[0].clientY - rchartdom.top + rootdom.top}
e.changedTouches.unshift(tmpe)
if(cfu.option[cid].tooltipShow === true){
this.showTooltip(e,cid)
}
}
if(ontouch === true && cfu.option[cid].enableScroll === true && cfu.option[cid].onzoom === true && e.changedTouches.length == 2){
cfu.instance[cid].dobuleZoom(e);
}
that[cid].callMethod('emitMsg',{name:"getTouchMove",params:{type:"touchMove",event:e.changedTouches[0],id:cid, opts: cfu.instance[cid].opts}})
},
touchEnd(e) {
let cid = this.rid
let ontouch = cfu.option[cid].ontouch
if(ontouch == false) return;
if(cfu.option[cid].enableScroll === true && e.touches.length == 0){
cfu.instance[cid].scrollEnd(e);
}
that[cid].callMethod('emitMsg',{name:"getTouchEnd",params:{type:"touchEnd",event:e.changedTouches[0],id:cid, opts: cfu.instance[cid].opts}})
},
mouseDown(e) {
let cid = this.rid
let onmouse = cfu.option[cid].onmouse
if(onmouse == false) return;
let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
let tmpe = {}
tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}
e.changedTouches = [];
e.changedTouches.unshift(tmpe)
cfu.instance[cid].scrollStart(e)
cfu.option[cid].mousedown=true;
that[cid].callMethod('emitMsg',{name:"getTouchStart",params:{type:"mouseDown",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})
},
mouseMove(e) {
let cid = this.rid
let onmouse = cfu.option[cid].onmouse
let tooltipShow = cfu.option[cid].tooltipShow
if(onmouse == false) return;
let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
let tmpe = {}
tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}
e.changedTouches = [];
e.changedTouches.unshift(tmpe)
if(cfu.option[cid].mousedown){
cfu.instance[cid].scroll(e)
that[cid].callMethod('emitMsg',{name:"getTouchMove",params:{type:"mouseMove",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})
}else if(cfu.instance[cid]){
if(tooltipShow==true){
this.showTooltip(e,cid)
}
}
},
mouseUp(e) {
let cid = this.rid
let onmouse = cfu.option[cid].onmouse
if(onmouse == false) return;
let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
let tmpe = {}
tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}
e.changedTouches = [];
e.changedTouches.unshift(tmpe)
cfu.instance[cid].scrollEnd(e)
cfu.option[cid].mousedown=false;
that[cid].callMethod('emitMsg',{name:"getTouchEnd",params:{type:"mouseUp",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})
},
}
}
</script>
<!-- #endif -->
<style scoped>
.chartsview {
width: 100%;
height: 100%;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
</style>
<template>
<view class="chartsview">
<view class="charts-error"></view>
<view class="charts-font">{{errorMessage==null?'请点击重试':errorMessage}}</view>
</view>
</template>
<script>
export default {
name: 'qiun-error',
props: {
errorMessage: {
type: String,
default: null
},
},
data() {
return {
};
},
}
</script>
<style>
.chartsview {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
align-items: center;
}
.charts-font{
font-size: 14px;
color: #CCCCCC;
margin-top: 10px;
}
.charts-error{
width: 128px;
height: 128px;
background: url("data:image/png;base64,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");
background-position: center;
}
</style>
<template>
<view class="container loading1">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading1',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading1 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading1 .shape1 {
-webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
animation: animation1shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, 16px);
transform: translate(16px, 16px);
}
}
@keyframes animation1shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, 16px);
transform: translate(16px, 16px);
}
}
.loading1 .shape2 {
-webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
animation: animation1shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, 16px);
transform: translate(-16px, 16px);
}
}
@keyframes animation1shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, 16px);
transform: translate(-16px, 16px);
}
}
.loading1 .shape3 {
-webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
animation: animation1shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, -16px);
transform: translate(16px, -16px);
}
}
@keyframes animation1shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, -16px);
transform: translate(16px, -16px);
}
}
.loading1 .shape4 {
-webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
animation: animation1shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, -16px);
transform: translate(-16px, -16px);
}
}
@keyframes animation1shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, -16px);
transform: translate(-16px, -16px);
}
}
</style>
<template>
<view class="container loading2">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading2',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading2 {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.container.loading2 .shape {
border-radius: 5px;
}
.container.loading2{
-webkit-animation: rotation 1s infinite;
animation: rotation 1s infinite;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading2 .shape1 {
-webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
animation: animation2shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
@keyframes animation2shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
.loading2 .shape2 {
-webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
animation: animation2shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
@keyframes animation2shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
.loading2 .shape3 {
-webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
animation: animation2shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
@keyframes animation2shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
.loading2 .shape4 {
-webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
animation: animation2shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
}
@keyframes animation2shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
}
</style>
<template>
<view class="container loading3">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading3',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading3 {
-webkit-animation: rotation 1s infinite;
animation: rotation 1s infinite;
}
.container.loading3 .shape1 {
border-top-left-radius: 10px;
}
.container.loading3 .shape2 {
border-top-right-radius: 10px;
}
.container.loading3 .shape3 {
border-bottom-left-radius: 10px;
}
.container.loading3 .shape4 {
border-bottom-right-radius: 10px;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading3 .shape1 {
-webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
animation: animation3shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
}
@keyframes animation3shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
}
.loading3 .shape2 {
-webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
animation: animation3shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
}
@keyframes animation3shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
}
.loading3 .shape3 {
-webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
animation: animation3shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
}
@keyframes animation3shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
}
.loading3 .shape4 {
-webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
animation: animation3shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
}
@keyframes animation3shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
}
</style>
<template>
<view class="container loading5">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading5',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading5 .shape {
width: 15px;
height: 15px;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading5 .shape1 {
animation: animation5shape1 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
50% {
-webkit-transform: translate(15px, 15px);
transform: translate(15px, 15px);
}
75% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
}
@keyframes animation5shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
50% {
-webkit-transform: translate(15px, 15px);
transform: translate(15px, 15px);
}
75% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
}
.loading5 .shape2 {
animation: animation5shape2 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
50% {
-webkit-transform: translate(-15px, 15px);
transform: translate(-15px, 15px);
}
75% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
}
@keyframes animation5shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
50% {
-webkit-transform: translate(-15px, 15px);
transform: translate(-15px, 15px);
}
75% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
}
.loading5 .shape3 {
animation: animation5shape3 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
50% {
-webkit-transform: translate(15px, -15px);
transform: translate(15px, -15px);
}
75% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
}
@keyframes animation5shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
50% {
-webkit-transform: translate(15px, -15px);
transform: translate(15px, -15px);
}
75% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
}
.loading5 .shape4 {
animation: animation5shape4 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
50% {
-webkit-transform: translate(-15px, -15px);
transform: translate(-15px, -15px);
}
75% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
}
@keyframes animation5shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
50% {
-webkit-transform: translate(-15px, -15px);
transform: translate(-15px, -15px);
}
75% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
}
</style>
<template>
<view class="container loading6">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading6',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading6 {
-webkit-animation: rotation 1s infinite;
animation: rotation 1s infinite;
}
.container.loading6 .shape {
width: 12px;
height: 12px;
border-radius: 2px;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading6 .shape1 {
-webkit-animation: animation6shape1 2s linear 0s infinite normal;
animation: animation6shape1 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
50% {
-webkit-transform: translate(18px, 18px);
transform: translate(18px, 18px);
}
75% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
}
@keyframes animation6shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
50% {
-webkit-transform: translate(18px, 18px);
transform: translate(18px, 18px);
}
75% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
}
.loading6 .shape2 {
-webkit-animation: animation6shape2 2s linear 0s infinite normal;
animation: animation6shape2 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
50% {
-webkit-transform: translate(-18px, 18px);
transform: translate(-18px, 18px);
}
75% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
}
@keyframes animation6shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
50% {
-webkit-transform: translate(-18px, 18px);
transform: translate(-18px, 18px);
}
75% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
}
.loading6 .shape3 {
-webkit-animation: animation6shape3 2s linear 0s infinite normal;
animation: animation6shape3 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
50% {
-webkit-transform: translate(18px, -18px);
transform: translate(18px, -18px);
}
75% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
}
@keyframes animation6shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
50% {
-webkit-transform: translate(18px, -18px);
transform: translate(18px, -18px);
}
75% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
}
.loading6 .shape4 {
-webkit-animation: animation6shape4 2s linear 0s infinite normal;
animation: animation6shape4 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
50% {
-webkit-transform: translate(-18px, -18px);
transform: translate(-18px, -18px);
}
75% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
}
@keyframes animation6shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
50% {
-webkit-transform: translate(-18px, -18px);
transform: translate(-18px, -18px);
}
75% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
}
</style>
<template>
<view>
<Loading1 v-if="loadingType==1"/>
<Loading2 v-if="loadingType==2"/>
<Loading3 v-if="loadingType==3"/>
<Loading4 v-if="loadingType==4"/>
<Loading5 v-if="loadingType==5"/>
</view>
</template>
<script>
import Loading1 from "./loading1.vue";
import Loading2 from "./loading2.vue";
import Loading3 from "./loading3.vue";
import Loading4 from "./loading4.vue";
import Loading5 from "./loading5.vue";
export default {
components:{Loading1,Loading2,Loading3,Loading4,Loading5},
name: 'qiun-loading',
props: {
loadingType: {
type: Number,
default: 2
},
},
data() {
return {
};
},
}
</script>
<style>
</style>
/*
* uCharts®
* 高性能跨平台图表库,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360)、Vue、Taro等支持canvas的框架平台
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
* 复制使用请保留本段注释,感谢支持开源!
*
* uCharts®官方网站
* https://www.uCharts.cn
*
* 开源地址:
* https://gitee.com/uCharts/uCharts
*
* uni-app插件市场地址:
* http://ext.dcloud.net.cn/plugin?id=271
*
*/
// 通用配置项
// 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
const cfe = {
//demotype为自定义图表类型
"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"],
//增加自定义图表类型,如果需要categories,请在这里加入您的图表类型例如最后的"demotype"
"categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"],
//instance为实例变量承载属性,option为eopts承载属性,不要删除
"instance": {},
"option": {},
//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
"formatter":{
"tooltipDemo1":function(res){
let result = ''
for (let i in res) {
if (i == 0) {
result += res[i].axisValueLabel + '年销售额'
}
let value = '--'
if (res[i].data !== null) {
value = res[i].data
}
// #ifdef H5
result += '\n' + res[i].seriesName + ':' + value + ' 万元'
// #endif
// #ifdef APP-PLUS
result += '<br/>' + res[i].marker + res[i].seriesName + ':' + value + ' 万元'
// #endif
}
return result;
},
legendFormat:function(name){
return "自定义图例+"+name;
},
yAxisFormatDemo:function (value, index) {
return value + '元';
},
seriesFormatDemo:function(res){
return res.name + '年' + res.value + '元';
}
},
//这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在eopts参数,会将demotype与eopts中option合并后渲染图表。
"demotype":{
"color": color,
//在这里填写echarts的option即可
},
//下面是自定义配置,请添加项目所需的通用配置
"column": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'axis'
},
"grid": {
"top": 30,
"bottom": 50,
"right": 15,
"left": 40
},
"legend": {
"bottom": 'left',
},
"toolbox": {
"show": false,
},
"xAxis": {
"type": 'category',
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
"boundaryGap": true,
"data": []
},
"yAxis": {
"type": 'value',
"axisTick": {
"show": false,
},
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
},
"seriesTemplate": {
"name": '',
"type": 'bar',
"data": [],
"barwidth": 20,
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
},
},
"line": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'axis'
},
"grid": {
"top": 30,
"bottom": 50,
"right": 15,
"left": 40
},
"legend": {
"bottom": 'left',
},
"toolbox": {
"show": false,
},
"xAxis": {
"type": 'category',
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
"boundaryGap": true,
"data": []
},
"yAxis": {
"type": 'value',
"axisTick": {
"show": false,
},
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
},
"seriesTemplate": {
"name": '',
"type": 'line',
"data": [],
"barwidth": 20,
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
},
},
"area": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'axis'
},
"grid": {
"top": 30,
"bottom": 50,
"right": 15,
"left": 40
},
"legend": {
"bottom": 'left',
},
"toolbox": {
"show": false,
},
"xAxis": {
"type": 'category',
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
"boundaryGap": true,
"data": []
},
"yAxis": {
"type": 'value',
"axisTick": {
"show": false,
},
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
},
"seriesTemplate": {
"name": '',
"type": 'line',
"data": [],
"areaStyle": {},
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
},
},
"pie": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'item'
},
"grid": {
"top": 40,
"bottom": 30,
"right": 15,
"left": 15
},
"legend": {
"bottom": 'left',
},
"seriesTemplate": {
"name": '',
"type": 'pie',
"data": [],
"radius": '50%',
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
},
},
"ring": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'item'
},
"grid": {
"top": 40,
"bottom": 30,
"right": 15,
"left": 15
},
"legend": {
"bottom": 'left',
},
"seriesTemplate": {
"name": '',
"type": 'pie',
"data": [],
"radius": ['40%', '70%'],
"avoidLabelOverlap": false,
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
"labelLine": {
"show": true
},
},
},
"rose": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'item'
},
"legend": {
"top": 'bottom'
},
"seriesTemplate": {
"name": '',
"type": 'pie',
"data": [],
"radius": "55%",
"center": ['50%', '50%'],
"roseType": 'area',
},
},
"funnel": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'item',
"formatter": "{b} : {c}%"
},
"legend": {
"top": 'bottom'
},
"seriesTemplate": {
"name": '',
"type": 'funnel',
"left": '10%',
"top": 60,
"bottom": 60,
"width": '80%',
"min": 0,
"max": 100,
"minSize": '0%',
"maxSize": '100%',
"sort": 'descending',
"gap": 2,
"label": {
"show": true,
"position": 'inside'
},
"labelLine": {
"length": 10,
"lineStyle": {
"width": 1,
"type": 'solid'
}
},
"itemStyle": {
"bordercolor": '#fff',
"borderwidth": 1
},
"emphasis": {
"label": {
"fontSize": 20
}
},
"data": [],
},
},
"gauge": {
"color": color,
"tooltip": {
"formatter": '{a} <br/>{b} : {c}%'
},
"seriesTemplate": {
"name": '业务指标',
"type": 'gauge',
"detail": {"formatter": '{value}%'},
"data": [{"value": 50, "name": '完成率'}]
},
},
"candle": {
"xAxis": {
"data": []
},
"yAxis": {},
"color": color,
"title": {
"text": ''
},
"dataZoom": [{
"type": 'inside',
"xAxisIndex": [0, 1],
"start": 10,
"end": 100
},
{
"show": true,
"xAxisIndex": [0, 1],
"type": 'slider',
"bottom": 10,
"start": 10,
"end": 100
}
],
"seriesTemplate": {
"name": '',
"type": 'k',
"data": [],
},
}
}
export default cfe;
\ No newline at end of file \ No newline at end of file
/*
* uCharts®
* 高性能跨平台图表库,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360)、Vue、Taro等支持canvas的框架平台
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
* 复制使用请保留本段注释,感谢支持开源!
*
* uCharts®官方网站
* https://www.uCharts.cn
*
* 开源地址:
* https://gitee.com/uCharts/uCharts
*
* uni-app插件市场地址:
* http://ext.dcloud.net.cn/plugin?id=271
*
*/
// 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
//事件转换函数,主要用作格式化x轴为时间轴,根据需求自行修改
const formatDateTime = (timeStamp, returnType)=>{
var date = new Date();
date.setTime(timeStamp * 1000);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
if(returnType == 'full'){return y + '-' + m + '-' + d + ' '+ h +':' + minute + ':' + second;}
if(returnType == 'y-m-d'){return y + '-' + m + '-' + d;}
if(returnType == 'h:m'){return h +':' + minute;}
if(returnType == 'h:m:s'){return h +':' + minute +':' + second;}
return [y, m, d, h, minute, second];
}
const cfu = {
//demotype为自定义图表类型,一般不需要自定义图表类型,只需要改根节点上对应的类型即可
"type":["pie","ring","rose","word","funnel","map","arcbar","line","column","mount","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"],
"range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","山峰图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"],
//增加自定义图表类型,如果需要categories,请在这里加入您的图表类型,例如最后的"demotype"
//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴(矢量x轴)类图表,没有categories,不需要加入categories
"categories":["line","column","mount","bar","area","radar","gauge","candle","mix","demotype"],
//instance为实例变量承载属性,不要删除
"instance":{},
//option为opts及eopts承载属性,不要删除
"option":{},
//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
"formatter":{
"yAxisDemo1":function(val, index, opts){return val+'元'},
"yAxisDemo2":function(val, index, opts){return val.toFixed(2)},
"xAxisDemo1":function(val, index, opts){return val+'年';},
"xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')},
"seriesDemo1":function(val, index, series, opts){return val+'元'},
"tooltipDemo1":function(item, category, index, opts){
if(index==0){
return '随便用'+item.data+'年'
}else{
return '其他我没改'+item.data+'天'
}
},
"pieDemo":function(val, index, series, opts){
if(index !== undefined){
return series[index].name+':'+series[index].data+'元'
}
},
},
//这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在opts参数,会将demotype与opts中option合并后渲染图表。
"demotype":{
//我这里把曲线图当做了自定义图表类型,您可以根据需要随意指定类型或配置
"type": "line",
"color": color,
"padding": [15,10,0,15],
"xAxis": {
"disableGrid": true,
},
"yAxis": {
"gridType": "dash",
"dashLength": 2,
},
"legend": {
},
"extra": {
"line": {
"type": "curve",
"width": 2
},
}
},
//下面是自定义配置,请添加项目所需的通用配置
"pie":{
"type": "pie",
"color": color,
"padding": [5,5,5,5],
"extra": {
"pie": {
"activeOpacity": 0.5,
"activeRadius": 10,
"offsetAngle": 0,
"labelWidth": 15,
"border": true,
"borderWidth": 3,
"borderColor": "#FFFFFF"
},
}
},
"ring":{
"type": "ring",
"color": color,
"padding": [5,5,5,5],
"rotate": false,
"dataLabel": true,
"legend": {
"show": true,
"position": "right",
"lineHeight": 25,
},
"title": {
"name": "收益率",
"fontSize": 15,
"color": "#666666"
},
"subtitle": {
"name": "70%",
"fontSize": 25,
"color": "#7cb5ec"
},
"extra": {
"ring": {
"ringWidth":30,
"activeOpacity": 0.5,
"activeRadius": 10,
"offsetAngle": 0,
"labelWidth": 15,
"border": true,
"borderWidth": 3,
"borderColor": "#FFFFFF"
},
},
},
"rose":{
"type": "rose",
"color": color,
"padding": [5,5,5,5],
"legend": {
"show": true,
"position": "left",
"lineHeight": 25,
},
"extra": {
"rose": {
"type": "area",
"minRadius": 50,
"activeOpacity": 0.5,
"activeRadius": 10,
"offsetAngle": 0,
"labelWidth": 15,
"border": false,
"borderWidth": 2,
"borderColor": "#FFFFFF"
},
}
},
"word":{
"type": "word",
"color": color,
"extra": {
"word": {
"type": "normal",
"autoColors": false
}
}
},
"funnel":{
"type": "funnel",
"color": color,
"padding": [15,15,0,15],
"extra": {
"funnel": {
"activeOpacity": 0.3,
"activeWidth": 10,
"border": true,
"borderWidth": 2,
"borderColor": "#FFFFFF",
"fillOpacity": 1,
"labelAlign": "right"
},
}
},
"map":{
"type": "map",
"color": color,
"padding": [0,0,0,0],
"dataLabel": true,
"extra": {
"map": {
"border": true,
"borderWidth": 1,
"borderColor": "#666666",
"fillOpacity": 0.6,
"activeBorderColor": "#F04864",
"activeFillColor": "#FACC14",
"activeFillOpacity": 1
},
}
},
"arcbar":{
"type": "arcbar",
"color": color,
"title": {
"name": "百分比",
"fontSize": 25,
"color": "#00FF00"
},
"subtitle": {
"name": "默认标题",
"fontSize": 15,
"color": "#666666"
},
"extra": {
"arcbar": {
"type": "default",
"width": 12,
"backgroundColor": "#E9E9E9",
"startAngle": 0.75,
"endAngle": 0.25,
"gap": 2
}
}
},
"line":{
"type": "line",
"color": color,
"padding": [15,10,0,15],
"xAxis": {
"disableGrid": true,
},
"yAxis": {
"gridType": "dash",
"dashLength": 2,
},
"legend": {
},
"extra": {
"line": {
"type": "straight",
"width": 2,
"activeType": "hollow"
},
}
},
"tline":{
"type": "line",
"color": color,
"padding": [15,10,0,15],
"xAxis": {
"disableGrid": false,
"boundaryGap":"justify",
},
"yAxis": {
"gridType": "dash",
"dashLength": 2,
"data":[
{
"min":0,
"max":80
}
]
},
"legend": {
},
"extra": {
"line": {
"type": "curve",
"width": 2,
"activeType": "hollow"
},
}
},
"tarea":{
"type": "area",
"color": color,
"padding": [15,10,0,15],
"xAxis": {
"disableGrid": true,
"boundaryGap":"justify",
},
"yAxis": {
"gridType": "dash",
"dashLength": 2,
"data":[
{
"min":0,
"max":80
}
]
},
"legend": {
},
"extra": {
"area": {
"type": "curve",
"opacity": 0.2,
"addLine": true,
"width": 2,
"gradient": true,
"activeType": "hollow"
},
}
},
"column":{
"type": "column",
"color": color,
"padding": [15,15,0,5],
"xAxis": {
"disableGrid": true,
},
"yAxis": {
"data":[{"min":0}]
},
"legend": {
},
"extra": {
"column": {
"type": "group",
"width": 30,
"activeBgColor": "#000000",
"activeBgOpacity": 0.08
},
}
},
"mount":{
"type": "mount",
"color": color,
"padding": [15,15,0,5],
"xAxis": {
"disableGrid": true,
},
"yAxis": {
"data":[{"min":0}]
},
"legend": {
},
"extra": {
"mount": {
"type": "mount",
"widthRatio": 1.5,
},
}
},
"bar":{
"type": "bar",
"color": color,
"padding": [15,30,0,5],
"xAxis": {
"boundaryGap":"justify",
"disableGrid":false,
"min":0,
"axisLine":false
},
"yAxis": {
},
"legend": {
},
"extra": {
"bar": {
"type": "group",
"width": 30,
"meterBorde": 1,
"meterFillColor": "#FFFFFF",
"activeBgColor": "#000000",
"activeBgOpacity": 0.08
},
}
},
"area":{
"type": "area",
"color": color,
"padding": [15,15,0,15],
"xAxis": {
"disableGrid": true,
},
"yAxis": {
"gridType": "dash",
"dashLength": 2,
},
"legend": {
},
"extra": {
"area": {
"type": "straight",
"opacity": 0.2,
"addLine": true,
"width": 2,
"gradient": false,
"activeType": "hollow"
},
}
},
"radar":{
"type": "radar",
"color": color,
"padding": [5,5,5,5],
"dataLabel": false,
"legend": {
"show": true,
"position": "right",
"lineHeight": 25,
},
"extra": {
"radar": {
"gridType": "radar",
"gridColor": "#CCCCCC",
"gridCount": 3,
"opacity": 0.2,
"max": 200,
"labelShow": true
},
}
},
"gauge":{
"type": "gauge",
"color": color,
"title": {
"name": "66Km/H",
"fontSize": 25,
"color": "#2fc25b",
"offsetY": 50
},
"subtitle": {
"name": "实时速度",
"fontSize": 15,
"color": "#1890ff",
"offsetY": -50
},
"extra": {
"gauge": {
"type": "default",
"width": 30,
"labelColor": "#666666",
"startAngle": 0.75,
"endAngle": 0.25,
"startNumber": 0,
"endNumber": 100,
"labelFormat": "",
"splitLine": {
"fixRadius": 0,
"splitNumber": 10,
"width": 30,
"color": "#FFFFFF",
"childNumber": 5,
"childWidth": 12
},
"pointer": {
"width": 24,
"color": "auto"
}
}
}
},
"candle":{
"type": "candle",
"color": color,
"padding": [15,15,0,15],
"enableScroll": true,
"enableMarkLine": true,
"dataLabel": false,
"xAxis": {
"labelCount": 4,
"itemCount": 40,
"disableGrid": true,
"gridColor": "#CCCCCC",
"gridType": "solid",
"dashLength": 4,
"scrollShow": true,
"scrollAlign": "left",
"scrollColor": "#A6A6A6",
"scrollBackgroundColor": "#EFEBEF"
},
"yAxis": {
},
"legend": {
},
"extra": {
"candle": {
"color": {
"upLine": "#f04864",
"upFill": "#f04864",
"downLine": "#2fc25b",
"downFill": "#2fc25b"
},
"average": {
"show": true,
"name": ["MA5","MA10","MA30"],
"day": [5,10,20],
"color": ["#1890ff","#2fc25b","#facc14"]
}
},
"markLine": {
"type": "dash",
"dashLength": 5,
"data": [
{
"value": 2150,
"lineColor": "#f04864",
"showLabel": true
},
{
"value": 2350,
"lineColor": "#f04864",
"showLabel": true
}
]
}
}
},
"mix":{
"type": "mix",
"color": color,
"padding": [15,15,0,15],
"xAxis": {
"disableGrid": true,
},
"yAxis": {
"disabled": false,
"disableGrid": false,
"splitNumber": 5,
"gridType": "dash",
"dashLength": 4,
"gridColor": "#CCCCCC",
"padding": 10,
"showTitle": true,
"data": []
},
"legend": {
},
"extra": {
"mix": {
"column": {
"width": 20
}
},
}
},
"scatter":{
"type": "scatter",
"color":color,
"padding":[15,15,0,15],
"dataLabel":false,
"xAxis": {
"disableGrid": false,
"gridType":"dash",
"splitNumber":5,
"boundaryGap":"justify",
"min":0
},
"yAxis": {
"disableGrid": false,
"gridType":"dash",
},
"legend": {
},
"extra": {
"scatter": {
},
}
},
"bubble":{
"type": "bubble",
"color":color,
"padding":[15,15,0,15],
"xAxis": {
"disableGrid": false,
"gridType":"dash",
"splitNumber":5,
"boundaryGap":"justify",
"min":0,
"max":250
},
"yAxis": {
"disableGrid": false,
"gridType":"dash",
"data":[{
"min":0,
"max":150
}]
},
"legend": {
},
"extra": {
"bubble": {
"border":2,
"opacity": 0.5,
},
}
}
}
export default cfu;
\ No newline at end of file \ No newline at end of file
# uCharts JSSDK说明
1、如不使用uCharts组件,可直接引用u-charts.js,打包编译后会`自动压缩`,压缩后体积约为`120kb`
2、如果120kb的体积仍需压缩,请手到uCharts官网通过在线定制选择您需要的图表。
3、config-ucharts.js为uCharts组件的用户配置文件,升级前请`自行备份config-ucharts.js`文件,以免被强制覆盖。
4、config-echarts.js为ECharts组件的用户配置文件,升级前请`自行备份config-echarts.js`文件,以免被强制覆盖。
\ No newline at end of file \ No newline at end of file
{
"id": "qiun-data-charts",
"displayName": "秋云 ucharts echarts 高性能跨全端图表组件",
"version": "2.5.0-20230101",
"description": "uCharts 新增正负柱状图!支持H5及APP用 ucharts echarts 渲染图表,uniapp可视化首选组件",
"keywords": [
"ucharts",
"echarts",
"f2",
"图表",
"可视化"
],
"repository": "https://gitee.com/uCharts/uCharts",
"engines": {
"HBuilderX": "^3.3.8"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": "474119"
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/~qiun",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "y",
"联盟": "y"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file \ No newline at end of file
![logo](https://img-blog.csdnimg.cn/4a276226973841468c1be356f8d9438b.png)
[![star](https://gitee.com/uCharts/uCharts/badge/star.svg?theme=gvp)](https://gitee.com/uCharts/uCharts/stargazers)
[![fork](https://gitee.com/uCharts/uCharts/badge/fork.svg?theme=gvp)](https://gitee.com/uCharts/uCharts/members)
[![License](https://img.shields.io/badge/license-Apache%202-4EB1BA.svg)](https://www.apache.org/licenses/LICENSE-2.0.html)
[![npm package](https://img.shields.io/npm/v/@qiun/ucharts.svg?style=flat-square)](https://www.npmjs.com/~qiun)
## uCharts简介
`uCharts`是一款基于`canvas API`开发的适用于所有前端应用的图表库,开发者编写一套代码,可运行到 Web、iOS、Android(基于 uni-app / taro )、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等更多支持 canvas API 的平台。
## 官方网站
## [https://www.ucharts.cn](https://www.ucharts.cn)
## 快速体验
一套代码编到多个平台,依次扫描二维码,亲自体验uCharts图表跨平台效果!其他平台请自行编译。
![](https://www.ucharts.cn/images/web/guide/qrcode20220224.png)
![](https://img-blog.csdnimg.cn/7d0115593ff24ac39a224fb7c6ed72a4.png)
## 致开发者
感谢各位开发者`五年`来对秋云及uCharts的支持,uCharts的进步离不开各位开发者的鼓励与贡献。为更好的帮助各位开发者使用图表工具,我们推出了新版官网,增加了在线定制、问答社区、在线配置等一些增值服务,为确保您能更好的应用图表组件,建议您先`仔细阅读官网指南`以及`常见问题`,而不是下载下来`直接使用`。如仍然不能解决,请到`官网社区`或开通会员后加入`专属VIP会员群`提问将会很快得到回答。
## 视频教程
## [uCharts新手入门教程](https://www.bilibili.com/video/BV1qA411Q7se/?share_source=copy_web&vd_source=42a1242f9aaade6427736af69eb2e1d9)
## 社群支持
uCharts官方拥有5个2000人的QQ群及专属VIP会员群支持,庞大的用户量证明我们一直在努力,请各位放心使用!uCharts的开源图表组件的开发,团队付出了大量的时间与精力,经过四来的考验,不会有比较明显的bug,请各位放心使用。如果您有更好的想法,可以在`码云提交Pull Requests`以帮助更多开发者完成需求,再次感谢各位对uCharts的鼓励与支持!
#### 官方交流群
- 交流群1:371774600(已满)
- 交流群2:619841586(已满)
- 交流群3:955340127(已满)
- 交流群4:641669795(已满)
- 交流群5:236294809(只能扫码加入)
![](https://www.ucharts.cn/images/web/qq5.jpg)
- 口令`uniapp`
#### 专属VIP会员群
- 开通会员后详见【账号详情】页面中顶部的滚动通知
- 口令`您的用户ID`
## 版权信息
uCharts始终坚持开源,遵循 [Apache Licence 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) 开源协议,意味着您无需支付任何费用,即可将uCharts应用到您的产品中。
注意:这并不意味着您可以将uCharts应用到非法的领域,比如涉及赌博,暴力等方面。如因此产生纠纷或法律问题,uCharts相关方及秋云科技不承担任何责任。
## 合作伙伴
[![DIY官网](https://www.ucharts.cn/images/web/guide/links/diy-gw.png)](https://www.diygw.com/)
[![HasChat](https://www.ucharts.cn/images/web/guide/links/haschat.png)](https://gitee.com/howcode/has-chat)
[![uViewUI](https://www.ucharts.cn/images/web/guide/links/uView.png)](https://www.uviewui.com/)
[![图鸟UI](https://www.ucharts.cn/images/web/guide/links/tuniao.png)](https://ext.dcloud.net.cn/plugin?id=7088)
[![thorui](https://www.ucharts.cn/images/web/guide/links/thorui.png)](https://ext.dcloud.net.cn/publisher?id=202)
[![FirstUI](https://www.ucharts.cn/images/web/guide/links/first.png)](https://www.firstui.cn/)
[![nProUI](https://www.ucharts.cn/images/web/guide/links/nPro.png)](https://ext.dcloud.net.cn/plugin?id=5169)
[![GraceUI](https://www.ucharts.cn/images/web/guide/links/grace.png)](https://www.graceui.com/)
## 更新记录
详见官网指南中说明,[点击此处查看](https://www.ucharts.cn/v2/#/guide/index?id=100)
## 相关链接
- [uCharts官网](https://www.ucharts.cn)
- [DCloud插件市场地址](https://ext.dcloud.net.cn/plugin?id=271)
- [uCharts码云开源托管地址](https://gitee.com/uCharts/uCharts) [![star](https://gitee.com/uCharts/uCharts/badge/star.svg?theme=gvp)](https://gitee.com/uCharts/uCharts/stargazers)
- [uCharts npm开源地址](https://www.ucharts.cn)
- [ECharts官网](https://echarts.apache.org/zh/index.html)
- [ECharts配置手册](https://echarts.apache.org/zh/option.html)
- [图表组件在项目中的应用 ReportPlus数据报表](https://www.ucharts.cn/v2/#/layout/info?id=1)
\ No newline at end of file \ No newline at end of file
...@@ -12,12 +12,12 @@ export default { ...@@ -12,12 +12,12 @@ export default {
}, },
app_info: { app_info: {
"AppName": "虎博体育", //system_info.appName "AppName": "乐透双色球", //system_info.appName
"PromoterId": 662, "PromoterId": 662,
"Version": "1.0.0", //system_info.appVersion "Version": "1.0.0", //system_info.appVersion
"platform": system_info.platform, // "platform": system_info.platform, //
"device": system_info.model, //system_info.model "device": system_info.model, //system_info.model
"appId": "com.hb.tiyu", //system_info.appId "appId": "com.al.ssqds", //system_info.appId
"deviceId": system_info.deviceId "deviceId": system_info.deviceId
} }
......
支持 Markdown 格式
你添加了 0 到此讨论。请谨慎行事。
Finish editing this message first!