Echarts在线免费图表

 
            var linedata = [['0:00:00', 62.36], ['0:10:00', 56.62], ['0:20:00', 51.57], ['0:30:00', 47.93], ['0:40:00', 44.4], ['0:50:00', 41.63], ['1:00:00', 39.07], ['1:10:00', 36.67], ['1:20:00', 35.24], ['1:30:00', 36.47], ['1:40:00', 37.66], ['1:50:00', 38.78], ['2:00:00', 39.87], ['2:10:00', 40.9], ['2:20:00', 41.89], ['2:30:00', 43.45], ['2:40:00', 44.37], ['2:50:00', 45.26], ['3:00:00', 46.13], ['3:10:00', 46.95], ['3:20:00', 47.75], ['3:30:00', 47.93], ['3:40:00', 45.47], ['3:50:00', 45.64], ['4:00:00', 46.37], ['4:10:00', 47.07], ['4:20:00', 47.75], ['4:30:00', 48.41], ['4:40:00', 46.48], ['4:50:00', 47.07], ['5:00:00', 47.63], ['5:10:00', 48.18], ['5:20:00', 48.71], ['5:30:00', 49.23], ['5:40:00', 49.35], ['5:50:00', 50.74], ['6:00:01', 51.24], ['6:10:00', 51.73], ['6:20:00', 52.21], ['6:30:00', 52.68], ['6:40:00', 53.13], ['6:50:00', 53.58], ['7:00:00', 54.3], ['7:10:00', 54.72], ['7:20:00', 55.13], ['7:30:00', 55.53], ['7:40:00', 55.92], ['7:50:00', 56.3], ['8:00:00', 56.99], ['8:10:00', 61.8], ['8:20:00', 80.7], ['8:30:00', 87.22], ['8:40:00', 90.4], ['8:50:00', 91.97], ['9:00:00', 93.22], ['9:10:00', 94.17], ['9:20:00', 94.84], ['9:30:00', 95.36], ['9:40:00', 95.81], ['10:40:00', 90.81], ['11:40:00', 65.81]];

var lastdata = linedata[linedata.length - 1] //取最后一条数据
var lasttime = lastdata[0]//取出时间
var lastval = lastdata[1]//取出OEE的值

option = {
   title: [{
      text: '涂布正极一线',
      left: 'center',
      top: '8%',
      textStyle: {
         color: "#fff",
         fontSize: 14,
      }
   }],

   tooltip: {
      trigger: 'axis'
   },

   backgroundColor: '#00333a', //开发的时候去掉
   grid: {
      top: '8%',
      // // left: '15%',
      // // right: '5%',
      bottom: '25%',
   },

   xAxis: [
      {
         type: 'category',
         axisLine: {
            show: false,
         },
         axisLabel: {
            color: "#fff",
            fontWeight: 'bold',
            fontSize: 12,
            padding: [15, 0, 0, 0],
            formatter: function (value) {

               return value.substring(0, value.indexOf(':')) + ':00:00' //开发的时候要注意下时间类型
            },
            interval: 10,
            //showMaxLabel: true
         },
         axisTick: {
            show: false
         },
      }
   ],
   yAxis: [
      {
         show: false,
      },
   ],
   series: [
      {
         type: 'line',
         symbol: 'none',
         lineStyle: {
            width: 2,
            color: '#63d2e7',
         },
         areaStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                     {
                        offset: 0,
                        color: '#17859b',
                     },
                     {
                        offset: 1,
                        color: '#114554',
                     },
                  ],
                  false
               ),
            }
         },
         data: linedata,
         markPoint: {
            symbol:'circle',
            itemStyle: {
               color: "#00333a"
            },
            label: {

               normal: {
                  textStyle: {
                     color: '#ffc000',
                     fontSize: 14,
                     fontWeight: "bolder",
                  }
               }
            },
            data: [
               {
                  coord: [5, 80],
                  value: lastval + '%',
               }
            ],

         },
      },
   ],
};