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>