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