折现图表的样式如下所示:
整体的一个设置代码如下:
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 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