<!-- 折线图 -->
<template>
    <div :id="id" class="chart" />
</template>

<script>
    import ChartBase from '@/components/Base/ChartsBase.js';
    import {
        ChartStyle
    } from '@/common/const.js';
    import {
        toFixedNum
    } from '@/common/util.js';

    export default {
        mixins: [ChartBase],
        methods: {
            setOptions(chartData) {
                if (!this.chart || !chartData) return;
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: params => {
                            let newParams = [...params];
                            let tooltip = params[0].axisValue + '<br/>';
                            newParams.forEach(p => {
                                const cont = p.marker + ' ' + p.seriesName + ': ' + toFixedNum(p.value,2) + (chartData.dataList[p.seriesIndex].cpunit || '') + '<br/>';
                                tooltip += cont;
                            });
                            return tooltip;
                        },
                        textStyle: {
                            align: 'left'
                        }
                    },
                    dataZoom: {
                      type: 'inside'
                    },
                    color: ChartStyle.color,
                    xAxis: {
                        data: chartData.xAxis,
                        axisLine: {
                            lineStyle: {
                                color: ChartStyle.axis.color,
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            fontSize: ChartStyle.axis.fontSize,
                            interval: parseInt(chartData.xAxis.length / 5),
                            showMinLabel: false,
                        }
                    },
                    yAxis: {
                        name: chartData.unit ?? '',
                        nameTextStyle: {
                            color: ChartStyle.axis.color
                        },
                        scale: true,
                        splitNumber: 3,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: ChartStyle.axis.color,
                            fontSize: ChartStyle.axis.fontSize
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: ChartStyle.split.color,
                                opacity: ChartStyle.split.opacity,
                            }
                        }
                    },
                    series: [],
                    grid: {
                        top: '15%',
                        left: '2%',
                        right: '2%',
                        bottom: '12%',
                        containLabel: true
                    }
                };
                // if(chartData.dataList.length > 1){
                option.legend = {
                    bottom: 0,
                    textStyle: {
                        color: ChartStyle.legend.color,
                        fontSize: ChartStyle.legend.fontSize
                    },
                    icon: 'diamond',
                    itemHeight: 10,
                    itemGap: 40,
                }
                // }
                for (let i of chartData.dataList) {
                    option.series.push({
                        type: 'line',
                        step: 'end',
                        name: i.name,
                        data: i.value
                    });
                }
                this.chart.setOption(option);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .chart {
        width: 100%;
        height: 100%;
    }
</style>
