import * as echarts from 'echarts'
import _ from 'lodash';
export const getOption = (datas) => {
    var data2 = datas.map(data => {
        return data.vegetationcover;
    })
    var xData = datas.map(data => {
        return data.areaName
    });
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',

                textStyle: {
                    color: '#fff',
                },
            },
            backgroundColor: '#05294D',
            borderColor: '#135469',
            borderWidth: 2,
            padding: [20, 20, 20, 20],
            // formatter: function (params) {
            //     // console.log(params.length == 0);
            //     if (params.length === 0) {
            //         let result =
            //             '<span style="font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;">' +
            //             '至少选中一条图例' +
            //             '</span>' +
            //             '<br>';
            //         return result;
            //     } else if (params.length === 1) {
            //         const paramsArray = [];
            //         params.forEach((v) => {
            //             // console.log(v.name);
            //             if (v.seriesName === '趋势') {
            //                 v.color = '#F3C452';
            //             } else {
            //                 v.color = '#02DBF1';
            //             }
            //             paramsArray.push({
            //                 name: v.name,
            //                 seriesName: v.seriesName,
            //                 data: v.data,
            //                 color: v.color,
            //             });
            //         });
            //         // console.log(paramsArray);
            //         let result =
            //             '<span style="font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;">' +
            //             paramsArray[0].name +
            //             '</span>' +
            //             '<br>';
            //         result +=
            //             '<div style="display:flex;">' +
            //             '<div style="font-size: 20px;font-family: MicrosoftYaHeiUI;color: ' +
            //             paramsArray[0].color +
            //             ';line-height: 25px;margin-top:10px;margin-right:28px;">' +
            //             '旅客' +
            //             paramsArray[0].seriesName +
            //             '<div style="font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color:' +
            //             paramsArray[0].color +
            //             ';line-height: 33px;">' +
            //             paramsArray[0].data +
            //             '人公里' +
            //             '</div>' +
            //             '</div>' +
            //             '</div>';
            //         return result;
            //     } else {
            //         let result =
            //             '<span style="font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;">' +
            //             params[0].name +
            //             '</span>' +
            //             '<br>';
            //         result +=
            //             '<div style="display:flex;">' +
            //             '<div style="font-size: 20px;font-family: MicrosoftYaHeiUI;color: #02DBF1;line-height: 25px;margin-top:10px;margin-right:28px;">' +
            //             '旅客' +
            //             params[0].seriesName +
            //             '<div style="font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #02DBF1;line-height: 33px;">' +
            //             params[0].data +
            //             '人公里' +
            //             '</div>' +
            //             '</div>' +
            //             '<div style="margin-top:10px;font-size: 20px;font-family: MicrosoftYaHeiUI;color: #F3C452;line-height: 25px;">' +
            //             '旅客' +
            //             params[1].seriesName +
            //             '<div style="font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #F3C452;line-height: 33px;">' +
            //             params[1].data +
            //             '人公里' +
            //             '</div>' +
            //             '</div>' +
            //             '</div>';
            //         return result;
            //     }
            // },
        },
        grid: {
            borderWidth: 0,
            top: '20',
            left: '0',
            bottom: '40',
            textStyle: {
                color: '#fff',
            },
            
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.5)',
                    },
                },
                axisLabel: {
                    overflow: "breakAll",
                    // width: 20,
                    textStyle: {
                        fontFamily: "Microsoft YaHei",
                        // color: "#fff", // x轴颜色
                        fontWeight: "normal",
                        fontSize: "14",
                        color: '#D5F0FF',
                        // lineHeight: 16,
                    },
                    interval: 0, //标签设置为全部显示
                    formatter: (value) => {
                        return value.split('').join('\n')
                    }
                    // rotate: -45
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitArea: {
                    show: false,
                },
                data: xData,
            },
        ],
        yAxis: [
            {
                show:false,
                type: 'value',
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    color: 'rgba(255,255,255,0.5)',
                    fontSize: 20,
                },
                splitArea: {
                    show: false,
                },
            },
        ],
        series: [

            {
                name: '',
                type: 'line',
                symbolSize: 10,
                symbol: 'circle',
                smooth: true,
                itemStyle: {
                    normal: {
                        color: 'rgba(255, 196, 53, 1)',
                        barBorderRadius: 0,
                    },
                },
                lineStyle: {
                    normal: {
                        width: 4,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#F0B62A', // 0% 处的颜色
                                },
                                {
                                    offset: 0.45,
                                    color: '#FFC12B', // 45% 处的颜色
                                },
                                {
                                    offset: 0.85,
                                    color: '#FFC12B', // 85% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#FFC12B', // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                    },
                },
                data: data2,
            },
        ],
    };


}