elvinzhu / techarts Goto Github PK
View Code? Open in Web Editor NEWAn out of the box Taro component for ECharts
An out of the box Taro component for ECharts
[email protected]
[email protected]
您好:
position: 'sticky', top: '0'
,echart也会覆盖在该view上面。代码如下,运行结果如图。
import React from 'react';
import ReactEchartsCore from 'techarts';
import * as echarts from 'echarts/src/echarts';
import { AtFloatLayout } from 'taro-ui';
import 'taro-ui/dist/style/components/float-layout.scss';
const results = [
{ time: '2020/07/31', value: 88.8, rate: 99.9 },
{ time: '2020/06/30', value: 87.2, rate: 99.3 },
{ time: '2020/05/31', value: 89.9, rate: 103 },
{ time: '2020/04/30', value: 93.5, rate: 105.8 },
];
const onInit = (canvas, width, height, dpr) => {
const chart = echarts.init(canvas, 'default', {
width: width,
height: height,
devicePixelRatio: dpr,
});
canvas.setChart(chart);
chart.setOption({
series: [{ type: 'bar' }, { type: 'line' }],
dataset: {
dimensions: ['time', 'value', 'rate'],
source: [
{ time: '2020/07/31', value: 88.8, rate: 99.9 },
{ time: '2020/06/30', value: 87.2, rate: 99.3 },
{ time: '2020/05/31', value: 89.9, rate: 103 },
],
},
xAxis: { type: 'category' },
yAxis: [{}, {}],
});
return chart;
};
export default function IndexPage() {
return (
<View style={{ height: '2000px' }}>
<AtFloatLayout isOpened title='这是个标题'>
这是内容区
</AtFloatLayout>
<View
style={{
height: '200px',
position: 'sticky',
top: '0',
backgroundColor: 'red',
}}
></View>
<ReactEchartsCore
onInit={(canvas, width, height, dpr) => onInit(canvas, width, height, dpr)}
echarts={echarts}
style={{ height: '220px' }}
option={{
series: [{ type: 'bar' }, { type: 'line' }],
dataset: {
dimensions: ['time', 'value', 'rate'],
source: [
{ time: '2020/07/31', value: 88.8, rate: 99.9 },
{ time: '2020/06/30', value: 87.2, rate: 99.3 },
{ time: '2020/05/31', value: 89.9, rate: 103 },
],
},
xAxis: { type: 'category' },
yAxis: [{}, {}],
}}
/>
</View>
);
}
在option中设置了title和legend 没有显示
如题报错
onEvents={{ 'click': ()=>{}}}
这种绑定 没有执行
Taro 2.2.15
为什么我用list map出来的图表有时会出来有时出不来,正常展示的一个没问题,用的一模一样的配置。
问题好像是初始化时dom节点不存在,该组件的初始化就有问题
虽然有点小问题,但是可以用,支持作者
var chart = echarts.init(containerDom, null, {renderer: 'svg'});
Module parse failed: Unexpected token (35:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const canvasId = this.getCanvasId();
| return (
<Canvas
| type="2d"
| className="techarts-canvas"
@ ./node_modules/techarts/dist/weapp/index.js 1:0-41 2:15-21
@ ./node_modules/techarts/dist/index.js
@ ./node_modules/@tarojs/mini-runner/node_modules/babel-loader/lib!./src/pages/Device/HistoryData/HistoryData.jsx
@ ./src/pages/Device/HistoryData/HistoryData.jsx
Taro 3.0.15,使用Nerv框架,没有显示,如果用Nerv是否需要修改?
VM75:1 Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.(./npm/_techarts@1.0.1@techarts/demo/src/components/EChart/index.wxss:2:18)
PS C:\Lance\TaroProjects\SmallWorkOrder_ts_sass> npm install techarts
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @tarojs/[email protected]
npm ERR! node_modules/@tarojs/components
npm ERR! @tarojs/components@"3.4.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @tarojs/components@"^2.2.3" from [email protected]
npm ERR! node_modules/techarts
npm ERR! techarts@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Program Files\nodejs\node_cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Program Files\nodejs\node_cache\_logs\2022-04-14T06_52_11_651Z-debug-0.log
chart组件无法随页面滚动, 一只处于渲染时所在的位置,一滚动就覆盖其它元素
请问引入techarts后打包的小程序体积做了分包提交超过2m怎么办
const [show, setShow] = useState(true);
{!!show && <EChart echarts={echarts} option={setChartData(xData, yData, "分")} />}
像这样通过button等去切换EChart的状态,EChart无法正常的显示和隐藏。
原因未知(可能是我在函数组件里用了这个),但是用这个可以解决,感觉不是最优解,觉得写成函数式组件可能可以解决,因为好多的错误都是 component.hooks里的
import Taro, { Component } from '@tarojs/taro';
import Nerv from 'nervjs'// ➕
import { Canvas } from '@tarojs/components';
import WxCanvas from './wx-canvas';
import './index.less';
let INSTANCE_COUNTER = 0;
export default class EChart extends Component {
constructor(props) {
super(props);
this.echarts = props.echarts;
this.chart = null; // echarts instance
this.canvasId = '__techarts__' + INSTANCE_COUNTER++;
this.state = {
isUseNewCanvas: false,
};
this.effects=[]// ➕
this.layoutEffects=[]// ➕
this.getState=()=>{}// ➕
this.clearCallBacks=()=>{}// ➕
this.hooks=[]// ➕
}
感谢作者的项目,大大方便了我的工作内容
我在使用时发现直接设置option可以渲染,但是通过实例去setOption,会无显示内容
const Chart = () => {
const chartRef = useRef<EChart>(null);
useEffect(() => {
chartRef.current?.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true,
},
],
});
}, []);
return (
<View style={{ height: 300 }}>
<EChart ref={chartRef} echarts={echarts} option={{}} />
</View>
);
};
"@tarojs/cli": "3.3.7",
"@tarojs/taro": "3.3.7",
"techarts": "^3.0.4",
"react": "^17.0.0",
"echarts": "5.2.1",
微信库: 2.19.5
作者,您好!
请问如何在Taro3使用.会报错
h5端build后高度仍然不正常,调试时延后渲染可以正常显示
有解决办法吗
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.