折线图

描述:当前是关于Echarts图表中的 折线图 示例。
 
            option = {
   "grid": {
      "left": "2.1%",
      "right": "2.1%",
      "top": "16%",
      "bottom": "14%"
   },
   "title": {
      "subtextStyle": {
         "color": "#fff"
      },
      "left": 16
   },
   "tooltip": {
      "trigger": "axis",
      "show": true,
      "padding": 0,
      "borderWidth": 0,
      "backgroundColor": "rgba(0,0,0,0)",
      "axisPointer": {
         "type": "line",
         "z": -101,
         "lineStyle": {
            "type": "dashed",
            "width": 1,
            "color": "rgba(53, 142, 254, .5)"
         }
      },

   },

   "legend": {
      "top": "8",
      "right": "102",
      "itemWidth": 24,
      "itemHeight": 8,
      "itemGap": 20,
      "data": [
         "水果",
         "鲜花"
      ]
   },
   "xAxis": [
      {
         "type": "category",
         "axisTick": {
            "alignWithLabel": true,
            "show": false,
            "interval": 1
         },
         "data": [
            {
               "value": "04/27",
               "fvalue": "04/27"
            },
            {
               "value": "04/28",
               "fvalue": "04/28"
            },
            {
               "value": "04/29",
               "fvalue": "04/29"
            },
            {
               "value": "04/30",
               "fvalue": "04/30"
            },
            {
               "value": "05/01",
               "fvalue": "05/01"
            },
            {
               "value": "05/02",
               "fvalue": "05/02"
            },
            {
               "value": "05/03",
               "fvalue": "05/03"
            },
            {
               "value": "05/04",
               "fvalue": "05/04"
            },
            {
               "value": "05/05",
               "fvalue": "05/05"
            },
            {
               "value": "05/06",
               "fvalue": "05/06"
            },
            {
               "value": "05/07",
               "fvalue": "05/07"
            },

            {
               "value": "05/13",
               "fvalue": "05/13"
            },
            {
               "value": "05/14",
               "fvalue": "05/14"
            },
            {
               "value": "05/15",
               "fvalue": "05/15"
            },
            {
               "value": "05/16",
               "fvalue": "05/16"
            },


         ],
         "axisLine": {
            "show": true,
            "lineStyle": {
               "color": "#ddd"
            }
         },
         "axisLabel": {
            "show": true,
            "color": "#666",
            "fontSize": 12,
            "interval": 0
         }
      }
   ],
   "yAxis": [
      {
         "type": "value",
         "name": "水果",
         "nameTextStyle": {
            "color": "#999",
            "fontSize": 14,
            "align": "right"
         },
         "axisLabel": {
            "show": true,
            "color": "#666",
            "fontSize": 12,
            "formatter": "{value}"
         },
         "splitLine": {
            "lineStyle": {
               "color": "rgba(238, 238, 238, .8)",
               "type": "dashed"
            }
         }
      },
      {
         "type": "value",
         "alignTicks": true,
         "name": "鲜花(%)",
         "nameTextStyle": {
            "color": "#999",
            "fontSize": 14,
            "padding": [
               0,
               10,
               2,
               0
            ]
         },
         "axisLabel": {
            "show": true,
            "color": "#666",
            "offset": 80,
            "fontSize": 12,
            "formatter": "{value}"
         },
         "splitLine": {
            "show": false,
            "lineStyle": {
               "color": [
                  "rgba(109,133,185,0.3)"
               ]
            }
         }
      }
   ],
   series: [
      {
         "data": [
            84.13,
            83.14,
            null,
            null,
            null,
            null,
            null,
            86.26,
            82.73,
            82.07,
            83.99,

            null,
            null,
            null,
            null,

         ],
         "type": "line",
         "showSymbol": false,
         "name": "水果",
         "itemStyle": {
            "color": "#358EFE"
         },
         "areaStyle": {
            "color": {
               "colorStops": [
                  {
                     "offset": 0,
                     "color": "rgba(53, 142, 253, 0.10)"
                  },
                  {
                     "offset": 1,
                     "color": "rgba(18, 194, 193, 0)"
                  }
               ],
               "x": 0,
               "y": 0,
               "x2": 0,
               "y2": 1,
               "type": "linear",
               "global": false
            }
         }
      },
      {
         "data": [
            26.48,
            49.91,
            null,
            null,
            null,
            null,
            null,
            8.94,
            3.24,
            4.67,
            4.69,

            null,
            null,
            null,
            null,

         ],
         "type": "line",
         "name": "鲜花",
         "showSymbol": false,
         "itemStyle": {
            "color": "#4CCBC2"
         },
         "yAxisIndex": 1,
         "areaStyle": {
            "color": {
               "colorStops": [
                  {
                     "offset": 0,
                     "color": "rgba(18, 194, 193, 0.10)"
                  },
                  {
                     "offset": 1,
                     "color": "rgba(18, 194, 193, 0)"
                  }
               ],
               "x": 0,
               "y": 0,
               "x2": 0,
               "y2": 1,
               "type": "linear",
               "global": false
            }
         }
      }
   ]
}