highcharts中的折线图

折现图表的样式如下所示：

 

 

 整体的一个设置代码如下：

that.options = {
    title: {
        text: null
    },
    subtitle: {
        text: null
    },
    yAxis: {
        title: {
            text: null
        },
        gridLineColor: '#29304d',
        // y轴的网格线
        lineColor: '#29304d',
        // y轴的竖线
        lineWidth: that.torem(2),
        // 要加上线宽才可以出来
        labels: { // y轴的文字
            style: {
                color: '#fff',
                fontSize: that.torem(28)
            }
        }
    },
    xAxis: {
        alternateGridColor: '#152e55',
        // 隔行变色
        lineColor: '#29304d',
        labels: { // x轴的文字
            style: {
                color: '#fff',
                fontSize: that.torem(28)
            }
        },
        tickWidth: 0,
        // 去掉刻度线
        categories: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'] // x轴的数据
    },
    chart: {
        backgroundColor: 'transparent',
        color: '#fff'
    },
    legend: { // 图例的设置
        layout: 'horizontal',
        // 水平排列
        align: 'right',
        // 右对齐
        verticalAlign: 'top',
        // 纵向位于上方
        padding: 0,
        itemStyle: {
            color: '#fff',
            fontSize: that.torem(28)
        },
        symbolHeight: that.torem(96),
        symbolWidth: that.torem(48),
        symbolRadius: that.torem(24)
    },
    plotOptions: {
        series: {
            // label: {
            //     connectorAllowed: false
            // },
            marker: { // 折线图中的点设置，默认是原形，三角和正方形
                // fillColor: '#FFFFFF',
                lineWidth: that.torem(2),
                lineColor: '#fff',
                // inherit from series
                width: that.torem(80),
                height: that.torem(80),
                symbol: 'circle',
                // circle会取消默认设置，所有的折线上的点都变成circle
                radius: that.torem(8)
            },
            lineWidth: that.torem(8)
        }
    },
    colors: ['#296efe', '#13c792', '#dba630'],
    // 折线的颜色
    series: seriesArr
};

 

 

 

 y轴的 gridLineColor 设置的颜色

 

 

  y轴的 lineColor 设置的颜色

 

 

 x轴的背景alternateGridColor隔行变色

 

 

 x轴的刻度线 tickWidth 如果不想要，值就设置成0