Vue.component("safe-curve-chart", {
    template: `
        <div :style="{height: height+'px'}" ref="chart">
            
        </div>
    `,
    props: {
        height:{
            type: Number,
        },
        momentdata:{
            type: Object,
        }
    },
    data() {
        return {

        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            this.momentCurveChart(this.momentdata)
        },
        momentCurveChart(data){
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                var myChart = echarts.init(this.$refs.chart);
                var color = '#20bc00'
                /* if(data.state == 1){
                     color = '#ff9600'
                 }*/
                var Xmax = Math.max.apply(null,data.dataX);
                var Ymax = Math.max.apply(null,data.dataY);


                option = {
                    tooltip: {
                        position: "top",
                        formatter: function (params) {
                            var fd = params.data[0];
                            var dz = params.data[1]
                            res = '<div style="padding: 5px 10px;">' +
                                '<div style="padding-bottom: 5px;">幅度：<span>'+fd+'</span> m</div>' +
                                '<div>吊重：<span>'+dz+'</span> t</div>' +
                                '</div>'
                            return res
                        },
                    },
                    grid: {
                        top: "20%",
                        right: "15%",
                        left: "4%",
                        bottom: "5%",
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: "value",
                            name:'幅度/m',
                            max:60,
                            nameTextStyle: {
                                color: "#c5d9fc",
                                fontSize:14,
                            },
                            splitLine: {
                                //去除网格线
                                show: false,
                            },
                            axisTick: { show: false },
                            axisLabel: {
                                //坐标轴刻度标签的相关设置
                                textStyle: {
                                    color: "#c5d9fc",
                                    margin: 20,
                                    fontSize:16
                                },
                            },

                        },
                        {
                            type: "category",
                            boundaryGap: false,
                            position: "bottom",
                            axisLine: {
                                //坐标轴轴线相关设置。数学上的x轴
                                show: true,
                                lineStyle: {
                                    color: "#194e92",
                                    type: "dashed",
                                },
                            },
                            axisTick: { show: false },
                            axisLabel: {
                                show: false,
                                //坐标轴刻度标签的相关设置
                                textStyle: {
                                    color: "#c5d9fc",
                                    margin: 20,
                                    fontSize:16
                                },
                            },
                            data: data.dataX,
                        },
                    ],
                    yAxis: [
                        {
                            name:'吊重/t',
                            nameTextStyle: {
                                color: "#c5d9fc",
                                fontSize:14,
                            },
                            max:Ymax+1,
                            type: "value",
                            splitNumber: 7,
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                //坐标轴轴线相关设置。数学上的x轴
                                show: true,
                                lineStyle: {
                                    color: "#194e92",
                                    type: "dashed",
                                },
                            },
                            axisLabel: {
                                margin: 20,
                                textStyle: {
                                    color: "#c5d9fc",
                                    fontSize:16
                                },
                            },
                            axisTick: { show: false },
                        },
                    ],
                    series: [
                        {
                            name: "吊重",
                            type: "effectScatter",
                            rippleEffect:{ // 设置涟漪动画样式
                                color:'purple',  // 涟漪颜色,默认为散点自身颜色
                                brushType:'fill', // 动画方式,全填充或只有线条,'stroke' 'fill'
                                period:2,   //动画周期
                                scale:'3',  //涟漪规模
                            },
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            symbolSize:15, //散点的固定大小
                            /*label: {
                                emphasis: {
                                    show: true,
                                    position: "right",
                                    textStyle: {
                                        color: color,
                                        fontSize: 20,

                                    },
                                },
                            },*/
                            itemStyle: {
                                color: color,

                            },
                            data: data.point,
                        },
                        {
                            type: "line",
                            symbol: "none",
                            smooth: true,
                            xAxisIndex: 1,
                            yAxisIndex: 0,
                            lineStyle: {
                                normal: {
                                    width: 3,
                                    color: "#5968db", // 线条颜色
                                },
                            },
                            areaStyle: {
                                //区域填充样式
                                normal: {
                                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            { offset: 0, color: "rgb(25,43,115,0.9)" },
                                            { offset: 0.7, color: "rgba(25,43,115, 0)" },
                                        ],
                                        false
                                    ),

                                    shadowColor: "rgba(25,43,115, 1)", //阴影颜色
                                },
                            },
                            data: data.dataY,
                        },
                    ],
                };

                myChart.setOption(option);
                window.onresize = myChart.resize;
            })
        },
    },
    watch:{
        momentdata: function (n,o) {
            this.init();
        }
    },

})