import echarts from 'echarts';
// import { LineChart } from 'echarts/charts';
// import {
//     TitleComponent,
//     TooltipComponent,
//     GridComponent,
//     DatasetComponent,
//     TransformComponent
// } from 'echarts/components';
// import { LabelLayout, UniversalTransition } from 'echarts/features';
// import { CanvasRenderer } from 'echarts/renderers';
// import { LegendComponent } from 'echarts/components';
// echarts.use([
//     TitleComponent,
//     TooltipComponent,
//     GridComponent,
//     DatasetComponent,
//     TransformComponent,
//     LineChart,
//     LabelLayout,
//     UniversalTransition,
//     CanvasRenderer,
//     LegendComponent,
// ]);

export default function showWave(id, data) {
    const option = {
        tooltip: {
            trigger: 'axis',
            formatter: '{b}: {c}'
        },
        grid: {
            left: 30,
            top: 10,
            right: 20,
            bottom: 20,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.legendData,
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#666666',
                fontSize: 10,
                // interval: 0,
            },
        },
        yAxis: {
            type: 'value',
            minInterval: 10,
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#888888',
                    width: 1
                }
            },
        },
        series: [
            {
                name: '合格率',
                data: data.seriesData,
                type: 'line',
                lineStyle: {
                    color: "#3D93FF"
                },
                itemStyle: {
                    opacity: 0
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#3D93FF' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(61, 147, 255, 0.42)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                smooth: true,
            }
        ]
    };
    
    const e = document.getElementById(id);
    let instance = echarts.getInstanceByDom(e);
    if (instance == null) {
        instance = echarts.init(e);
    }
    instance.setOption(option);
    setTimeout(() => {
        window.onresize = function () {
            instance.resize();
        };
    }, 2000);
}