import echarts from 'echarts'

function drawSafetyBar(carDataArray, shipDataArray, plateDataArray) {
    let myChart = echarts.init(document.getElementById('safetyBarIndex'))
    myChart.setOption({
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle: {
                color: '#33FF90'
            },
            extraCssText: 'background-color: rgba(73,177,231, 0.1);'
        },
        legend: {
            data: ['船舶', '车辆'],
            top: '6%',
            right: '4%',
            textStyle: {
                color: '#33FFF8'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: plateDataArray,
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    color: '#33FFF8'
                },
                splitLine: {
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    color: '#33FFF8'
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: [ '#315070' ],
                        width: 1,
                        type: 'dashed'
                    }
                }
            }
        ],
        series: [
            {
                name: '船舶',
                type: 'bar',
                barWidth: '12%',
                color: 'rgb(88,228,239)',
                itemStyle: {
                    normal: {
                        label: {
                            show: true, // 开启显示
                            position: 'top', // 在上方显示
                            textStyle: { // 数值样式
                                color: '#ffffff',
                                fontSize: 12
                            }
                        },
                        barBorderRadius: [15, 15, 0, 0],
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#00ACFE' },
                            { offset: 0.5, color: '#034B88' },
                            { offset: 1, color: '#051A4C' }
                        ])
                    }
                },
                data: shipDataArray
            },
            {
                name: '车辆',
                type: 'bar',
                barWidth: '12%',
                color: 'rgb(73,117,231)',
                itemStyle: {
                    normal: {
                        label: {
                            show: true, // 开启显示
                            position: 'top', // 在上方显示
                            textStyle: { // 数值样式
                                color: '#ffffff',
                                fontSize: 12
                            }
                        },
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#FED700' },
                            { offset: 0.5, color: '#846B03' },
                            { offset: 1, color: '#423105' }
                        ]),
                        barBorderRadius: [ 15, 15, 0, 0 ]
                    }
                },
                data: carDataArray
            }
        ]
    })
    window.addEventListener('resize', () => { myChart.resize() })
}

export default {
    drawSafetyBar
}