• EchartLine 折现图

    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>