xioxin / taro-f2 Goto Github PK
View Code? Open in Web Editor NEWThis project forked from nervjs/taro-ui-sample
Taro多端F2图表
This project forked from nervjs/taro-ui-sample
Taro多端F2图表
组件好像没有暴露可以动态更新图表的props。如何根据网络请求更新当前的图表?
是我代码的问题吗?求大佬看一下,代码如下
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { F2Canvas } from 'taro-f2'
import PropTypes from 'prop-types'
import _ from 'lodash';
import { DataSet } from '@antv/data-set';
import F2 from '@antv/f2'
export default class Lines extends Component {
static propTypes = {
data: PropTypes.array,
height: PropTypes.number,
}
static defaultProps = {
data: [],
height: 250,
}
drawArgs = [];
handleInit = (canvas, width, height) => {
this.drawArgs = [canvas, width, height];
if (this.props.data.length) {
this.draw();
}
}
computeTickCount = data => {
let tickLength = 0;
let tmpLabel;
data.forEach(v => {
if (!tmpLabel) {
tmpLabel = v.label;
}
if (v.label === tmpLabel) {
tickLength++;
}
});
const getTickCount = len => {
const isOdd = len % 2 !== 0;
if (len <= 6) return len;
const factor = Math.ceil(len / 6);
while (len % factor) {
len++;
}
let count = len / factor;
if (!isOdd) count--;
return count;
}
return getTickCount(tickLength);
}
draw(data) {
if (!this.drawArgs.length) return;
const [canvas, width, height] = this.drawArgs;
data = data || this.props.data;
this.chart = this.chart || new F2.Chart({
el: canvas,
width,
height
});
const chart = this.chart;
chart.clear(); // 清除
data = this.transform(data);
chart.source(data, {
x: {
tickCount: this.computeTickCount(data),
}
});
/** 如果data为空, chart.get('legendController').legends为空,且不会再更新*/
data.length && chart.tooltip({
showCrosshairs: true,
custom: true,
onChange: obj => {
const legend = chart.get('legendController').legends.top[0];
const tooltipItems = obj.items;
const legendItems = legend.items;
const map = {};
legendItems.map(item => {
map[item.name] = _.clone(item);
});
tooltipItems.map(item => {
const name = item.name;
const y = item.origin.y;
if (map[name]) {
map[name].value = y ? y : '0';
}
});
legend.setItems(_.values(map));
},
onHide: () => {
const legend = chart.get('legendController').legends.top[0];
legend.setItems(chart.getLegendItems().label);
}
});
chart.area().position('x*y').color('label');
chart.line().position('x*y').color('label').size(2);
chart.point().position('x*y').color('label');
chart.render();
}
componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.props.data) {
this.draw(nextProps.data);
}
}
transform(data) {
const { alias } = this.props;
const fields = data.length
? Object.keys(data[0]).filter(k => /^y\d+/.test(k))
: ['series1', 'series2'];
const ds = new DataSet();
const dv = ds.createView().source(data);
const fieldMap = fields.reduce((t, v, i) => ({ ...t, [v]: alias[i] }), {});
dv.transform({
type: 'rename',
map: fieldMap,
}).transform({
type: 'fold',
fields: alias,
key: 'label',
value: 'y',
});
return dv.rows;
}
render() {
const { height, data } = this.props
return (
<View style={width:100%;height:${height}px
}>
{data.length && }
)
}
}
编译小程序报错, 运行报错为taro-f2的weapp包里找不到index文件。 但是我打开包里看见有个index.ts 我把后缀名改成js命令行里不报错了。小程序里面还是报错找不到index。。
换了不同项目环境还是编译不成功
JavaScript 环境下
`
配置环境:
"dependencies": {
"@tarojs/components": "2.0.1",
"@tarojs/components-qa": "2.0.1",
"@tarojs/router": "2.0.1",
"@tarojs/taro": "2.0.1",
"@tarojs/taro-alipay": "2.0.1",
"@tarojs/taro-h5": "2.0.1",
"@tarojs/taro-qq": "2.0.1",
"@tarojs/taro-quickapp": "2.0.1",
"@tarojs/taro-rn": "2.0.1",
"@tarojs/taro-swan": "2.0.1",
"@tarojs/taro-tt": "2.0.1",
"@tarojs/taro-weapp": "2.0.1",
"nerv-devtools": "^1.5.5",
"nervjs": "^1.5.5",
"@antv/f2": "^3.5.0",
"taro-f2": "^2.2.0"
},
`
报错:
source.removeEventListener is not a function
Typescript环境下
`
配置环境:
"dependencies": {
"@antv/f2": "^3.4.0",
"@tarojs/async-await": "^1.3.11",
"@tarojs/components": "1.3.5",
"@tarojs/redux": "^1.3.11",
"@tarojs/redux-h5": "^1.3.10",
"@tarojs/router": "1.3.5",
"@tarojs/taro": "1.3.5",
"@tarojs/taro-alipay": "1.3.5",
"@tarojs/taro-h5": "1.3.5",
"@tarojs/taro-swan": "1.3.5",
"@tarojs/taro-tt": "1.3.5",
"@tarojs/taro-weapp": "^1.3.5",
"dva-core": "^1.4.0",
"dva-loading": "^3.0.12",
"nerv-devtools": "^1.4.0",
"nervjs": "^1.4.0",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"taro-f2": "^2.1.2",
"taro-skeleton": "^1.0.10",
"taro-ui": "^2.2.3",
},
`
报错:
source.removeEventListener is not a function
module "npm/@antv/f2/npm/@antv/util/lib/to-string" is not defined
Error: module "npm/@antv/f2/npm/@antv/util/lib/to-string" is not defined
"@antv/f2": "^3.5.0",
"taro-f2": "^2.2.0",
我有一个首页其中有柱状图A,由首页进入详情页 有柱状图B,这时会发生 图 B会被图A影响,具体就是 图A的一些属性和方法,在图B实例化后就已经有了 麻烦告知一下解决方法
是用了现在最新的taro创建的
taro版本号:1.3.22
taro-f2: "^2.1.2"
调试项目地址:https://dev.tencent.com/u/heimiao66/p/my-taro-app/git
onCanvasInit 初始化函数是在componentWillMount()前就调用了。如果后续图表有数据更新,不知在哪重绘图表
import Taro, {Component} from '@tarojs/taro'
import {View} from '@tarojs/components'
import {AtAccordion, AtList, AtListItem, AtIcon} from 'taro-ui'
import moment from 'moment'
import {F2Canvas} from "taro-f2";
import F2 from "@antv/f2"
import {getJSON, postJSON} from '../../utils/request'
import api from '../../constants/api'
import Calendar from '../../components/calendar/calendar'
import './index.less'
const fixF2 = (FF) => {
if ((!FF) || F2.TaroFixed) {
return FF
}
if (process.env.TARO_ENV !== 'h5') {
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;
}
FF.Util.measureText = function (text, font, ctx) {
if (!ctx) {
let fontSize = 12;
if (font) {
fontSize = parseInt(font.split(' ')[3], 10);
}
fontSize /= 2;
return {
width: strLen(text) * fontSize
};
}
ctx.font = font || '12px sans-serif';
return ctx.measureText(text);
};
FF.Util.addEventListener = function (source, type, listener) {
source.addListener(type, listener);
};
FF.Util.getStyle = function (el, property) {
return el.currentStyle ? el.currentStyle[property] : undefined;
};
FF.Util.removeEventListener = function (source, type, listener) {
source.removeListener(type, listener);
};
FF.Util.createEvent = function (event, chart) {
const type = event.type;
let x = 0;
let y = 0;
const touches = event.touches;
if (touches && touches.length > 0) {
x = touches[0].x;
y = touches[0].y;
}
return {
type,
chart,
x,
y
};
};
if (Taro && Taro.getSystemInfoSync) {
const systeamInfo = Taro.getSystemInfoSync();
if (systeamInfo && systeamInfo.pixelRatio) {
FF.Global.pixelRatio = systeamInfo.pixelRatio
}
}
} else {
FF.Global.pixelRatio = window.devicePixelRatio
}
FF.TaroFixed = true;
return FF
}
export default class Index extends Component {
config = {
navigationBarTitleText: '图表中心'
}
constructor() {
super(...arguments)
this.state = {
open: false,
currentDay: '',
showCalendar: false,
marks: [],
dailyRates: [],
}
}
//incomeRates
incomeRates(canvas, width, height) {
fixF2(F2);
const dailyRates = this.state.dailyRates || [];
console.log('incomRates = ',dailyRates);
const chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(dailyRates, {
total_income: {
tickCount: 5
}
});
chart.tooltip({
showItemMarker: false,
onShow(ev) {
const {items} = ev;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = '¥ ' + items[0].value;
}
});
chart.interval().position('day*total_income');
chart.render();
return chart;
}
onReachBottom() {
console.log('到底了。。。')
}
componentWillMount() {
console.log(moment().format('YYYY-MM-DD'));
this.setState({currentDay: moment().format('YYYY-MM-DD')}, async () => {
let sevenDay = JSON.stringify(this.sevenDayArr(this.state.currentDay));
let dailyRates = await postJSON(api.getDailyRates, {
day: sevenDay,
});
if (dailyRates.data.status === 'ok') {
this.setState({
dailyRates: dailyRates.data.data,
})
}
console.log('res = ', dailyRates.data.data);
let result = await getJSON(api.dayMarks);
if (result.data.status === 'ok') {
this.setState({
marks: result.data.data,
})
}
})
}
componentDidMount() {
}
//返回最近7天日期数组
sevenDayArr(day) {
let tempArr = [];
for (let i = 6; i >= 0; i--) {
tempArr.push(moment(day)
.subtract(i, 'days')
.format('YYYY-MM-DD'));
}
return tempArr
}
showCalendar() {
// Taro.showToast({
// title: '显示日历'
// })
this.setState({
showCalendar: !this.state.showCalendar,
})
}
onDayClick(dayStr) {
console.log(dayStr)
// Taro.showLoading();
this.setState({
showCalendar: !this.state.showCalendar,
currentDay: dayStr,
}, () => {
getJSON(api.getCommonData, {
day: this.state.currentDay,
}).then(res => {
// if(res.status =='ok'){
// this.setState({
// marks:res.marks,
// })
// }
});
})
}
render() {
const {currentDay, showCalendar, marks, dailyRates} = this.state;
return (
<View className='index'>
<AtList>
<AtListItem
title={currentDay}
onClick={this.showCalendar.bind(this)}
arrow={showCalendar ? 'up' : 'down'}
thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
/>
</AtList>
{showCalendar ?
<Calendar marks={marks} currentDay={currentDay} onDayClick={this.onDayClick.bind(this)}/> : null}
<View style='width:100%;height:300px'>
{dailyRates && <F2Canvas onCanvasInit={this.incomeRates.bind(this)}></F2Canvas>}
</View>
</View>
)
}
}
npm ERR! path E:\练习\myWeChat\node_modules.node-sass.DELETE\vendor\win32-x64-72\binding.node
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
npm ERR! Error: EPERM: operation not permitted, unlink 'E:\练习\myWeChat\node_modules.node-sass.DELETE\vendor\win32-x64-72\binding.node'
npm ERR! [OperationalError: EPERM: operation not permitted, unlink 'E:\练习\myWeChat\node_modules.node-sass.DELETE\vendor\win32-x64-72\binding.node'] {
npm ERR! cause: [Error: EPERM: operation not permitted, unlink 'E:\练习\myWeChat\node_modules.node-sass.DELETE\vendor\win32-x64-72\binding.node'] {
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: 'E:\练习\myWeChat\node_modules\.node-sass.DELETE\vendor\win32-x64-72\binding.node'
npm ERR! },
npm ERR! stack: "Error: EPERM: operation not permitted, unlink 'E:\练习\myWeChat\node_modules\.node-sass.DELETE\vendor\win32-x64-72\binding.node'",
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: 'E:\练习\myWeChat\node_modules\.node-sass.DELETE\vendor\win32-x64-72\binding.node',
npm ERR! parent: 'myWeChat'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Thinkpad\AppData\Roaming\npm-cache_logs\2019-12-05T08_38_19_313Z-debug.log
taro从1,3,19升级到最近版本1.3.21,编译代码出现异常
Error: Couldn't find preset "@babel/preset-env" relative to directory "D:\\work\\minishopvrm\\node_modules\\@antv\\adjust"
at C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
at OptionManager.mergePresets (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
at OptionManager.mergeOptions (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
at OptionManager.init (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transform (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\@tarojs\transformer-wx\lib\src\index.js:172:30)
module "npm/@antv/f2/lib/component/tooltip.js" is not defined
这之类的,经常报找不到文件
请问怎样按需引入,现在项目太大了。谢谢
请问,这个函数只执行一次吗,我现在的问题是我页面有搜索条件(日期(年月日)切换),初始化时执行了这个onCanvasInit ,但是我切换日期后,返回了新的data,这个onCanvasInit不会重新执行,数据不会更新,请问这个怎么处理
我注意到两个问题:
图标在按照蚂蚁官方文档进行平移处理时,方法报错
`
chart.interaction is not a function; [Component] Event Listener Error @ npm/taro-f2/dist/weapp/components/f2-canvas/f2-canvas#(anonymous)
TypeError: chart.interaction is not a function
chart.scrollBar is not a function; [Component] Event Listener Error @ npm/taro-f2/dist/weapp/components/f2-canvas/f2-canvas#(anonymous)
TypeError: chart.scrollBar is not a function
`
import { fixF2 } from "taro-f2/dist/weapp/common/f2-tool.ts";
./node_modules/taro-f2/dist/weapp/common/f2-tool.ts
Module build failed (from ./node_modules/@tarojs/mini-runner/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/kedehua/projects_2020/ding-pt-school/node_modules/taro-f2/dist/weapp/common/f2-tool.ts: Unexpected token, expected "," (3:25)
1 | import Taro from '@tarojs/taro'
2 |
> 3 | export function fixF2 (F2: any): any {
| ^
4 | if( ( !F2 ) || F2.TaroFixed){return F2}
5 | if (process.env.TARO_ENV !== 'h5') {
6 | function strLen(str) {
我的项目是不支持ts ,请问各位大佬怎么解决?
在H5环境下,Tooltip 无法出现。初步怀疑是无法响应到点击事件。
直接用发现报错,调试之后发现是用onInit方法
drawRadar里面的操作(我执行的onStart)会执行多次,次数好像是根据componentWillMount进入页面的setState有关
ReferenceError: F2Canvas is not defined
请问现在有啥解决方案嘛?
按照README.md中提供的方法,写了一个范例。
npm run dev:h5的时候提示 Compiled successfully!
,
但是控制台打印结果报错:**Taro is not defined**
。
具体报错信息如下:
ReferenceError: Taro is not defined at eval (index.js?bd59:4) at Module../node_modules/taro-f2/dist/h5/index.js (vendors~index_index.js:151) at __webpack_require__ (app.js:767) at fn (app.js:130) at eval (index.js:6) at Module../.temp/pages/index/index.js (index_index.js:11) at __webpack_require__ (app.js:767) at fn (app.js:130) at <anonymous>
请问是什么原因?怎么解决呢?
Cannot read property 'defaultView' of undefined; [Component] Event Listener Error @ npm/taro-f2/dist/weapp/components/f2-canvas/f2-canvas#(anonymous)
TypeError: Cannot read property 'defaultView' of undefined
因为只需要绘制折线图,引的包太大了,taro-f2 怎么实现按需引用呢?
https://github.com/antvis/wx-f2
最新版已经支持了。
我按照官方的示例使用,结果编译成小程序的时候出现以下错误,请问如何解决?
我的环境:
"dependencies": {
"@antv/f2": "^3.6.0-alpha.1",
"@tarojs/components": "2.0.1",
"@tarojs/components-qa": "2.0.1",
"@tarojs/mobx": "2.0.1",
"@tarojs/mobx-h5": "2.0.1",
"@tarojs/router": "2.0.1",
"@tarojs/taro": "2.0.1",
"@tarojs/taro-alipay": "2.0.1",
"@tarojs/taro-h5": "2.0.1",
"@tarojs/taro-qq": "2.0.1",
"@tarojs/taro-quickapp": "2.0.1",
"@tarojs/taro-swan": "2.0.1",
"@tarojs/taro-tt": "2.0.1",
"@tarojs/taro-weapp": "2.0.1",
"babel-runtime": "^6.26.0",
"mobx": "4.8.0",
"nerv-devtools": "^1.5.5",
"nervjs": "^1.5.5",
"taro-f2": "^2.2.0",
"taro-ui": "^2.2.4"
},
"devDependencies": {
"babel-plugin-transform-runtime": "^6.23.0",
"@types/react": "^16.4.6",
"@types/webpack-env": "^1.13.6",
"@tarojs/mini-runner": "2.0.1",
"@tarojs/webpack-runner": "2.0.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-jsx-stylesheet": "^0.6.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-eslint": "^8.2.3",
"eslint": "^5.16.0",
"eslint-config-taro": "2.0.1",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-react-hooks": "^1.6.1",
"eslint-plugin-import": "^2.12.0",
"stylelint": "9.3.0",
"stylelint-config-taro-rn": "2.0.1",
"stylelint-taro-rn": "2.0.1",
"eslint-plugin-taro": "2.0.1",
"@typescript-eslint/eslint-plugin": "^2.13.0",
"@typescript-eslint/parser": "^2.13.0",
"typescript": "^3.0.1"
}
拿 Taro 来开发 支付宝小程序,在 page 里面的直接配置
usingComponents: { 'f2': '@antv/my-f2', }
找不到 f2 这个组件
页面A引入 taro-f2 的 F2Canvas 后,使用 Taro.navigateTo 无法跳转到页面B。
不过浏览器地址变了,并且只会变为hash模式的地址,无法变为browser模式的地址(config/index.js配置了h5 router mode 是 browser)。
import { F2Canvas } from "taro-f2";
// xxxx
const goToDetailPage = () => {
Taro.navigateTo({
url: "/pages/detail/index"
});
};
// xxxx
<Button onClick={goToDetailPage}>�查看详情</Button>
<View style='width:100%; height:500px'>
<F2Canvas onCanvasInit={drawRadar} />
</View>
页面跳转正常,无论是hash模式还是browser模式。
无报错信息
Taro v2.0.2
Taro CLI 2.0.2 environment info:
System:
OS: macOS 10.15.3
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.14.1 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.6 - /usr/local/bin/npm
npmPackages:
@tarojs/components: 2.0.2 => 2.0.2
@tarojs/components-qa: 2.0.2 => 2.0.2
@tarojs/mini-runner: 2.0.2 => 2.0.2
@tarojs/mobx: 2.0.2 => 2.0.2
@tarojs/mobx-h5: 2.0.2 => 2.0.2
@tarojs/router: 2.0.2 => 2.0.2
@tarojs/taro: 2.0.2 => 2.0.2
@tarojs/taro-alipay: 2.0.2 => 2.0.2
@tarojs/taro-h5: 2.0.2 => 2.0.2
@tarojs/taro-qq: 2.0.2 => 2.0.2
@tarojs/taro-quickapp: 2.0.2 => 2.0.2
@tarojs/taro-swan: 2.0.2 => 2.0.2
@tarojs/taro-tt: 2.0.2 => 2.0.2
@tarojs/taro-weapp: 2.0.2 => 2.0.2
@tarojs/webpack-runner: 2.0.2 => 2.0.2
eslint-config-taro: 2.0.2 => 2.0.2
eslint-plugin-taro: 2.0.2 => 2.0.2
nerv-devtools: ^1.5.5 => 1.5.6
nervjs: ^1.5.5 => 1.5.6
stylelint-config-taro-rn: 2.0.2 => 2.0.2
stylelint-taro-rn: 2.0.2 => 2.0.2
问题应该出在 node_modules/taro-f2/dist/h5/index.js 这个文件,其中有关于路由的代码。
此文件代码如下:
我希望onCanvasInit 返回this.$scope
import Taro, { Component, Config } from '@tarojs/taro';
import { View } from '@tarojs/components';
import data from '../../data/sroll-line.js';
import { F2Canvas } from 'taro-f2';
const F2 = require('@antv/f2/lib/core'); // 必须引入
require('@antv/f2/lib/geom/interval'); // 引入 interval 几何标记
require('@antv/f2/lib/coord/polar'); // 引入 极坐标
require('@antv/f2/lib/geom/adjust/stack'); // 引入数据层叠调整类型
require('@antv/f2/lib/interaction/');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
const Tooltip = require('@antv/f2/lib/plugin/tooltip');
F2.Chart.plugins.register([ScrollBar, Tooltip]);
export default class Index extends Component {
config = {
navigationBarTitleText: '线图平移交互(长按展示 tooltip)',
disableScroll: true,
};
state = {};
initChart(canvas, width, height) {
try {
// F2Canvas.fixF2(F2);
} catch (error) {
console.log('TCL: Index -> initChart -> error', error);
}
const chart = new F2.Chart({
el: canvas,
width,
height,
animate: false,
});
chart.source(data, {
release: {
min: 1990,
max: 2010,
},
});
chart.tooltip({
showCrosshairs: true,
showItemMarker: false,
background: {
radius: 2,
fill: '#1890FF',
padding: [3, 5],
},
nameStyle: {
fill: '#fff',
},
onShow(ev) {
const items = ev.items;
items[0].name = items[0].title;
},
});
chart.line().position('release*count');
chart
.point()
.position('release*count')
.style({
lineWidth: 1,
stroke: '#fff',
});
chart.interaction('pan', {
mode: 'x',
onEnd(a) {
console.log('onEnd', a);
},
onStart(a) {
console.log('onStart', a);
},
});
chart.interaction('swipe', {
speed: 15,
});
// 定义进度条
chart.scrollBar({
mode: 'x',
xStyle: {
offsetY: -5,
},
});
// 绘制 tag
chart.guide().tag({
position: [1969, 1344],
withPoint: false,
content: '1,344',
limitInPlot: true,
offsetX: 5,
direct: 'cr',
});
chart.render();
return chart;
}
render() {
console.log('FFFF', F2);
return (
<View style={{ height: '100%', width: '100%' }}>
<F2Canvas onCanvasInit={this.initChart.bind(this)}></F2Canvas>
</View>
);
}
}
configuration.module.rules[6].include[0]: The provided value "taro-f2" is not an absolute path!
请问有没有什么解决方案
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.