elvinzhu / techarts Goto Github PK

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>
    );
}

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