1. - series
    2. - 系列列表。每个系列通过 `type` 决定自己的图表类型
    3. - 大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
    4. - xAxis:直角坐标系 grid 中的 x
    5. - boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
    6. - yAxis:直角坐标系 grid 中的 y
    7. - grid:直角坐标系内绘图网格。
    8. - title:标题组件
    9. - tooltip:提示框组件
    10. - legend:图例组件
    11. - color:调色盘颜色列表
    12. 数据堆叠,同个类目轴上系列配置相同的`stack`值后 后一个系列的值会在前一个系列的值上相加。
    1. option = {
    2. // color设置我们线条的颜色 注意后面是个数组
    3. color: ['pink', 'red', 'green', 'skyblue'],
    4. // 设置图表的标题
    5. title: {
    6. text: '折线图堆叠123'
    7. },
    8. // 图表的提示框组件
    9. tooltip: {
    10. // 触发方式
    11. trigger: 'axis'
    12. },
    13. // 图例组件
    14. legend: {
    15. // series里面有了 name值则 legend里面的data可以删掉
    16. },
    17. // 网格配置 grid可以控制线形图 柱状图 图表大小
    18. grid: {
    19. left: '3%',
    20. right: '4%',
    21. bottom: '3%',
    22. // 是否显示刻度标签 如果是true 就显示 否则反之
    23. containLabel: true
    24. },
    25. // 工具箱组件 可以另存为图片等功能
    26. toolbox: {
    27. feature: {
    28. saveAsImage: {}
    29. }
    30. },
    31. // 设置x轴的相关配置
    32. xAxis: {
    33. type: 'category',
    34. // 是否让我们的线条和坐标轴有缝隙
    35. boundaryGap: false,
    36. data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
    37. },
    38. // 设置y轴的相关配置
    39. yAxis: {
    40. type: 'value'
    41. },
    42. // 系列图表配置 它决定着显示那种类型的图表
    43. series: [
    44. {
    45. name: '邮件营销',
    46. type: 'line',
    47. data: [120, 132, 101, 134, 90, 230, 210]
    48. },
    49. {
    50. name: '联盟广告',
    51. type: 'line',
    52. data: [220, 182, 191, 234, 290, 330, 310]
    53. },
    54. {
    55. name: '视频广告',
    56. type: 'line',
    57. data: [150, 232, 201, 154, 190, 330, 410]
    58. },
    59. {
    60. name: '直接访问',
    61. type: 'line',
    62. data: [320, 332, 301, 334, 390, 330, 320]
    63. }
    64. ]
    65. };