员工管理添加员工列表优惠券完善
This commit is contained in:
唐明明
160
uni_modules/lime-f2/changelog.md
Normal file
160
uni_modules/lime-f2/changelog.md
Normal file
@@ -0,0 +1,160 @@
|
||||
## 0.5.4（2021-07-09）
|
||||
- chore: 统一命名规范，无须主动引入组件
|
||||
## [代码示例站点1](https://limeui.qcoon.cn/#/f2-example)
|
||||
## [代码示例站点2](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.5.3（2021-06-14）
|
||||
- fix: 修复 头条系小程序 2d 报 JSON.stringify 的问题
|
||||
- fix: 修复 H5 动画不触发问题
|
||||
- chore: F2 版本更新至 3.8.9
|
||||
## 0.5.2（2021-05-19）
|
||||
- fix: 修复 微信小程序 PC 不显示问题
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.5.1（2021-05-14）
|
||||
- feat: props 增加 `isDisableScroll` ，触摸图表时是否禁止页面滚动
|
||||
- feat: props 增加 `webviewStyles` ，webview 的样式, 仅nvue有效
|
||||
## 0.5.0（2021-05-13）
|
||||
- docs: 插件用到了css 预编译器 [stylus](https://ext.dcloud.net.cn/plugin?name=compile-stylus) 请安装它
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.9（2021-05-12）
|
||||
- fix: 修复 百度平台 多个图表时 只生效一个的bug
|
||||
## 0.4.8（2021-05-10）
|
||||
- feat: 增加 `destroy` 方法，用于销毁实例
|
||||
- feat: 增加 `canvasToTempFilePath` 方法，用于生成图片
|
||||
```js
|
||||
this.$refs.chart.canvasToTempFilePath({success: res => {
|
||||
console.log('tempFilePath:', res.tempFilePath)
|
||||
}})
|
||||
```
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
|
||||
## 0.4.7（2021-05-10）
|
||||
- chore: F2 版本更新至 3.8.7
|
||||
## 0.4.6（2021-05-05）
|
||||
- docs: nvue 使用文档更新
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.5.7（2021-04-30）
|
||||
- chore: nvue 增强 支持 console.log 输出到控制台方便调试
|
||||
- docs: nvue 使用文档更新，不再需要声明F2
|
||||
## 0.4.5.6（2021-04-29）
|
||||
- fix: nvue 修复打包后 函数字符串被压缩无效的问题
|
||||
- 若发现打包依然无效可使用直接返回字符串
|
||||
```js
|
||||
this.$refs.chart.init(config => {
|
||||
return `
|
||||
const chart = new F2.Chart(config);
|
||||
chart.source(data);
|
||||
chart
|
||||
.interval()
|
||||
.position('genre*sold')
|
||||
.color('genre');
|
||||
chart.render();
|
||||
return chart;
|
||||
`
|
||||
},{data});
|
||||
```
|
||||
- chore: 新增支持词云能力，头条小程序需要1.78.0后
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.5.5（2021-04-25）
|
||||
- fix: 修复新版谷歌浏览器(90.0.4430.85) 报 `transform ` 的问题
|
||||
## 0.4.5.4（2021-04-23）
|
||||
- fix: 修复支付宝小程序尺寸问题
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.5.3（2021-04-22）
|
||||
- chore: 删除多余console.log
|
||||
## 0.4.5.2（2021-04-21）
|
||||
- chore: 修复字节颜色报错的问题。
|
||||
## 0.4.5.1（2021-04-18）
|
||||
- chore: 增加默认尺寸 **300 x 300** , 当父级没有尺寸时启用。
|
||||
- 由于 F2 **云图** 依赖的 `@antv/data-set` 只支持H5创建Canvas，所以暂时只有 H5 支持。
|
||||
- 由于 F2 对绘制地图 不佳，故地图示例南海诸岛使用图片。
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.5（2021-04-16）
|
||||
- fix: 修复 app-vue 字体固定问题
|
||||
- fix: 修复 h5 app-vue 画多边形尺寸过大
|
||||
- fix: 修复 初始化 func 问题
|
||||
- docs: 增加 矩形式树图 示例
|
||||
- 由于 F2 **云图** 依赖的 `@antv/data-set` 只支持H5创建Canvas，所以暂时只有 H5 支持。
|
||||
## 0.4.4.1（2021-04-16）
|
||||
- chore: 更改 `webview` 地址
|
||||
## 0.4.4（2021-04-16）
|
||||
- chore: `nvue` 增加 chart.$emit 事件，主要用于图表交互，接收动作事件数据。
|
||||
```html
|
||||
<l-f2 @change="onChange" />
|
||||
```
|
||||
```js
|
||||
chart.tooltip({
|
||||
onChange: (ev) => {
|
||||
chart.$emit('change', ev)
|
||||
}
|
||||
})
|
||||
```
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.3.1（2021-04-14）
|
||||
- docs: 更新官网上的代码示例！复制粘贴即用
|
||||
## [代码示例 http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.3（2021-04-13）
|
||||
- chore: 增加`onInit`的属性函数，直接向图表传递初始化函数
|
||||
```html
|
||||
<l-f2 :onInit="onInitChart" />
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data: ()=>({
|
||||
onInitChart: config => {
|
||||
const chart = new F2.Chart(config);
|
||||
const data = [
|
||||
{ value: 63.4, city: 'New York', date: '2011-10-01' },
|
||||
{ value: 62.7, city: 'Alaska', date: '2011-10-01' },
|
||||
{ value: 72.2, city: 'Austin', date: '2011-10-01' },
|
||||
{ value: 58, city: 'New York', date: '2011-10-02' },
|
||||
{ value: 59.9, city: 'Alaska', date: '2011-10-02' },
|
||||
{ value: 67.7, city: 'Austin', date: '2011-10-02' },
|
||||
{ value: 53.3, city: 'New York', date: '2011-10-03' },
|
||||
{ value: 59.1, city: 'Alaska', date: '2011-10-03' },
|
||||
{ value: 69.4, city: 'Austin', date: '2011-10-03' },
|
||||
];
|
||||
chart.source(data, {
|
||||
date: {
|
||||
range: [0, 1],
|
||||
type: 'timeCat',
|
||||
mask: 'MM-DD'
|
||||
},
|
||||
value: {
|
||||
max: 300,
|
||||
tickCount: 4
|
||||
}
|
||||
});
|
||||
chart.area().position('date*value').color('city').adjust('stack');
|
||||
chart.line().position('date*value').color('city').adjust('stack');
|
||||
chart.render();
|
||||
// 注意：需要把chart return 出来
|
||||
return chart;
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
## 0.4.2（2021-04-09）
|
||||
- chore: `nvue` webview 改为网络地址
|
||||
## 0.4.1（2021-04-09）
|
||||
- chore: `redraw(callback)` 更名为 `reset(callback)`
|
||||
- fix: 修复 `nvue` 某些情况下无法传递函数字符串
|
||||
- feat: 增加 `nvue` 下使用 `insertCss` 给节点设置 style
|
||||
## 0.4.0（2021-04-08）
|
||||
- chore: antv F2 version 更新到 `3.8.6`
|
||||
- feat: `f2-all`,`f2-simple`等文件，默认只提供`f2.min.js`,如果需要`f2-all`或`f2-simple`可去码云下载按自已需要引入！
|
||||
- fix: 修复钉钉小程序measureText undefined的问题
|
||||
- fix: 修复小程序因`hammer`引用报错
|
||||
## 0.3.0（2021-04-06）
|
||||
- feat: `redraw(callback)` 方法重绘
|
||||
- feat: `clear()` 方法清空图表
|
||||
- feat: `changeData(data)` 方法更新图表，需要传数据
|
||||
- feat: `repaint()` 方法更新图表：`source` 数据源 更新后，在需要的时候调用
|
||||
- feat: `source` 数据源 和 `is-auto-play` 开启自动更新，配置这两个参数只要 `source` 数据源更新，就会更新图表
|
||||
## 0.2.2（2021-04-05）
|
||||
- fix: 修复微信小程序缺少`Transform`报错问题
|
||||
## 0.2.1（2021-04-04）
|
||||
- chore: 考虑到不是所有人需要 `nvue`，所以 `webview` 改为网络路径 , 当然你也可以把html下载放置到项目根目录的`hybrid`文件夹下
|
||||
## 0.2.0（2021-04-04）
|
||||
- chore: 基于 `webview` 实现兼容 `nvue`
|
||||
## 0.1.0（2021-04-02）
|
||||
- chore: 第一次上传，基本全端兼容，使用方法与官网一致。
|
||||
121
uni_modules/lime-f2/components/l-f2/canvas.js
Normal file
121
uni_modules/lime-f2/components/l-f2/canvas.js
Normal file
@@ -0,0 +1,121 @@
|
||||
import {
|
||||
pixelRatio,
|
||||
sleep
|
||||
} from './utils';
|
||||
|
||||
const UNI_CANVAS_CONTEXT_MAP = {
|
||||
// #ifndef MP-WEIXIN
|
||||
fillStyle: 'FillStyle',
|
||||
fontSize: 'FontSize',
|
||||
globalAlpha: 'GlobalAlpha',
|
||||
opacity: 'GlobalAlpha',
|
||||
lineCap: 'LineCap',
|
||||
lineJoin: 'LineJoin',
|
||||
lineWidth: 'LineWidth',
|
||||
miterLimit: 'MiterLimit',
|
||||
strokeStyle: 'StrokeStyle',
|
||||
textAlign: 'TextAlign',
|
||||
textBaseline: 'TextBaseline',
|
||||
shadow: 'Shadow',
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO || H5 || APP-PLUS
|
||||
font: 'FontSize',
|
||||
// #endif
|
||||
};
|
||||
|
||||
function strLen(str) {
|
||||
let len = 0;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
|
||||
len++;
|
||||
} else {
|
||||
len += 2;
|
||||
}
|
||||
}
|
||||
return len;
|
||||
}
|
||||
|
||||
// 头条小程序目前仅支持 setFontSize
|
||||
// f2 会将所有属性整合为 font 简写，从中提取 fontSize 支持
|
||||
const fontSizeReg = /(\d*\.?\d*)px/;
|
||||
const colorReg = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])\b/g;
|
||||
export default (ctx) => {
|
||||
// #ifdef H5 || APP-PLUS
|
||||
ctx.uniTransform = ctx.transform
|
||||
ctx.transform = (...agrs) => {
|
||||
if (ctx.draw && agrs[6]) {
|
||||
agrs[4] *= pixelRatio
|
||||
agrs[5] *= pixelRatio
|
||||
}
|
||||
if (agrs.length > 6) {
|
||||
agrs.pop()
|
||||
}
|
||||
ctx.uniTransform(...agrs)
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
ctx.canvasGetImageData = ctx.getImageData
|
||||
ctx.getImageData = null
|
||||
// #endif
|
||||
if (!ctx.getImageData) {
|
||||
ctx.getImageData = (...agrs) => {
|
||||
const [x, y, width, height] = agrs
|
||||
return new Promise(resolve => {
|
||||
const parms = {
|
||||
canvasId: ctx.id || ctx.canvasId,
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
success: res => {
|
||||
resolve(res.data)
|
||||
}
|
||||
}
|
||||
// #ifndef MP-ALIPAY || MP-TOUTIAO
|
||||
uni.canvasGetImageData(parms)
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY || MP-TOUTIAO
|
||||
ctx.canvasGetImageData(parms)
|
||||
// #endif
|
||||
})
|
||||
}
|
||||
}
|
||||
// 钉钉小程序框架不支持 measureText 方法，用此方法 mock
|
||||
if (!ctx.measureText) {
|
||||
ctx.measureText = text => {
|
||||
let fontSize = 12;
|
||||
const font = ctx.__font;
|
||||
if (font) {
|
||||
fontSize = parseInt(font.split(' ')[3], 10);
|
||||
}
|
||||
fontSize /= 2;
|
||||
return {
|
||||
width: strLen(text) * fontSize
|
||||
};
|
||||
}
|
||||
}
|
||||
Object.keys(UNI_CANVAS_CONTEXT_MAP).forEach(key => {
|
||||
Object.defineProperty(ctx, key, {
|
||||
set(val) {
|
||||
const name = `set${UNI_CANVAS_CONTEXT_MAP[key]}`;
|
||||
if (!ctx[name]) {
|
||||
return;
|
||||
}
|
||||
if (key === 'font' && fontSizeReg.test(val)) {
|
||||
const match = fontSizeReg.exec(val);
|
||||
ctx[name](match[1]);
|
||||
return;
|
||||
}
|
||||
if (key === 'shadow' && Array.isArray(val)) {
|
||||
ctx[name](...val);
|
||||
return;
|
||||
}
|
||||
if(colorReg.test(val)) {
|
||||
val = val.replace(colorReg, '#$1$1$2$2$3$3')
|
||||
}
|
||||
ctx[name](val);
|
||||
}
|
||||
});
|
||||
});
|
||||
return ctx
|
||||
}
|
||||
15
uni_modules/lime-f2/components/l-f2/f2.min.js
vendored
Normal file
15
uni_modules/lime-f2/components/l-f2/f2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
446
uni_modules/lime-f2/components/l-f2/l-f2.vue
Normal file
446
uni_modules/lime-f2/components/l-f2/l-f2.vue
Normal file
@@ -0,0 +1,446 @@
|
||||
<template>
|
||||
<view class="l-f2" :style="customStyle" v-if="canvasId">
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<cover-view class="l-f2__mask" v-if="isMask"></cover-view>
|
||||
<canvas
|
||||
class="l-f2__canvas"
|
||||
v-if="use2dCanvas"
|
||||
type="2d"
|
||||
:id="canvasId"
|
||||
:style="'width:' + width + 'px;height:' + height + 'px'"
|
||||
:disable-scroll="isDisableScroll"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
/>
|
||||
<canvas
|
||||
class="l-f2__canvas"
|
||||
v-else
|
||||
:width="nodeWidth"
|
||||
:height="nodeHeight"
|
||||
:style="'width:' + width + 'px;height:' + height + 'px'"
|
||||
:canvas-id="canvasId"
|
||||
:id="canvasId"
|
||||
:disable-scroll="isDisableScroll"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
/>
|
||||
<view v-if="isCloud" style="width:2048px; height:2048px; position: fixed; left: 9999px;">
|
||||
<canvas v-if="use2dCanvas" type="2d" :canvas-id="canvasId + '_cloud'" :id="canvasId + '_cloud'" class="l-f2__canvas"></canvas>
|
||||
<canvas v-else :canvas-id="canvasId + '_cloud'" :id="canvasId + '_cloud'" class="l-f2__canvas"></canvas>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<web-view
|
||||
class="l-f2__canvas"
|
||||
:id="canvasId"
|
||||
ref="webview"
|
||||
:webviewStyles="webviewStyles"
|
||||
src="http://liangei.gitee.io/limeui/hybrid/html/lime-ui/lime-f2/index.html?v=0.4.8"
|
||||
@pagefinish="isFinish = true"
|
||||
@onPostMessage="onMessage"
|
||||
></web-view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// #ifndef APP-NVUE
|
||||
import extendContext from './canvas';
|
||||
import { compareVersion, wrapEvent, pixelRatio } from './utils';
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
import { base64ToPath } from './utils';
|
||||
// #endif
|
||||
export default {
|
||||
// version: '0.5.1'
|
||||
name: 'lime-f2',
|
||||
props: {
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
type: {
|
||||
type: String,
|
||||
default: '2d'
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
webviewStyles: Object,
|
||||
params: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
// #endif
|
||||
customStyle: String,
|
||||
imageMask: String,
|
||||
source: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
isAutoPlay: Boolean,
|
||||
isDisableScroll: Boolean,
|
||||
isCloud: Boolean,
|
||||
onInit: {
|
||||
type: [Function, Object],
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
use2dCanvas: true,
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN || MP-TOUTIAO
|
||||
use2dCanvas: false,
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
width: null,
|
||||
height: null,
|
||||
nodeWidth: null,
|
||||
nodeHeight: null,
|
||||
isMask: false,
|
||||
isInited: false,
|
||||
imageData: null,
|
||||
// config: {},
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
isFinish: false,
|
||||
file: ''
|
||||
// #endif
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
canvasId() {
|
||||
return `l-f2${this._uid}`;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isAutoPlay(val) {
|
||||
if (val) {
|
||||
this.changeData(this.source);
|
||||
}
|
||||
},
|
||||
source: {
|
||||
handler: function(data) {
|
||||
if (this.isAutoPlay) {
|
||||
this.changeData(data);
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clear();
|
||||
this.destroy();
|
||||
},
|
||||
created() {
|
||||
this.config = {}
|
||||
this.isMask = this.isCloud && this.imageMask;
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
const { SDKVersion, version, platform, environment } = uni.getSystemInfoSync();
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
this.use2dCanvas = this.type === '2d' && compareVersion(SDKVersion, '2.9.2') >= 0 && !((/ios/i.test(platform) && /7.0.20/.test(version)) || /wxwork/i.test(environment)) && !/windows/i.test(platform);;
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO
|
||||
this.use2dCanvas = this.type === '2d' && compareVersion(SDKVersion, '1.78.0') >= 0;
|
||||
// #endif
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
if (this.onInit) {
|
||||
this.init(this.onInit);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef APP-NVUE
|
||||
onMessage(e) {
|
||||
const res = e?.detail?.data[0] || null;
|
||||
if (res?.event) {
|
||||
this.$emit(res.event, JSON.parse(res.data));
|
||||
} else if (res?.file) {
|
||||
this.file = res.data;
|
||||
} else {
|
||||
console.error(res);
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
async init(func, params = null) {
|
||||
// #ifdef APP-NVUE
|
||||
this.$watch(
|
||||
'isFinish',
|
||||
(n, o) => {
|
||||
(n || o) && (params || this.params) && this.$refs.webview.evalJs(`init(${JSON.stringify(func.toString())}, ${JSON.stringify(params || this.params)})`);
|
||||
this.isInited = true;
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
let config = await this.getContext(this.canvasId);
|
||||
if (this.isCloud) {
|
||||
let imageMask = null;
|
||||
if (this.imageMask) {
|
||||
this.isMask = true;
|
||||
imageMask = await this.getImageMask(config);
|
||||
this.imageData = imageMask;
|
||||
this.isMask = false;
|
||||
}
|
||||
let cloud = await this.getContext(this.canvasId + '_cloud');
|
||||
config = Object.assign({}, config, { cloud, imageMask });
|
||||
}
|
||||
const chart = await func(config);
|
||||
if (chart) {
|
||||
this.chart = chart;
|
||||
this.canvasEl = chart.get('el');
|
||||
this.isInited = true;
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
changeData(data) {
|
||||
// #ifndef APP-NVUE
|
||||
if (this.chart) {
|
||||
this.chart.changeData(data || this.source);
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.$refs.webview.evalJs(`changeData(${JSON.stringify(data || this.source)})`);
|
||||
// #endif
|
||||
},
|
||||
clear() {
|
||||
// #ifndef APP-NVUE
|
||||
if (this.chart) {
|
||||
this.chart.clear();
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.$refs.webview.evalJs(`clear()`);
|
||||
// #endif
|
||||
},
|
||||
destroy() {
|
||||
// #ifndef APP-NVUE
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.$refs.webview.evalJs(`destroy()`);
|
||||
// #endif
|
||||
},
|
||||
repaint() {
|
||||
this.changeData(this.source);
|
||||
},
|
||||
reset(func, params = null) {
|
||||
// #ifndef APP-NVUE
|
||||
this.$watch(
|
||||
'isInited',
|
||||
v => v && func(this.chart),
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.$refs.webview.evalJs(`reset(${JSON.stringify(func.toString())}, ${JSON.stringify(params || this.params)})`);
|
||||
// #endif
|
||||
},
|
||||
canvasToTempFilePath(args = {}) {
|
||||
// #ifndef APP-NVUE
|
||||
const { use2dCanvas, canvasId, config } = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
const copyArgs = Object.assign(
|
||||
{
|
||||
canvasId,
|
||||
success: resolve,
|
||||
fail: reject
|
||||
},
|
||||
args
|
||||
);
|
||||
if (use2dCanvas) {
|
||||
let { canvas } = config[canvasId];
|
||||
delete copyArgs.canvasId;
|
||||
copyArgs.canvas = canvas;
|
||||
}
|
||||
uni.canvasToTempFilePath(copyArgs, this);
|
||||
});
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.file = '';
|
||||
this.$refs.webview.evalJs(`canvasToTempFilePath()`);
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$watch('file', async file => {
|
||||
if (file) {
|
||||
const tempFilePath = await base64ToPath(file);
|
||||
resolve(args.success({ tempFilePath }));
|
||||
} else {
|
||||
reject(args.fail({ error: `` }));
|
||||
}
|
||||
});
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// #ifndef APP-NVUE
|
||||
getImageMask(config) {
|
||||
return new Promise(resolve => {
|
||||
uni.getImageInfo({
|
||||
src: this.imageMask,
|
||||
success: async res => {
|
||||
if (res.path) {
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
|
||||
const localReg = /^\.|^\/(?=[^\/])/;
|
||||
res.path = localReg.test(this.imageMask) ? `/${res.path}` : res.path;
|
||||
// #endif
|
||||
const { context, width, height, canvas } = config;
|
||||
if (this.use2dCanvas) {
|
||||
const imageMask = () => {
|
||||
const imageMask = canvas.createImage();
|
||||
imageMask.crossOrigin = '';
|
||||
imageMask.src = res.path;
|
||||
imageMask.onload = async () => {
|
||||
context.drawImage(imageMask, 0, 0, res.width, res.height, 0, 0, width, height);
|
||||
const imageData = context.getImageData(0, 0, width, height).data;
|
||||
context.clearRect(0, 0, width, height);
|
||||
resolve(imageData);
|
||||
};
|
||||
};
|
||||
imageMask();
|
||||
} else {
|
||||
// #ifndef MP-BAIDU
|
||||
context.drawImage(res.path, 0, 0, res.width, res.height, 0, 0, width, height);
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU
|
||||
context.drawImage(res.path, 0, 0, width, height, 0, 0, res.width, res.height);
|
||||
// #endif
|
||||
await this.canvasDraw(context);
|
||||
const imageData = await context.getImageData(0, 0, width, height);
|
||||
context.clearRect(0, 0, width, height);
|
||||
await this.canvasDraw(context);
|
||||
resolve(imageData);
|
||||
}
|
||||
}
|
||||
},
|
||||
fail(err) {
|
||||
console.error(JSON.stringify(err));
|
||||
resolve(null);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
canvasDraw(ctx) {
|
||||
return new Promise(resolve => {
|
||||
ctx.draw(false, () => {
|
||||
setTimeout(() => {
|
||||
resolve(true);
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
},
|
||||
getContext(canvasId) {
|
||||
const { use2dCanvas, type = '2d', config } = this;
|
||||
if (config[canvasId]?.context) {
|
||||
return Promise.resolve(config[canvasId]);
|
||||
}
|
||||
if (use2dCanvas) {
|
||||
return new Promise(resolve => {
|
||||
uni.createSelectorQuery()
|
||||
.in(this)
|
||||
.select(`#${canvasId}`)
|
||||
.fields({
|
||||
node: true,
|
||||
size: true
|
||||
})
|
||||
.exec(res => {
|
||||
let { node, width, height } = res[0];
|
||||
width = width || 300;
|
||||
height = height || 300;
|
||||
const context = node.getContext(type);
|
||||
if (!canvasId.includes('_cloud')) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
}
|
||||
node.width = width * pixelRatio;
|
||||
node.height = height * pixelRatio;
|
||||
this.config[canvasId] = { context, width, height, pixelRatio, canvas: node };
|
||||
resolve(this.config[canvasId]);
|
||||
});
|
||||
});
|
||||
}
|
||||
return new Promise(resolve => {
|
||||
uni.createSelectorQuery()
|
||||
.in(this)
|
||||
.select(`#${canvasId}`)
|
||||
.boundingClientRect()
|
||||
.exec(res => {
|
||||
if (res) {
|
||||
let { width, height } = res[0];
|
||||
width = width || 300;
|
||||
height = height || 300;
|
||||
const context = uni.createCanvasContext(canvasId, this);
|
||||
if (!canvasId.includes('_cloud')) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
// #ifdef MP-ALIPAY
|
||||
this.nodeWidth = width * pixelRatio;
|
||||
this.nodeHeight = height * pixelRatio;
|
||||
// #endif
|
||||
}
|
||||
this.config[canvasId] = {
|
||||
context: extendContext(context),
|
||||
width,
|
||||
height,
|
||||
// #ifdef H5 || APP-PLUS
|
||||
pixelRatio: 1,
|
||||
oPixelRatio: pixelRatio,
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
pixelRatio
|
||||
// #endif
|
||||
};
|
||||
resolve(this.config[canvasId]);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
touchStart(e) {
|
||||
if (this.canvasEl) {
|
||||
this.canvasEl.dispatchEvent('touchstart', wrapEvent(e));
|
||||
}
|
||||
},
|
||||
touchMove(e) {
|
||||
if (this.canvasEl) {
|
||||
this.canvasEl.dispatchEvent('touchmove', wrapEvent(e));
|
||||
}
|
||||
},
|
||||
touchEnd(e) {
|
||||
if (this.canvasEl) {
|
||||
this.canvasEl.dispatchEvent('touchend', wrapEvent(e));
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="stylus">
|
||||
full()
|
||||
// #ifndef APP-NVUE
|
||||
width 100%
|
||||
height 100%
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
flex 1
|
||||
// #endif
|
||||
.l-f2
|
||||
full()
|
||||
position relative
|
||||
&__mask
|
||||
position absolute
|
||||
left 0
|
||||
right 0
|
||||
bottom 0
|
||||
top 0
|
||||
background-color #fff
|
||||
z-index 1
|
||||
&__canvas
|
||||
full()
|
||||
</style>
|
||||
65
uni_modules/lime-f2/components/l-f2/utils.js
Normal file
65
uni_modules/lime-f2/components/l-f2/utils.js
Normal file
@@ -0,0 +1,65 @@
|
||||
// #ifndef APP-NVUE
|
||||
// 计算版本
|
||||
export function compareVersion(v1, v2) {
|
||||
v1 = v1.split('.')
|
||||
v2 = v2.split('.')
|
||||
const len = Math.max(v1.length, v2.length)
|
||||
while (v1.length < len) {
|
||||
v1.push('0')
|
||||
}
|
||||
while (v2.length < len) {
|
||||
v2.push('0')
|
||||
}
|
||||
for (let i = 0; i < len; i++) {
|
||||
const num1 = parseInt(v1[i], 10)
|
||||
const num2 = parseInt(v2[i], 10)
|
||||
|
||||
if (num1 > num2) {
|
||||
return 1
|
||||
} else if (num1 < num2) {
|
||||
return -1
|
||||
}
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
export function wrapEvent(e) {
|
||||
if (!e) return;
|
||||
if (!e.preventDefault) {
|
||||
e.preventDefault = function() {};
|
||||
}
|
||||
return e;
|
||||
}
|
||||
|
||||
export const pixelRatio = uni.getSystemInfoSync().pixelRatio
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
export function base64ToPath(base64) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
|
||||
const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
|
||||
bitmap.loadBase64Data(base64, () => {
|
||||
if (!format) {
|
||||
reject(new Error('ERROR_BASE64SRC_PARSE'))
|
||||
}
|
||||
const time = new Date().getTime();
|
||||
const filePath = `_doc/uniapp_temp/${time}.${format}`
|
||||
|
||||
bitmap.save(filePath, {},
|
||||
() => {
|
||||
bitmap.clear()
|
||||
resolve(filePath)
|
||||
},
|
||||
(error) => {
|
||||
bitmap.clear()
|
||||
console.error(`${JSON.stringify(error)}`)
|
||||
reject(error)
|
||||
})
|
||||
}, (error) => {
|
||||
bitmap.clear()
|
||||
console.error(`${JSON.stringify(error)}`)
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
0
uni_modules/lime-f2/components/lime-f2/index.vue
Normal file
0
uni_modules/lime-f2/components/lime-f2/index.vue
Normal file
82
uni_modules/lime-f2/package.json
Normal file
82
uni_modules/lime-f2/package.json
Normal file
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"id": "lime-f2",
|
||||
"displayName": "蚂蚁图表 antv F2（暂时停止，请不要下载使用）",
|
||||
"version": "0.5.4",
|
||||
"description": "全端兼容,一个专注于移动,开箱即用的可视化解决方案",
|
||||
"keywords": [
|
||||
"蚂蚁金服",
|
||||
"AntV",
|
||||
"F2",
|
||||
"canvas",
|
||||
"图表"
|
||||
],
|
||||
"repository": "https://gitee.com/liangei/lime-f2",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"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": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
}
|
||||
}
|
||||
356
uni_modules/lime-f2/readme.md
Normal file
356
uni_modules/lime-f2/readme.md
Normal file
@@ -0,0 +1,356 @@
|
||||
# F2 图表 <span style="font-size:16px;">👑👑👑👑👑 <span style="background:#ff9d00;padding:2px 4px;color:#fff;font-size:10px;border-radius: 3px;">全端</span></span>
|
||||
> F2，一个专注于移动，开箱即用的可视化解决方案 [查看更多 站点2](https://limeui.qcoon.cn/#/f2) | [查看更多 站点2](http://liangei.gitee.io/limeui/#/f2)
|
||||
> 基于antv F2 做了兼容处理，更多示例请访问 [uni示例 站点1](https://limeui.qcoon.cn/#/f2-example) | [uni示例 站点2](http://liangei.gitee.io/limeui/#/f2-example) | [官方示例](https://f2.antv.vision/zh/examples/gallery)
|
||||
> Q群：1046793420
|
||||
> antv F2 v3.8.9
|
||||
|
||||
|
||||
## 平台兼容
|
||||
|
||||
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
|
||||
| --- | ---------- | ------------ | ---------- | ---------- | --------- | ---- |
|
||||
| √ | √ | √ | √ | √ | √ | √ |
|
||||
|
||||
|
||||
* ✨ **注意**
|
||||
* 🔔 插件用到了 css 预编译器 [stylus](https://ext.dcloud.net.cn/plugin?name=compile-stylus) 请安装
|
||||
* 🌈 本插件使用了`webview`支持`nvue`。
|
||||
* 📦 本插件没有对F2内部的方法和样式做过改动，只是使其兼容uniapp。
|
||||
* 🔔 若F2无法满足于你或有需要特殊能力的请直接去F2 提建议
|
||||
* 👉 若F2有兼容问题可向我反馈。
|
||||
* 🔔 默认只提供`f2.min.js`,如果需要`f2-all`或`f2-simple`可去码云下载按自已需要引入！
|
||||
|
||||
## 安装
|
||||
在uniapp 插件市场 找到 [蚂蚁图表](https://ext.dcloud.net.cn/plugin?id=4613) 导入即可
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
通过`ref`获取节点组件内部`init`方法生成图表
|
||||
|
||||
```html
|
||||
<view style="width: 100%; height:500rpx"><l-f2 ref="chart"></l-f2></view>
|
||||
```
|
||||
|
||||
```js
|
||||
// 非 nvue 页面需要引进
|
||||
import F2 from '@/uni_modules/lime-f2/components/l-f2/f2.min.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseData: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.chart.init(config => {
|
||||
const chart = new F2.Chart(config);
|
||||
chart.source(this.baseData);
|
||||
chart
|
||||
.interval()
|
||||
.position('genre*sold')
|
||||
.color('genre');
|
||||
chart.render();
|
||||
// 需要把 chart 返回
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 图饼
|
||||
图饼示例，更多用法和示例请访问[F2 示例](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
|
||||
```html
|
||||
<view style="width: 100%; height:500rpx"><l-f2 ref="chart"></l-f2></view>
|
||||
```
|
||||
|
||||
```js
|
||||
data() {
|
||||
return {
|
||||
pieMap: {
|
||||
'芳华': '40%',
|
||||
'妖猫传': '20%',
|
||||
'机器之血': '18%',
|
||||
'心理罪': '15%',
|
||||
'寻梦环游记': '5%',
|
||||
'其他': '2%'
|
||||
},
|
||||
pieData: [
|
||||
{
|
||||
name: '芳华',
|
||||
percent: 0.4,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '妖猫传',
|
||||
percent: 0.2,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '机器之血',
|
||||
percent: 0.18,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '心理罪',
|
||||
percent: 0.15,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '寻梦环游记',
|
||||
percent: 0.05,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
percent: 0.02,
|
||||
a: '1'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.chart.init(config => {
|
||||
const chart = new F2.Chart(config);
|
||||
chart.source(this.pieData, {
|
||||
percent: {
|
||||
formatter: val => val * 100 + '%';
|
||||
}
|
||||
});
|
||||
chart.legend({
|
||||
position: 'right',
|
||||
itemFormatter: val => val + ' ' + this.pieMap[val];
|
||||
});
|
||||
chart.tooltip(false);
|
||||
chart.coord('polar', {
|
||||
transposed: true,
|
||||
radius: 0.85
|
||||
});
|
||||
chart.axis(false);
|
||||
chart
|
||||
.interval()
|
||||
.position('a*percent')
|
||||
.color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'])
|
||||
.adjust('stack')
|
||||
.style({
|
||||
lineWidth: 1,
|
||||
stroke: '#fff',
|
||||
lineJoin: 'round',
|
||||
lineCap: 'round'
|
||||
})
|
||||
.animate({
|
||||
appear: {
|
||||
duration: 1200,
|
||||
easing: 'bounceOut'
|
||||
}
|
||||
});
|
||||
chart.render();
|
||||
// 需要把 chart 返回
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### 数据更新
|
||||
> F2 更新数据的方式有三种：
|
||||
|
||||
|
||||
1、通过 `ref` 获取组件实例，使用内部方法`changeData(data)`更新数据
|
||||
- 前后数据结构不发生变化，需要马上更新图表。
|
||||
```js
|
||||
this.$refs.chart.changeData(data)
|
||||
```
|
||||
|
||||
2、在节点上设置 `source` 源数据和 `isAutoPlay` 自动更新。
|
||||
- 前后数据结构不发生变化，需要马上更新图表。
|
||||
```html
|
||||
<view style="width: 100%; height:500rpx"><l-f2 ref="chart" :source="data" is-auto-play></l-f2></view>
|
||||
```
|
||||
|
||||
```js
|
||||
data() {
|
||||
return {
|
||||
data: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3、如果仅仅是更新数据，而不需要马上更新图表，在节点上设置 `source` 源数据，然后在需要更新图表时调用内部方法 `repaint()` 或在节点上设置 `isAutoPlay` 为 `true`
|
||||
- 前后数据结构不发生变化，不需要立即更新数据
|
||||
```html
|
||||
<view style="width: 100%; height:500rpx"><l-f2 ref="chart" :source="data" :isAutoPlay="isAutoPlay"></l-f2></view>
|
||||
```
|
||||
|
||||
```js
|
||||
// 1 调用内部方法
|
||||
this.$refs.chart.repaint();
|
||||
// 2 先设置isAutoPlay为false,再需要时设置为true
|
||||
this.isAutoPlay = true
|
||||
```
|
||||
|
||||
4、更新数据时还可以清除图表上的所有元素，重新定义图形语法，改变图表类型和各种配置。
|
||||
- 前后数据结构发生变化 或 需要更改text等元素。
|
||||
|
||||
```js
|
||||
this.$refs.chart.reset(chart => {
|
||||
const baseData = [{ genre: '成犬粮', sold: 375 }, { genre: '化毛膏', sold: 15 }, { genre: '益生菌', sold: 20 }, { genre: '氨糖', sold: 240 }, { genre: '其它', sold: 150 }];
|
||||
chart.clear() // 清理所有
|
||||
chart.source(baseData); // 加载新数据
|
||||
chart.interval().position('genre*sold').color('sold'); // 重新定义图形语法
|
||||
chart.render();
|
||||
return chart;
|
||||
})
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Nvue
|
||||
本插件通过`webview`组件使得 `antv F2` 能在`nvue`里使用。
|
||||
|
||||
* ✨ **温馨提示**
|
||||
* 🔔 Nvue 是指 app nvue，非使用nvue打包到小程序 h5等平台。
|
||||
* 👉 webview使用了网络路径，可自行下载放置根目录下的`hybrid`文件夹里再修改路径即可。
|
||||
* 🛡 **不需要引进F2 JS文件**，但需求引入插件
|
||||
* ⚙️ 在函数外面的数据需要通过`init`方法的第二个参数传递数据
|
||||
|
||||
```html
|
||||
<view class="f2"><l-f2 ref="chart"></l-f2></view>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseData: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.chart.init(config => {
|
||||
const chart = new F2.Chart(config);
|
||||
// 在函数外面的数据，需要在第二个参数传进去。
|
||||
// 数据名保持跟this里的一致
|
||||
chart.source(baseData);
|
||||
chart
|
||||
.interval()
|
||||
.position('genre*sold')
|
||||
.color('genre');
|
||||
chart.render();
|
||||
return chart;
|
||||
},
|
||||
// 在函数外面的数据需要传进组件
|
||||
{baseData: this.baseData}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
## Nvue 使用注意事项
|
||||
- 由于 nvue 使用的是字符串模板传输，打包的时候会被混淆压缩
|
||||
- 所在要保持 **关键词** 不被 **混淆压缩**
|
||||
|
||||
#### 1、F2、DataSet 不需要被引入
|
||||
|
||||
👎 错误
|
||||
|
||||
```js
|
||||
import F2 from '@/uni_modules/l-f2/components/l-f2/f2-all.min.js';
|
||||
import DataSet from '@/antv/DataSet'
|
||||
export default {
|
||||
...code
|
||||
}
|
||||
```
|
||||
|
||||
👍 正确
|
||||
|
||||
```js
|
||||
export default {
|
||||
...code
|
||||
}
|
||||
```
|
||||
|
||||
#### 2、引用函数外面数据的**关键词**不需要声明
|
||||
|
||||
👎 错误
|
||||
|
||||
```js
|
||||
const {data} = this
|
||||
this.$refs.chart.init(config => {
|
||||
chart.source(data);
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
👍 正确
|
||||
|
||||
```js
|
||||
// 所有用函数外里的数据，只要保持跟 this 里的一致
|
||||
this.$refs.chart.init(config => {
|
||||
chart.source(data);
|
||||
})
|
||||
|
||||
- or -
|
||||
|
||||
this.$refs.chart.init(config => {
|
||||
chart.source(this.data);
|
||||
})
|
||||
```
|
||||
|
||||
#### 3、引用函数外面的数据需要通过**params**或函数的第二个参数传递
|
||||
|
||||
👎 错误
|
||||
|
||||
```html
|
||||
<l-f2 />
|
||||
|
||||
- or -
|
||||
|
||||
this.$refs.chart.init(config => {...code})
|
||||
```
|
||||
|
||||
👍 正确
|
||||
|
||||
```html
|
||||
<l-f2 :params="{data}"/>
|
||||
|
||||
- or -
|
||||
|
||||
this.$refs.chart.init(config => {...code}, {data: this.data})
|
||||
```
|
||||
|
||||
## 不支持的功能
|
||||
- 目前由于小程序不支持 `document`，所以 `Guide.Html` 辅助元素组件目前仍无法使用，其他 F2 的功能全部支持。
|
||||
- **Nvue**是通过`webview`实现的,所以它不受影响！
|
||||
- **H5** uni官方 `canvas` 模拟了 小程序 所以也不支持 。
|
||||
- 缩放手势暂时不支持，因为原厂也不支持小程序，将来如果有需要考虑修改源码。
|
||||
- 词云只支持H5。
|
||||
|
||||
|
||||
## Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------------- | -------- | ------- | ------------ | ----- |
|
||||
| custom-style | 自定义样式 | `string` | - | - |
|
||||
| params | 仅针对nvue的数据传递,同init函数的第二个参数，两选一 | `object` | - | - |
|
||||
| webviewStyles | 仅针对nvue的webview设置样式 | `object` | - | - |
|
||||
| source | 图表数据 | `array` | - | 0.3.0 |
|
||||
| type | canvas 类型 2d 仅针对微信和头条有效 | `string` | `2d` | 0.3.0 |
|
||||
| isAutoPlay | 设置了上方的 图表数据 再 设置本参数 ，只要数据发生改动就更新图表 | `boolean` | `false` | 0.3.0 |
|
||||
| is-disable-scroll | 触摸图表时是否禁止页面滚动 | `boolean` | `false` | |
|
||||
|
||||
## 事件
|
||||
|
||||
| 参数 | 说明 |
|
||||
| --------------- | --------------- |
|
||||
| init(callback, data) | **callback**: 回调函数 **data**: `nvue` 如果使用了外部数据，需要传递 |
|
||||
| changeData(data) | 更新数据 ，传递是数据数组 |
|
||||
| clear() | 清除所有 |
|
||||
| destroy() | 销毁实例 |
|
||||
| repaint() | 用于暂时只更新数据，等需要时再调用重绘 |
|
||||
| reset(callback, data) | 重新定义图形语法，改变图表类型和各种配置, **callback**: 回调函数 **data**: `nvue` 如果使用了外部数据，需要传递 |
|
||||
| canvasToTempFilePath(opt) | 用于生成图片 |
|
||||
|
||||
## 打赏
|
||||
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user