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

[Jef-Z]

Taro@3.0.14 techarts@3.0.4

您好：

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

[elvinzhu]

techart 本身没有设置任何层级，只是内部使用了canvas。你说的覆盖问题应该是小程序原生组件的层级问题，请考虑使用cover-view 来遮住 图表