Echarts在线免费图表

 
            var newData = {
   "xaxis": ["2015-12-05", "201512-06", "2015-12-07", "2015-12-08", "2015-12-09", "2015-12-10", "2015-12-11", "2015-12-12", "2015-12-13", "2015-12-14", "2015-12-15", "2015-12-16", "2015-12-17", "2015-12-18", "2015-12-19", "2015-12-20", "2015-12-21", "2015-12-22", "2015-12-23", "2015-12-24", "2015-12-25", "2015-12-26", "2015-12-27", "2015-12-28", "2015-12-29", "2015-12-30", "2015-12-31", "2016-01-01", "2016-01-02", "2016-01-03", "2016-01-04", "2016-01-05", "2016-01-06", "2016-01-07", "2016-01-08", "2016-01-09", "2016-01-10", "2016-01-11", "2016-01-12", "2016-01-13", "2016-01-14", "2016-01-15", "2016-01-16", "2016-01-17", "2016-01-18", "2016-01-19", "2016-01-20", "2016-01-21", "2016-01-22", "2016-01-23", "2016-01-24", "2016-01-25", "2016-01-26", "2016-01-27", "2016-01-28", "2016-01-29", "2016-01-30", "2016-01-31", "2016-02-01", "2016-02-02", "2016-02-03", "2016-02-04", "2016-02-05", "2016-02-06", "2016-02-07", "2016-02-08", "2016-02-09", "2016-02-10", "2016-02-11", "2016-02-12", "2016-02-13", "2016-02-14", "2016-02-15", "2016-02-16", "2016-02-17", "2016-02-18", "2016-02-19", "2016-02-20", "2016-02-21", "2016-02-22", "2016-02-23", "2016-02-24", "2016-02-25", "2016-02-26", "2016-02-27", "2016-02-28", "2016-02-29", "2016-03-01"],
   "yaxis": [{
      "name": "有伤亡",
      "value": [11, 122, 33, 44, 55, 66, 77, 88, 99, 100, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
   }, {
      "name": "无伤亡",
      "value": [123, 70, 50, 30, 80, 60, 550, 111, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
   }, {
      "name": "有隐患",
      "value": [223, 80, 90, 10, 50, 30, 330, 333, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 419, 474, 469, 62, 409, 348, 489, 16, 2, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0]
   }]
}
let legendData = [];
let seriesData = [];
let colorArr = ['#5AD8A6', '#FF745A', '#FFC328', '#2F8FFF'];
legendData = newData.yaxis.map((item) => item.name);
seriesData = newData.yaxis.map((item1, index1) => {
   return {
      name: item1.name,
      type: 'line',
      symbol: 'circle',
      symbolSize: 6,
      itemStyle: {
         color: colorArr[index1],
      },
      lineStyle: {
         width: 4,
      },
      smooth: true,
      data: item1.value, // 折线图的数据
   }
})

option = {
   backgroundColor: '#011234',
   grid: {
      containLabel: true,
      bottom: '5%',
      top: '15%',
      left: '2%',
      right: '4%',
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow',
      },
   },
   dataZoom: [
      {
         show: true,
         type: 'slider',
         backgroundColor: '#97c9f130',
         fillerColor: '#95c9fd',
         borderColor: '#97c9f130',
         showDetail: false,
         filterMode: 'empty',
         showDataShadow: false,
         brushSelect: false, // 是否开启刷选功能
         height: 10,
         handleSize: 0,
         xAxisIndex: [0],
         zoomLock: true, // 是否锁定选择区域（或叫做数据窗口）的大小
         throttle: 100, // 设置触发视图刷新的频率。
         realtime: true,
         bottom: '1%',
         startValue: 0,
         endValue: 13,
      }
   ],
   legend: {
      top: '1%',
      right: '1%',
      data: legendData,
      itemGap: 10,
      textStyle: {
         fontSize: 14,
         color: '#6E7079',
      },
   },
   xAxis: {
      triggerEvent: true,
      data: newData.xaxis,
      axisLabel: {
         // interval: 0,
         show: true,
         fontSize: 14,
         color: '#6E7079',
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: '#E0E6F1',
         },
      },

      axisTick: {
         show: false,
      },
   },
   yAxis: [
      {
         // name: '单位：个',
         type: 'value',
         nameTextStyle: {
            color: '#6E7079',
            fontSize: 14,
            padding: [0, 0, 0, 0],
         },
         splitNumber: 2,
         axisLabel: {
            show: true,
            fontSize: 14,
            color: '#6E7079',
         },
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            lineStyle: {
               color: '#E0E6F1',
            },
         },
         minInterval: 1
      },
   ],
   series: seriesData,
};