function t5(stock,code,name,lang,_title){ $.ajax({ type: "GET", url:"//data.gtimg.cn/flashdata/hushen/4day/" + stock + "/" + stock + code + ".js?maxage=43200", dataType:"script", cache:"false", success:function(){ var data_t5 = format_t5(min_data_4d); // 坐标极值数组 var yAxis_data = axisData(data_t5); var data_date = formateDate_t5(min_data_4d,lang); var timeArr = timeForX(min_data_4d,data_date); var option = opt_t5(name,data_t5,yAxis_data,lang,_title,timeArr) var myChart = echarts.init(document.getElementById("main")); myChart.setOption(option) } }) } function format_t5(data){ var datevsValue = []; $.each(data,function(index,item){ var dataArr = item.data.split("^"); var _arr = [] var volume_arr = []; var change_arr = []; $.each(dataArr,function(i,e){ var spArr = e.split("~"); if(e.length > 0){ _arr.push(spArr[1]) }else{ dataArr.splice(i) } if(i == 0){ volume_arr.push(spArr[2]) }else{ volume_arr.push(spArr[2] - dataArr[i-1].split("~")[2]) }; change_arr.push(toDecimal((spArr[1] - item.prec) / item.prec * 100)) }); var dataMax = Math.max.apply(null,_arr); var dataMin = Math.min.apply(null,_arr); var changeMax = Math.max.apply(null,change_arr); var changeMin = Math.min.apply(null,change_arr); datevsValue.push({ date:item.date, value:_arr, volume:volume_arr, change:change_arr, dataMax:dataMax, dataMin:dataMin, changeMax:changeMax, changeMin:changeMin }); }); datevsValue.sort(function(a,b){ return a.date - b.date }); $.each(datevsValue,function(index,item){ var new_arr = []; var new_volumeArr = []; var new_changeArr = []; if(index > 0){ var unshiftArr = []; for(var i = 0;i < item.value.length * index;i++ ){ unshiftArr.push("-") } new_arr = unshiftArr.concat(item.value); new_volumeArr = unshiftArr.concat(item.volume); new_changeArr = unshiftArr.concat(item.change); }else{ new_arr = item.value new_volumeArr = item.volume new_changeArr = item.change } if(index < datevsValue.length - 1){ var pushArr = []; for(var i = 0;i < item.value.length * (datevsValue.length - index - 1) ;i++){ pushArr.push("-") }; new_arr = new_arr.concat(pushArr) new_volumeArr = new_volumeArr.concat(pushArr) new_changeArr = new_changeArr.concat(pushArr) } datevsValue[index].value = new_arr datevsValue[index].volume = new_volumeArr datevsValue[index].change = new_changeArr }); return datevsValue }; // 计算y轴坐标极值 function axisData(data){ var valMax_arr = []; var valMin_arr = []; var chMax_arr = []; var chMin_arr = []; $.each(data,function(index,json){ valMax_arr.push(json.dataMax) valMin_arr.push(json.dataMin) chMax_arr.push(json.changeMax) chMin_arr.push(json.changeMin) }); var valMax = Math.max.apply(null,valMax_arr); var valMin = Math.min.apply(null,valMin_arr); var chMax = Math.max.apply(null,chMax_arr); var chMin = Math.min.apply(null,chMin_arr); return { valueMax:valMax, valueMin:valMin, changeMax:chMax, changeMin:chMin, } } function formateDate_t5(data,lang){ var dateArr = []; $.each(data,function(index,item){ dateArr.push(item.date); }); dateArr.sort(); $.each(dateArr,function(ind,date){ date = "20" + date; date = date.slice(0,4) + "/" + date.slice(4,6) + "/" + date.slice(6,8); if(lang == "CN"){ var day = numToCn(new Date(date).getDay()); }else{ var day = numToEn(new Date(date).getDay()); } date = date + ' ' + day; dateArr[ind] = date }); return dateArr } // 建立数组作x轴刻度显示 function timeForX(data,dateArr){ var axisArr = [] $.each(data,function(index,item){ var timeArr = item.data.split("^"); timeArr = removeEmpty(timeArr); $.each(timeArr,function(i,n){ var _time = n.split("~")[0]; var iNow = _time.slice(0,2) + ":" + _time.slice(2,4) if(i == 0){ timeArr[i] = dateArr[index] }else{ timeArr[i] = dateArr[index] + " " + iNow } }); axisArr = axisArr.concat(timeArr) }) return axisArr } /* 数组去空值 */ function removeEmpty(arr){ var _arr = new Array(); $.each(arr,function(index,val){ if(val !== '' && val !== undefined){ _arr.push(val) } }); return _arr; } // 提示框中文格式回调封装 function tooltip_t5(stock,param,data,lang,name){ var html = ""; var _cate,_val,_change,_volume,get_ind; var iDate = new Date(); var iYear = iDate.getFullYear(); var iMon = iDate.getMonth() + 1; iMon = iMon < 10 ? "0" + iMon : iMon; var iToday = iDate.getDate(); iToday = iToday < 10 ? "0" + iToday : iToday; var str_date = iYear + "/" + iMon + "/" + iToday; // 如悬停点为当日且还未产生数据 if(str_date == param[0].axisValueLabel.split(" ")[0]){ var flag_val = true; var flag_change = true; $.each(param,function(i,serious){ switch(serious.seriesName){ case "price": if(serious.data != "-"){ flag_val = false; _val = toDecimal(serious.data); get_ind = serious.dataIndex; _volume = data[data.length - 1].volume[get_ind]; }; break; case "change": if(serious.data != "-"){ flag_change = false; _change = toDecimal(serious.data) + "%"; }; break; } }); if(flag_val){ _val = "-"; _change = "-"; _volume = "-" }; }else{ $.each(param,function(i,serious){ switch(serious.seriesName){ case "price": if(serious.data != "-"){ _val = toDecimal(serious.data); get_ind = serious.dataIndex; _volume = data[i].volume[get_ind]; }; break; case "change": if(serious.data != "-"){ _change = toDecimal(serious.data) + "%"; }; break; } }); } if(param[0].axisValue.indexOf(":") < 0){ _cate = param[0].axisValue + " 09:30" }else{ _cate = param[0].axisValue }; if(_volume >= 10000){ _volume = showM(lang,_volume,stock) } if(param[0].componentSubType == "line"){ if(lang == "CN"){ var til_value = "价格"; var til_change = "涨跌幅"; var til_volume = "成交量"; }else{ var til_value = "Price" var til_change = "Change" var til_volume = "Volume" } html += '
' + name + '
' + '
' + _cate + '
' + '
' + '' + til_value + ':' + _val + '
' + '' + til_change + ':' + _change + '
' + '' + til_volume + ':' + _volume + '
' } return html; } function opt_t5(name,data,axis_data,lang,_title,dateArr){ var upColor = '#ec0000'; var upBorderColor = '#8A0000'; var downColor = '#00da3c'; var downBorderColor = '#008F28'; // 提示框参数配置 var setTooltip = { trigger: 'axis', axisPointer: { type: 'cross' }, formatter:function(param){ return tooltip_t5("hushen",param,data,lang,name) } }; return { title: { text: _title, left: 0 }, tooltip: setTooltip, grid: { left: '10%', right: '10%', bottom: '15%' }, xAxis: { type: 'category', splitLine:{ show:true }, data:dateArr, scale: true, boundaryGap : false, axisPointer: { label:{ formatter:function(params){ var axisCate = "" if(params.value.indexOf(":") < 0){ axisCate = params.value + " 09:30" }else{ axisCate = params.value } return axisCate } } }, axisLine: {onZero: false}, axisTick:{ show:false, }, axisLabel:{ align:'left', interval:241, } }, yAxis: [{ // 价格 type: 'value', min: axis_data.valueMin, max: axis_data.valueMax, splitNumber:5, interval:(axis_data.valueMax - axis_data.valueMin) / 5, scale: true, splitArea: { show: true }, axisPointer: { label:{ formatter:function(params){ return toDecimal(params.value) } } }, axisLabel:{ formatter:function(value,index){ console.log(value) return toDecimal(value) } } },{ // 涨跌幅 type: 'value', min: axis_data.changeMin, max: axis_data.changeMax, splitNumber: 5, interval:(axis_data.changeMax - axis_data.changeMin) / 5, scale: true, splitArea: { show: true }, axisPointer: { label:{ formatter:function(params){ return toDecimal(params.value) + "%" } } }, axisLabel:{ formatter:function(value,index){ console.log(value) value = toDecimal(value) > 0 ? "+" + toDecimal(value) : toDecimal(value); return value + "%" } } }], series: [{ name:"price", type: 'line', yAxisIndex: 0, data: data[0].value, itemStyle:{ color:"#c23531" }, lineStyle:{ color:"#c23531" }, },{ name:"price", type: 'line', yAxisIndex: 0, data: data[1].value, itemStyle:{ color:"#2f4554" }, lineStyle:{ color:"#2f4554" }, },{ name:"price", type: 'line', yAxisIndex: 0, data: data[2].value, itemStyle:{ color:"#61a0a8" }, lineStyle:{ color:"#61a0a8" }, },{ name:"price", type: 'line', yAxisIndex: 0, data: data[3].value, itemStyle:{ color:"#d48265" }, lineStyle:{ color:"#d48265" }, },{ name:"price", type: 'line', yAxisIndex: 0, data: data[4].value, itemStyle:{ color:"#91c7ae" }, lineStyle:{ color:"#91c7ae" }, },{ name:"change", type: 'line', yAxisIndex: 1, data: data[0].change, lineStyle: { opacity: 0 }, itemStyle:{ opacity: 0 } },{ name:"change", type: 'line', yAxisIndex: 1, data: data[1].change, lineStyle: { opacity: 0 }, itemStyle:{ opacity: 0 } },{ name:"change", type: 'line', yAxisIndex: 1, data: data[2].change, lineStyle: { opacity: 0 }, itemStyle:{ opacity: 0 } },{ name:"change", type: 'line', yAxisIndex: 1, data: data[3].change, lineStyle: { opacity: 0 }, itemStyle:{ opacity: 0 } },{ name:"change", type: 'line', yAxisIndex: 1, data: data[4].change, lineStyle: { opacity: 0 }, itemStyle:{ opacity: 0 } }] } }