elvinzhu / techarts Goto Github PK

View Code? Open in Web Editor NEW

70.0 70.0 20.0 741 KB

An out of the box Taro component for ECharts

JavaScript 6.49% TypeScript 93.51%

techarts's People

Contributors

Stargazers

Watchers

Forkers

mofeiren hackkun aliezsss4 xinkid520 twtcer zyk1236 wangrui97 jasmine-na tianya1015 wenxiangdong ppbl celian521 heronyu petergzc zhoulujun008 eat-happy 996321301 uwang xyw1229

techarts's Issues

虽然有点小问题，但是可以用，支持作者

描述

感谢作者的项目，大大方便了我的工作内容
我在使用时发现直接设置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

在 iphone6 IOS 11.0.03 微信版本7.0.8中崩溃

Taro 2.2.15

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

请问可以使用svg渲染吗？

var chart = echarts.init(containerDom, null, {renderer: 'svg'});

报错

一点击该组件就报错

h5端build后高度仍然不正常，调试时延后渲染可以正常显示

有解决办法吗

数组map动态创建EChart不显示

以列表列式动态创建EChart不报错也不显示，代码示例：
{
this.state.chartDataArr.map((item, index) => {
let cell =

return cell
})
}

为什么我用list map出来的图表有时会出来有时出不来

为什么我用list map出来的图表有时会出来有时出不来，正常展示的一个没问题，用的一模一样的配置。
问题好像是初始化时dom节点不存在，该组件的初始化就有问题

请问引入后打包的小程序体积过大怎么办

请问引入techarts后打包的小程序体积做了分包提交超过2m怎么办

echarts不显示，但是某次刷新或者修改了配置又会显示

引入组件，配置没错，但是不显示图片，也没报错。

经过一些修改，或者刷新，会忽然又显示，但是影响了其他布局的样式。
请问这需要怎么解决？

taro3.3.17 react ，"techarts": "^1.0.6" 报错。"techarts": "^3.0.6" weapp展示不出来图

支持曲线图左右滑动吗 ?

在开发工具和预览情况下都能正常显示图表，真机预览报错

我只想问下小程序上线之后会有影响吗

h5动态渲染后无法显示图表

const [show, setShow] = useState(true);
{!!show && <EChart echarts={echarts} option={setChartData(xData, yData, "分")} />}
像这样通过button等去切换EChart的状态，EChart无法正常的显示和隐藏。

请问支持datazoom缩放吗？

如何在图表上绑定事件？

onEvents={{ 'click': ()=>{}}} 这种绑定没有执行

Taro3 无法使用

作者,您好!
请问如何在Taro3使用.会报错

Taro3 微信小程序 Cannot read 'node' of null 报错

Hi，您好，

[email protected]
[email protected]（最新版本）

微信开发者工具中能出来图表，但有报错，麻烦看一下

真机调试出不来图表，而且有报错

可以考虑加一个loading 的配置

TypeError: Cannot read property 'forEach' of undefined H5报错

原因未知（可能是我在函数组件里用了这个），但是用这个可以解决，感觉不是最优解，觉得写成函数式组件可能可以解决，因为好多的错误都是 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=[]// ➕
  }

Taro 3.4.4 安装依赖报错

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

微信小程序中echart覆盖在了弹窗上面

[email protected]
[email protected]

您好：

微信小程序中设置taro UI的AtFloatLayout，会出现echart覆盖在弹窗上面。
设置某个view为 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>
    );
}