//var Xdata=['硫化氢', '二氧化硫', '硫醇', '硫脒', '氨气', 
//         '三甲胺', '甲苯', '二甲苯', '甲硫醇', '甲硫醇', '氨气',"二氧化氮","一氧化氮"];

var Xdata=['1号', '3号', '5号', '7号', '9号', 
           '11号', '13号', '15号', '17号', '19号', '21号',"25号","29号"]; 

var fp_jzrk = {
    "1月": [589, 259, 262, 324, 232, 176, 196, 214, 133, 370, 120,144,253],
    "2月": [511, 315, 139, 375, 204, 352, 163, 258, 385, 209, 100,55,243],
    "3月": [527, 210, 328, 292, 241, 110, 130, 185, 392, 392, 220,133,166],
    "4月": [500, 350, 300, 250, 200, 150, 100, 150, 200, 250, 280,321,134],
    "5月": [580, 128, 255, 254, 313, 143, 360, 343, 338, 163, 125,178,155],
    "6月": [480, 118, 245, 244, 340, 141, 364, 342, 335, 166, 115,158,165],
    "7月": [580, 128, 255, 254, 313, 143, 310, 373, 331, 163, 125,178,155],
    "8月": [510, 118, 265, 254, 313, 133, 320, 353, 318, 141, 165,178,155],
    "9月": [560, 128, 255, 254, 323, 126, 360, 333, 345, 133, 125,178,145],
    "10月": [543, 128, 255, 232, 313, 143, 342, 365, 338, 123, 165,139,135],
    "11月": [560, 128, 255, 224, 313, 142, 363, 313, 338, 113, 126,166,125],
    "12月": [530, 128, 255, 218, 313, 131, 355, 333, 338, 173, 128,138,165]
};
var fp_jzfyb = {
    "1月": [589, 259, 262, 324, 232, 176, 196, 214, 133, 370, 120,144,253],
    "2月": [511, 315, 139, 375, 204, 352, 163, 258, 385, 209, 100,55,243],
    "3月": [527, 210, 328, 292, 241, 110, 130, 185, 392, 392, 220,133,166],
    "4月": [500, 350, 300, 250, 200, 150, 100, 150, 200, 250, 280,321,134],
    "5月": [580, 128, 255, 254, 313, 143, 360, 343, 338, 163, 125,178,155],
    "6月": [480, 118, 245, 244, 340, 141, 364, 342, 335, 166, 115,158,165],
    "7月": [580, 128, 255, 254, 313, 143, 310, 373, 331, 163, 125,178,155],
    "8月": [510, 118, 265, 254, 313, 133, 320, 353, 318, 141, 165,178,155],
    "9月": [560, 128, 255, 254, 323, 126, 360, 333, 345, 133, 125,178,145],
    "10月": [543, 128, 255, 232, 313, 143, 342, 365, 338, 123, 165,139,135],
    "11月": [560, 128, 255, 224, 313, 142, 363, 313, 338, 113, 126,166,125],
    "12月": [530, 128, 255, 218, 313, 131, 355, 333, 338, 173, 128,138,165]
};
//图表月份
var timeLineData = ["1月", "2月", "3月", "4月", 
      "5月","6月","7月","8月","9月","10月","11月","12月"];
option = { 
 baseOption: {
     backgroundColor: "#061740",
     timeline: {
         show: true,
         axisType: 'category',
         tooltip: {
             show: true,
             formatter: function(params) {
                 return params.name + '月份数据统计';
             }
         },
         autoPlay: true,
         currentIndex: 10,
         playInterval: 2000,
         label: {
             normal: {
                 show: true,
                 color: '#20dbfd',
                 interval: 'auto',
                 formatter: function(params) {
                     return params
                 }
             },
         },
         lineStyle: {
             show: true,
             color: '#20dbfd'
         },
         itemStyle: {
             show: true,
             color: '#20dbfd'
         },
         controlStyle: {
             show: true,
             color: '#20dbfd',
             borderColor: '#20dbfd'
         },
         left: "0",
         right: "0",
         bottom: '0',
         padding: [15, 0],
         data: timeLineData,
     },
     title: {
         textStyle: {
             color: '#fff',
             fontSize: 16,
         },
     },
     tooltip: {
         show: true,
         trigger: 'axis',
         axisPointer: {
             type: 'shadow',
         }
     },
     grid: {
         top: "10%",
         left: "1%",
         right: "1%",
         bottom: "10%",
         containLabel: true
     },

     xAxis: [{
         type: 'category',
         axisLine: {
             show: false,
         },
         axisTick: {
             show: false,
         },
         axisLabel: {
             show: true,
             formatter: function(val) {
                 var strs = val.split(''); //字符串数组
                 var str = ''
                 for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
                     str += s;
                     if (!(i % 2)) str += '\n'; //按需要求余
                 }
                 return str
             },
             textStyle: {
                 color: '#fff',
                 fontSize: 12,
             },
         },
         splitLine: {
             show: false,
             lineStyle: {
                 color: '#fff',
                 width: 1,
             },
         },
         data: Xdata,
     }],
     yAxis: [{
             type: 'value',
             name: "(ml/M3)",
             nameTextStyle: {
                 color: "#fff",
             },
             axisLine: {
                 show: false
             },
             axisTick: {
                 show: false
             },
             axisLabel: {
                 show: true,
                 color: '#ccc',
                 textStyle: {
                     color: '#fff',
                     fontSize: 12,
                 },

             }
         },
         {
             type: 'value',
             name: "数值",
             nameTextStyle: {
                 color: "#fff",
             },
             position: "right",
             axisLine: {
                 show: false
             },
             axisTick: {
                 show: false
             },
             axisLabel: {
                 show: true,
                 textStyle: {
                     color: '#fff',
                     fontSize: 12,
                 },

             }
         }
     ]
 },
 options: []
};
for (var i = 0; i < timeLineData.length; i++) {
 option.options.push({
     series: [{
             name: '各异味指数据',
             type: 'bar',
             barWidth: '20%',
             label: {
                 normal: {
                     show: false,
                     color: '#fff',
                     textStyle: {
                         color: '#fff',
                         fontSize: 12,
                     },
                 },
                 emphasis: {
                     show: false,
                     offset: [0, 0],
                     textStyle: {
                         color: '#fff'
                     },
                 },
             },
             itemStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                     offset: 0,
                     color: 'rgba(0,244,255,1)' // 0% 处的颜色
                 }, {
                     offset: 1,
                     color: 'rgba(0,77,167,1)' // 100% 处的颜色
                 }], false),
                 barBorderRadius: [30, 30, 30, 30],
                 shadowColor: 'rgba(0,160,221,1)',
                 shadowBlur: 4,
                 emphasis: {
                     opacity: 1,
                 },
             },
             data: fp_jzrk[timeLineData[i]],
         },
         {
             name: "",
             type: "line",
             yAxisIndex: 1,
             smooth: true, //平滑曲线显示
             showAllSymbol: true, //显示所有图形。
             symbol: "circle", //标记的图形为实心圆
             symbolSize: 8, //标记的大小
             itemStyle: {
                 color: "#DC3AFF",
                 borderColor: "#DC3AFF",
             },
             lineStyle: {
                 color: "#DC3AFF",
                 shadowColor: "#3D7EEB",
                 shadowBlur: 4
             },
             data: fp_jzfyb[timeLineData[i]]
         },
     ]
 });
}
echarts.init(document.getElementById("div_timedata")).setOption(option);