> ## 组件 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'] // 每个种类的颜色 不传用默认颜色 } ```