## Basic Line Chart 基础折线图

:::demo

```javascript
import React from 'react'
import ReactDOM from 'react-dom'
import { QChart, QGauge, QWave } from 'qcharts-react'
function App() {
  const shape =
    'm301.855,200.202c-3.674,-1.385 -7.452,-1.966 -11.146,-1.794c0.659,-2.922 0.844,-5.85 0.58,-8.719c-0.937,-10.407 -7.663,-19.864 -18.063,-23.834c-10.697,-4.043 -22.298,-1.168 -29.902,6.403c3.015,0.026 6.074,0.594 9.035,1.728c13.626,5.151 20.465,20.379 15.32,34.004c-1.905,5.02 -5.177,9.115 -9.22,12.05c-6.951,4.992 -16.19,6.536 -24.777,3.271c-13.625,-5.137 -20.471,-20.371 -15.32,-34.004c0.673,-1.768 1.523,-3.423 2.526,-4.992l-0.014,0c0,0 0,0 0,0.014c4.386,-6.853 8.145,-14.279 11.146,-22.187c23.294,-61.505 -7.689,-130.278 -69.215,-153.579c-61.532,-23.293 -130.279,7.69 -153.579,69.202c-6.371,16.785 -8.679,34.097 -7.426,50.901c0.026,0.554 0.079,1.121 0.132,1.688c4.973,57.107 41.767,109.148 98.945,130.793c58.162,22.008 121.303,6.529 162.839,-34.465c7.103,-6.893 17.826,-9.444 27.679,-5.719c11.858,4.491 18.565,16.6 16.719,28.643c4.438,-3.126 8.033,-7.564 10.117,-13.045c5.52,-14.569 -1.82,-30.852 -16.376,-36.359z'

  let style = {
    wave: {
      fillColor: '#1890ff',
      strokeColor: '#1477d4'
    },
    shape: {
      fillColor: '#d3eaff'
    },
    text: {
      fillColor: '#fff',
      pos: [130, 130]
    }
  }
  return (
    <QChart>
      <QWave
        {...{
          clientRect: {
            left: 0,
            top: 0
          },
          radius: 200,
          percent: 65,
          shape: shape,
          // 格式化文本
          formatter: per => {
            return '总占比：' + per + '%'
          }
        }}
        style={style}
      />
    </QChart>
  )
}

ReactDOM.render(<App />, document.querySelector('#app'))
```

:::