Echarts在线免费图表

 
             option = {
     tooltip: {
         formatter: function(params) {
             if (params.componentType == "series") {
                 return params.seriesName + "<br>" + params.name + " " + params.data[0].split(" ")[1]
             } else {
                 var date = new Date(params.value);
                 return params.seriesName + "<br>" + params.name + " " + date.getHours() + ":" + date.getMinutes()
             }

         },
     },
     grid: {
         left: '3%',
         right: '4%',
         bottom: '5%',
         containLabel: true
     },
     xAxis: {
         type: 'category',
         axisLine: {
             lineStyle: {
                 // color: '#fff',
             }
         },
         axisLabel: {
             textStyle: {
                 // color: '#fff',
                 fontSize: 10
             },
             formatter: '{value} '
         },
         boundaryGap: false,
         data: ["北京市", "大庆市", "重庆市", "长沙市", "杭州市", "金华市", "昌吉回族自治州", "宝鸡市", "宜春市", "天津市", "临夏回族自治州", "福州市", "哈尔滨市", "昆明市", "驻马店市"]
     },
     yAxis: {
         type: 'value',
     },
     series: [{
         name: '入睡时间',
         type: 'line',
         smooth: true,
         lineStyle: {
             normal: {
                 width: 3,
                 // color: "white",
                 shadowColor: 'rgba(0,0,0,0.4)',
                 shadowBlur: 10,
                 shadowOffsetY: 10
             }
         },
         markLine: {
             label: {
                 normal: {
                     formatter: function(params) {
                         var date = new Date(params.value);
                         return date.getHours() + " : " + date.getMinutes()
                     }
                 }
             },
             data: [{
                 type: 'average',
                 name: '平均值'
             }]
         },
         data: [1444, 1411, 1439, 1437, 1439, 1418, 1444, 1454, 1387, 1441, 1450, 1400, 1415, 1386, 1378]
     }, {
         name: '起床时间',
         type: 'line',
         smooth: true,
         symbol: "pin",
        //  showSymbol: true,
         symbolSize: 50,
         label: {
             show: true,
             normal: {
                 position: "start",
                 fontSize: 10,
                 grid: {
                     left: 100
                 }
             }
         },

         //  markLine: {
         //      silent: true,
         //      symbol: 'none',
         //      label: {
         //          normal: {
         //              formatter: '{b}',
         //              position: "start",
         //              fontSize: 10,
         //              grid: {
         //                  left: 100
         //              }
         //          }
         //      },
         //      data: [{
         //              yAxis:700,
         //              name: "分钟",
         //              itemStyle: {
         //                  normal: {
         //                      lineStyle: {
         //                          width: 1,
         //                          type: 'solid',
         //                          fontSize: 10
         //                      },
         //                      color: "#e7e5e4"
         //                  }
         //              }
         //          }

         //      ]
         //  },
         lineStyle: {
             normal: {
                 width: 3,
                 color: "black",
                 shadowColor: 'rgba(0,0,0,0.4)',
                 shadowBlur: 10,
                 shadowOffsetY: 10
             }
         },
         data: [432, 409, 437, 413, 442, 412, 456, 392, 390, 433, 445, 410, 396, 379, 368]
     }, {
         //定位入睡开始时间
         name: '定位1',
         type: 'line',
         smooth: false,
         symbolSize: 0,
         data: [
             ["2019-3-5 20:00:00", 0]
         ]
     }, {
         //定位起床结束时间
         name: '定位2',
         type: 'line',
         smooth: false,
         symbolSize: 0,
         data: [
             ["2019-3-6 10:00:00", 0]
         ]
     }]
 };