EchartLine 折现图

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-line :option="option" :data="data" width="1000"></avue-echart-line>
  2. <script>
  3. export default {
  4. data() {
  5. return {
  6. data:{
  7. categories: [
  8. "苹果",
  9. "三星",
  10. "华为",
  11. "oppo",
  12. "vivo",
  13. "小米"
  14. ],
  15. series: [
  16. {
  17. name: "手机品牌",
  18. data: [
  19. 1000879,
  20. 678564,
  21. 897744,
  22. 439087,
  23. 478900,
  24. 390877
  25. ]
  26. }, {
  27. name: "其他手机品牌",
  28. data: [
  29. 2000879,
  30. 678564,
  31. 897744,
  32. 439087,
  33. 478900,
  34. 390877
  35. ]
  36. }
  37. ]
  38. },
  39. option: {
  40. width: 1200,
  41. height: 600,
  42. title: '手机大比拼',
  43. smooth: true,//是否顺滑
  44. areaStyle: true,//是否面积
  45. }
  46. }
  47. }
  48. }
  49. </script>