> ## 組件 wl-pie-chart 使用文檔 &emsp;&emsp;wl-pie-chart 是基于 wl-echarts-plugin 封裝的折線圖組件 ``` <wl-pie-chart :dataSource="dataSource" :option="option" :width="width" :height="height"></wl-pie-chart> ``` ### wl-pie-chart props | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | dataSource | 餅圖數據源，接口配置 | Object | {} | | option | 餅圖格式配置 | Object | {} | | width | 餅圖寬度 | String | 300px | | height | 餅圖高度 | String | 300px | #### 備注說明 + option 為餅圖格式配置，簡化版接收如下參數，title 為餅圖標題 ``` option: { title: '銷量示例' // 標題 } ``` + dataSource 為折線圖數據源的接口配置，url 為后端地址， params 是參數對象，默認 post 請求。下面是例子。 ``` dataSource: { // 接口配置 url: 'http://localhost:8080/piechart/list', params: { num: 12 } } ``` &emsp;&emsp;接口返回值格式如下所示，data 的鍵為餅圖的不同圖例，值為餅圖內容數據。 ``` { errcode: 200, data: { '搜索引擎': 1048, '直接訪問': 735, '郵件營銷': 580, '聯盟廣告': 484, '視頻廣告': a } } ``` --- + 定制的 option 配置如下所示，詳細可以參考 echarts 的配置 [echarts 配置文檔](https://echarts.apache.org/zh/option.html#series-pie) ``` option: { title: '某站點用戶訪問來源', // 標題 marginLeft: '10%', // 餅距離左邊的距離，接近右側邊緣后餅會變小 size: '10%', // 餅的大小 titleLocation: '50%', // 標題水平位置 subTitle: '純屬虛構', // 子標題 tipTitle: '銷量示例', // 提示文字 color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'] // 每個種類的顏色 不傳用默認顏色 } ```