import Common from "./common";

export default class Line extends Common {

    constructor(el, option) {
        super(el, option);
        this.init();

    }
    init() {
        this.myChart = this.$e.init(this.$el);
        this.setCharts();
        this.myChart.setOption(this.chartOption, true);
        window.addEventListener("resize", () => {
            this.myChart.resize();
        });

    }

    setCharts() {
        this.chartOption = {

            tooltip: {
                trigger: "axis",

            },
            grid: {
                left: "5%",
                right: "5%",
                bottom: "8%",
                top: '20%',
                containLabel: true
            },
            xAxis: {
                type: "category",
                // data: yearList,
                data: [
                    "2018年", "2019年", "2020年", "2021年", "2028年",
                ],
                splitLine: {//分割线配置
                    show: false
                },
                axisLabel: {  // x轴线文字的样式
                    textStyle: {
                        color: "#A1D1EF",
                        fontSize: 14
                    },
                },
                axisTick: {
                    show: false
                },
                axisLine: {//x轴线的颜色以及宽度
                    show: true,
                    lineStyle: {
                        color: " #6AC1FF",
                        type: "solid",
                        width: 1
                    }
                }
            },
            yAxis: [
                {
                    type: "value",
                    name: "亿元",
                    splitNumber: 5,
                    symbolSize: 9, //标记的大小

                    nameTextStyle: { // name的样式
                        color: "#6699C1"
                    },

                    axisTick: { // 取消刻度线上的小刻度
                        show: false
                    },
                    axisLine: { // 取消整个刻度线
                        show: false
                    },

                    splitLine: {
                        lineStyle: {
                            color: " #6AC1FF",
                            opacity: 0.3,
                            type: "dashed",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#A1D1EF",
                        },
                    },
                },

            ],
            series: [
                {
                    type: "line",
                    symbol: "circle", // 不展示折线的圆点
                    smooth: false, // 平滑的折线
                    itemStyle: {
                        normal: {
                            color: "#FF744C", //改变折线点的颜色
                            lineStyle: {
                                color: "#FF744C", //改变折线颜色
                                type: "solid"
                            }
                        }
                    },

                    toolbox: {
                        show: false,
                    },
                    data: [480, 390, 500, 260, 320,],
                },


            ],
        };
    }

}