• EchartPie 饼图

    EchartPie 饼图

    TIP

    1.1.0+

    1. <!-- 导入需要的包 -->
    2. <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>

    饼图 - 图1

    1. <avue-echart-pie :option="option" :data="data" width="1000"></avue-echart-pie>
    2. <script>
    3. export default {
    4. data() {
    5. return {
    6. data: [
    7. { value: 335, name: '直接访问' },
    8. { value: 310, name: '邮件营销' },
    9. { value: 234, name: '联盟广告' },
    10. { value: 135, name: '视频广告' },
    11. { value: 1548, name: '搜索引擎' }
    12. ],
    13. option: {
    14. width: '100%',
    15. height: 600,
    16. title: '手机大比拼',
    17. subtitle: '纯属虚构',
    18. labelShow:true,
    19. radius: true,
    20. "barColor": [
    21. {
    22. "color1": "#83bff6",
    23. },
    24. {
    25. "color1": "#23B7E5",
    26. },
    27. {
    28. "color1": "rgba(154, 168, 212, 1)",
    29. },
    30. {
    31. "color1": "#188df0",
    32. },
    33. {
    34. "color1": "#564AA3",
    35. }
    36. ]
    37. },
    38. }
    39. }
    40. }
    41. </script>