最終效果

要實(shí)現(xiàn)的效果

使用第三方框架 Charts

主要是一些參數(shù)設(shè)置

//x軸方向 默認(rèn)上方
lineChartView.xAxis.labelPosition = .bottom
//自定義標(biāo)簽刻度
lineChartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: dataPoints)
//設(shè)置虛線
lineChartView.xAxis.gridLineDashLengths = [4,2]
//不繪制y軸右側(cè)文字
lineChartView.rightAxis.drawLabelsEnabled = false
lineChartView.leftAxis.axisLineWidth = 2 //左Y軸寬度
lineChartView.leftAxis.axisLineColor = .black//左Y軸顏色
lineChartView.xAxis.axisLineWidth = 2 //x軸寬度
lineChartView.xAxis.axisLineColor = .black //x軸顏色

效果

對(duì)xy軸進(jìn)行一些操作

chartView.leftAxis.axisMinimum = -100 //最小刻度值
chartView.leftAxis.axisMaximum = 100 //最大刻度值
chartView.leftAxis.granularity = 50 //最小間隔
//y軸無(wú)網(wǎng)格線
lineChartView.leftAxis.drawGridLinesEnabled = false //不繪制網(wǎng)格線
//不開(kāi)啟十字線
chartDataSet.highlightEnabled = false
chartDataSet.drawFilledEnabled = true //開(kāi)啟填充色繪制
chartDataSet.fillColor = .orange  //設(shè)置填充色
chartDataSet.fillAlpha = 0.5 //設(shè)置填充色透明度

//開(kāi)啟填充色繪制
chartDataSet.drawFilledEnabled = true
//漸變顏色數(shù)組
let gradientColors = [UIColor.orange.cgColor, UIColor.white.cgColor] as CFArray
//每組顏色所在位置（范圍0~1)
let colorLocations:[CGFloat] = [1.0, 0.0]
//生成漸變色
let gradient = CGGradient.init(colorsSpace: CGColorSpaceCreateDeviceRGB(),
                               colors: gradientColors, locations: colorLocations)
//將漸變色作為填充對(duì)象s
chartDataSet.fill = Fill.fillWithLinearGradient(gradient!, angle: 90.0)
//不顯示圖例頭部
chartView.legend.form = .none

效果

添加背景顏色的話，只有矩形里面有顏色，所以要給整個(gè)加顏色，我們?cè)谕饷婕右粋€(gè)view設(shè)置顏色
同時(shí)要保證，這個(gè)圖表是這個(gè)view的子view，否則會(huì)被覆蓋
然后要設(shè)置圖標(biāo)背景顏色為透明

效果

未解決的問(wèn)題：

這里的初始點(diǎn)是通過(guò)給了一個(gè)值來(lái)實(shí)現(xiàn)的，如何讓他不顯示第一個(gè)和最后一個(gè)值
y軸的初始值130怎么去掉
曲線上的值為double如何不顯示小數(shù)點(diǎn)
怎么給y軸添加單位