//var bgColor = "#1f212d";//背景 var bgColor = "#000000";//背景 var upColor="#F9293E";//涨颜色 //var downColor="#00aa3b";//跌颜色 var downColor="#54FCFC";//跌颜色 // ma 颜色 //var ma5Color = "#39afe6"; var ma5Color = "#FFFFFF"; var ma10Color = "#ffab42"; var ma20Color = "#da6ee8"; var ma30Color = "#00940b"; var option = initKOption(); function initKOption(){ var str = '{"code":1,"msg":"\u64cd\u4f5c\u6210\u529f\uff01","stockcode":"000860","name":"\u987a\u946b\u519c\u4e1a","data":[["2019-01-09",33.2,34.37,33.15,34.88,323805809,-42.01,-4.52,null,null],["2019-01-10",34.3,34.22,34.08,34.76,208373777,-57.21,45.02,null,null],["2019-01-11",34.5,34.63,34.04,35.1,183689036,-44.75,69.53,1,-182.78],["2019-01-14",34.3,34.61,33.88,34.92,146061888,32.42,137.9,null,null],["2019-01-15",34.61,36.65,34.41,36.88,372430544,-60.59,231.39,null,null],["2019-01-16",36.5,36.65,36.1,37.08,280606605,-9.37,229.71,null,null],["2019-01-17",36.68,35.95,35.95,36.92,211470094,-13.17,218.16,null,null],["2019-01-18",35.96,36.9,35.9,37.8,321291139,24.8,201.86,-14.65,-51.81],["2019-01-21",36.98,37.21,36.88,37.96,271589775,1,222.42,null,null],["2019-01-22",36.8,37.09,36.61,37.25,197527447,15.23,218.05,null,null],["2019-01-23",36.85,38.62,36.8,38.89,349603059,-39.05,211.59,null,null],["2019-01-24",38.4,39.37,38.2,39.86,304809685,15.36,242.13,null,null],["2019-01-25",39.63,38.98,38.63,39.8,275472017,-25.24,159.75,0,55.32],["2019-01-28",39.07,40.52,39.01,40.7,384821343,51.72,280.12,null,null],["2019-01-29",40.39,40.48,39.6,40.7,259715968,-23.99,171.59,null,null],["2019-01-30",40,39.46,39.43,40.92,210069665,-26.44,247.71,null,null],["2019-01-31",39.47,39.9,39.23,40.49,241722170,12.9,203.99,null,null],["2019-02-01",39.95,39.78,39.51,40.4,200584710,-7.3,102.74,-86.01,151.43],["2019-02-11",39.96,41.18,39.02,41.66,379968244,-11.66,113.52,null,null],["2019-02-12",41.17,41.17,40.51,41.84,315618555,-13.52,178.35,null,null],["2019-02-13",41.25,41.1,40.56,41.5,310706680,-20.15,134.95,null,null],["2019-02-14",41.11,41.41,40.81,42.15,230409862,-3,117.31,null,null],["2019-02-15",41.35,40.1,40.1,41.35,231931494,-3.93,86.59,103.39,234.31],["2019-02-18",40.39,42.64,40.38,43,404266781,19.86,126.56,null,null],["2019-02-19",42.59,42.28,41.6,43.15,273566797,12.03,110.29,null,null],["2019-02-20",41.8,42.1,41.6,42.65,232117133,8.93,91,null,null],["2019-02-21",42.2,41.7,41.44,42.48,240612040,-2.24,88.63,null,null],["2019-02-22",41.61,41.35,40.6,41.61,284922434,-0.63,79.63,-118.6,200.28],["2019-02-25",40.98,42.5,40.9,42.84,446776560,-1.86,88.05,null,null],["2019-02-26",42.1,41.83,41.5,42.84,305207648,4,36.49,null,null],["2019-02-27",42,42.1,41.89,44.2,467743030,-2.12,39.49,null,null],["2019-02-28",41.98,42.24,40.88,42.77,312307021,-4.32,43.67,null,null],["2019-03-01",42.5,43.27,41.64,43.6,468914818,-16.69,73.48,22.33,271.3],["2019-03-04",43.1,43.3,42.2,44.84,591651198,-0.07,74.43,null,null],["2019-03-05",43.42,45.4,43.3,45.4,574741888,-45.29,84.93,null,null],["2019-03-06",45.7,44.48,43.83,45.7,401426966,-34.91,83.82,null,null],["2019-03-07",44.5,43.14,41.9,44.7,500473941,7.15,80.19,null,null],["2019-03-08",42.11,42.08,41.9,43.39,278556975,-6.7,56.86,-73.82,303.28],["2019-03-11",42.56,43.69,42.5,44.1,378343404,-4.82,50.84,null,null],["2019-03-12",43.68,44.7,42.6,44.94,500318983,2.57,50.05,null,null],["2019-03-13",44.5,45.86,44.49,46.88,494987424,-36.82,65.04,null,null],["2019-03-14",45.98,45.2,44.85,46.85,439916251,25.29,67.96,null,null],["2019-03-15",48.5,49.72,48.5,49.72,722553975,-92.75,156.43,138.3,563.78],["2019-03-18",53,54.69,51.12,54.69,1167284323,136.24,209.18,null,null],["2019-03-19",57.46,56.19,53.91,58.88,2242763085,147.02,519.03,null,null],["2019-03-20",55.35,55.45,54.7,58.2,1488077677,4,420.59,null,null],["2019-03-21",55.53,54.39,53,56.35,1176297163,-51.23,451.45,null,null],["2019-03-22",54.58,56.96,54.41,58.14,1395614055,-35.48,588.3,215.37,738.51],["2019-03-25",54.14,56,53.1,56.86,677460360,-41.68,320.9,null,null],["2019-03-26",56,58.37,55.8,61.3,1102807417,-6.86,537.93,null,null],["2019-03-27",58.6,58.29,57.11,60.88,1211431721,-13.59,318.79,null,null],["2019-03-28",58.04,58.88,56.7,59.66,1018436539,7.32,356.92,null,null],["2019-03-29",59.3,60.63,58.51,62.26,1374762733,36.16,223.32,-118.05,597.84],["2019-04-01",59.21,60.55,59,60.73,991018730,22.44,304.51,null,null],["2019-04-02",60.04,59.11,58.01,60.09,836366394,15.31,302.14,null,null],["2019-04-03",58.68,59,58.5,59.9,0,-0.14,138.17,null,null],["2019-04-04",58.31,59.37,58.26,61.2,0,3.61,189.94,-2,918.5],["2019-04-08",60.5,58.5,57.5,60.9,897306904,11.41,141.54,null,null],["2019-04-09",58.12,59.89,56.89,59.89,584331571,2.99,88.87,null,null],["2019-04-10",59.15,59.6,57.82,60.68,671128830,-3.46,89.08,null,null],["2019-04-11",59.25,56.45,56.13,60.3,639079631,30.45,23.58,null,null],["2019-04-12",55.99,59.04,55.65,59.21,613034755,-2.26,11.2,-1,654.16],["2019-04-15",59.9,58.57,58.05,60.5,533765305,9.31,-0.48,null,null],["2019-04-16",58.02,58.74,57.12,59.28,379525837,3.41,1.17,null,null],["2019-04-17",58.29,59.9,57.3,60.37,518701110,7.69,15.63,null,null],["2019-04-18",59.57,62.26,59.03,63.48,710922194,7.1,45.96,null,null],["2019-04-19",61.91,61.8,60.56,62.6,427526306,5,51.8,-82.4,644.34],["2019-04-22",61.8,60.1,60.1,63.24,0,-0.85,51.04,null,null],["2019-04-23",60.37,60.09,58.88,62.2,598185106,0.53,57.15,null,null],["2019-04-24",60.39,59.3,57.71,60.7,476211398,8.21,30.44,null,null],["2019-04-25",59.12,58.71,58.5,60.97,431711811,-7.11,12.36,null,null],["2019-04-26",58.1,58.19,57.41,59.89,466239073,34.39,-11.37,9.35,912.36],["2019-04-29",55,55.66,52.77,56.99,1196849538,-8.59,-39.28,null,null],["2019-04-30",55.7,58,55.01,59.5,656310216,1,-67.03,2.64,468.82],["2019-05-06",56,52.91,52.2,56.6,538101368,4,-130.6,null,null],["2019-05-07",52.9,54.49,52.89,55.77,392154601,2,-111.43,null,null],["2019-05-08",53.45,55.7,53.25,57.45,430129161,-18.16,-136,null,null],["2019-05-09",55,53.9,52.91,55.99,539134949,-12.03,-160.85,null,null],["2019-05-10",54.66,57.1,54.02,57.1,459294401,3.51,-135.35,3.45,410.1],["2019-05-13",56.22,56.25,55.1,57.59,418734185,-14.72,-119.3,null,null],["2019-05-14",55.5,56.15,55.5,57.47,296501234,-12.04,-57.93,null,null],["2019-05-15",56.71,57.86,55.9,58.7,595904097,30.2,-22.58,null,null],["2019-05-16",57.44,59.27,57.02,59.8,505803344,-17.6,27.18,null,null],["2019-05-17",59.25,57.69,57.5,59.88,387471182,25.08,54.75,10.05,465.88],["2019-05-20",57.26,55.44,54.8,57.69,382016958,-5.83,13.42,null,null],["2019-05-21",56.15,56.3,55,56.97,257882594,3,18.69,null,null],["2019-05-22",56.01,55.3,54.6,56.24,287602879,-7.7,0.95,null,null],["2019-05-23",54.73,52.91,52.05,55,541329347,-50.69,-40.12,null,null],["2019-05-24",53,54.17,52.82,54.9,358902780,-22.27,-47.93,-50.49,305.17],["2019-05-27",41.59,41.95,40.58,42.68,310336260,2,-50.7,null,null],["2019-05-28",41.95,42.25,41.3,43.21,380221249,2.6,-71.41,null,null],["2019-05-29",41.71,42,41.6,42.71,0,2,-44.69,null,null],["2019-05-30",41.98,41.28,40.65,42.47,273184346,-7.31,-78.59,null,null],["2019-05-31",41.26,41.2,40.6,41.87,211770195,-3.92,-103.13,29.87,105.1]]}'; var cdata = JSON.parse(str); var data = splitData(cdata.data); var code = cdata.stockcode; var stockname = cdata.name; //console.log(cdata); var option = { tooltip: { //弹框指示器 trigger: 'axis', alwaysShowContent: true, axisPointer: { type: 'cross' }, position: function (pos, params, el, elRect, size) { var obj = {top: 10}; obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30; return obj; }, formatter: function (param) { var params = param[0]; $date = params.name; $today = data.datas[params.dataIndex]; // $today = params.data; $yestoday = data.datas[params.dataIndex-1]; //console.log(params.dataIndex); //console.log(data.datas[params.dataIndex-1][1]); // 昨天收盘价 //console.log(data.datas[params.dataIndex]); //console.log(params.data); //console.log(666); if ($date) { return [ '日期: ' + $date + '

', '开盘: ' + $today[0] + '
', '收盘: ' + $today[1] + '
', '最低: ' + $today[2] + '
', '最高: ' + $today[3] + '
', '涨幅: ' + (($today[1] - $yestoday[1])/$yestoday[1]*100).toFixed(2) + '%
'+ '

', 'MACD1: ' + $today[5] + ($today[5]>$yestoday[5]?'↑':'↓')+'
', 'MACD2: ' + $today[6] + ($today[6]>$yestoday[6]?'↑':'↓')+'
', ].join(''); }else{ //return } }, }, legend: { //图例控件,点击图例控制哪些系列不显示 icon: 'rect', type:'scroll', itemWidth: 14, itemHeight: 2, left: 0, top: '-1%', animation:true, textStyle: { fontSize: 12, color: '#0e99e2' }, pageIconColor:'#0e99e2' }, axisPointer: { //show: true, link: {xAxisIndex: 'all'}, //label: { // backgroundColor: '#777' //} }, color: [ma5Color, ma10Color, ma20Color, ma30Color], grid: [{ id: 'gd1', left: '0%', right: '1%', height: '42%', //主K线的高度, top: '5%' }, { left: '0%', right: '1%', top: '43%', height: '7%' //交易量图的高度 }, { left: '0%', right: '1%', top: '42%', //MACD 指标 height: '12%' }, { left: '0%', right: '1%', top: '54%', //MACD2 指标 height: '30%' }, { left: '0%', right: '1%', top: '74%', //MACD3 指标 height: '20%' }], xAxis: [ //==== x轴 { //主图 type: 'category', data: data.times, scale: true, axisLine: { onZero: false }, axisPointer: { z: 100, label: { show: false } }, axisLabel: { //label文字设置 show: false }, splitLine: { show: false, lineStyle: { color: '#3a3a3e' } }, splitNumber: 20, min: 'dataMin', max: 'dataMax' }, { //交易量图 type: 'category', gridIndex: 1, data: data.times, axisLabel: { //label文字设置 color: '#9b9da9', fontSize: 10, show: false }, axisPointer: { label: { show: false } } }, { //幅图 type: 'category', gridIndex: 2, data: data.times, axisLabel: { show: false }, axisPointer: { label: { show: false } } }, { //庄家散户 type: 'category', gridIndex: 3, data: data.times, triggerEvent : false, triggerTooltip: false, axisPointer: { label: { show: false } }, axisLabel: { show: false } }, { //庄家散户长线 type: 'category', gridIndex: 4, triggerTooltip: false, data: data.times, axisLabel: { show: false }, } ], yAxis: [ //y轴 { //==主图 scale: true, z:4, axisLabel: { //label文字设置 color: '#c7c7c7', inside: true, //label文字朝内对齐 }, splitLine: { //分割线设置 show: false, lineStyle: { color: '#181a23' } }, }, { //交易图 gridIndex: 1, splitNumber: 3, z:4, axisLine: { onZero: false }, axisTick: { show: false }, splitLine: { show: false }, axisLabel: { //label文字设置 color: '#c7c7c7', inside: true, //label文字朝内对齐 fontSize: 8 }, }, { //幅图 z:4, gridIndex: 2,splitNumber: 4, axisLine: { onZero: false }, axisTick: { show: false }, splitLine: { show: false }, axisLabel: { //label文字设置 color: '#c7c7c7', inside: true, //label文字朝内对齐 fontSize: 8 }, }, { //幅图 z:4, gridIndex: 3,splitNumber: 4, axisLine: { onZero: false }, axisTick: { show: false }, splitLine: { show: false }, axisLabel: { //label文字设置 color: '#c7c7c7', inside: true, //label文字朝内对齐 fontSize: 8 }, }, { //幅图 z:4, gridIndex: 4,splitNumber: 4, axisLine: { onZero: false }, axisTick: { show: false }, splitLine: { show: false }, axisLabel: { //label文字设置 color: '#c7c7c7', inside: true, //label文字朝内对齐 fontSize: 8 }, } ], dataZoom: [{ type: 'slider', xAxisIndex: [0, 1, 2, 3, 4], //控件联动 start: 0, end: 100, throttle: 10, top: '94%', height: '6%', borderColor: '#696969', textStyle: { color: '#dcdcdc' }, handleSize: '90%', //滑块图标 handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', dataBackground: { lineStyle: { color: '#fff' }, //数据边界线样式 areaStyle: { color: '#000000' } //数据域填充样式 } }, { type: 'inside', xAxisIndex: [0, 1, 2, 3, 4],//控件联动 }, ], visualMap: [ { show: false, seriesIndex: 6, dimension: 0, pieces: [ // { // lte: 0, // color: 'green' // }, { // gt: 1, // color: 'red' // } ], //pieces的值由动态数据决定 outOfRange: { color: 'green' }, }, { show: false, seriesIndex: 7, dimension: 0, pieces: [], //pieces的值由动态数据决定 outOfRange: { color: 'green' }, }, ], animation: false, //禁止动画效果 backgroundColor: bgColor, blendMode: 'source-over', series: [{ name: code+ stockname +'日K线', type: 'candlestick', data: data.datas, barWidth: '55%', large: true, largeThreshold: 100, itemStyle: { normal: { color: upColor, //fd2e2e ff4242 color0: downColor, borderColor: upColor, borderColor0: downColor, //opacity:0.8 } }, }, { name: 'MA5', type: 'line', data: calculateMA(5,data), smooth: true, symbol: "none", //隐藏选中时有小圆点 lineStyle: { normal: { opacity: 0.8, color: '#39afe6', width: 1 } }, }, { name: 'MA10', type: 'line', data: calculateMA(10,data), smooth: true, symbol: "none", lineStyle: { //标线的样式 normal: { opacity: 0.8, color: '#da6ee8', width: 1 } } }, { name: 'MA20', type: 'line', data: calculateMA(20,data), smooth: true, symbol: "none", lineStyle: { opacity: 0.8, width: 1, color: ma20Color } }, { name: 'MA30', type: 'line', data: calculateMA(30,data), smooth: true, symbol: "none", lineStyle: { normal: { opacity: 0.8, width: 1, color: ma30Color } } }, { name: 'Volumn', type: 'bar', xAxisIndex: 1, yAxisIndex: 1, data: data.vols, barWidth: '60%', itemStyle: { normal: { color: function(params) { var colorList; if (data.datas[params.dataIndex][1] > data.datas[params.dataIndex][0]) { colorList = upColor; } else { colorList = downColor; } return colorList; }, } } }, { name: 'macd1', type: 'line', symbol: "none", xAxisIndex: 3, yAxisIndex: 3, data: data.zj, connectNulls: true, // itemStyle: { // normal: { // color: function(params) { // var colorList; // if (params.dataIndex>1 && data.zj[params.dataIndex][1] > data.zj[params.dataIndex-1][1]) { // colorList = upColor; // } else { // colorList = downColor; // } // return colorList; // }, // } // }, lineStyle: { normal: { //color: '#FF0000', width: 1 } }, }, { name: 'macd2', type: 'line', symbol: "none", //smooth:0, //关键点，为true时不支持虚线，实线就用true xAxisIndex: 3, yAxisIndex: 3, data: data.sh, lineStyle: { normal: { opacity: 1, //color: '#39afe6', width: 1, type: 'dotted' // 这个是虚线 dashed， dotted更密集 } }, }, { name: '0', type: 'line', symbol: "none", xAxisIndex: 3, yAxisIndex: 3, data: data.lz, lineStyle: { normal: { opacity: 0.8, color: '#0000e6', width: 1 } } }, ] }; //console.log(option.visualMap[0].pieces); //console.log(option.series[9].data); //console.log(data); // 设置macd折线涨就红色，跌就绿色 var mydata = data.zj; var piecesn = 0; var j = 0; for(let i = 1; i < mydata.length; i++) { //console.log(i); if(mydata[i][2] == 1) { option.visualMap[piecesn].pieces[j] = {gt:i-1,lte:i,color:'red'}; j++; } } // 设置macd折线涨就红色，跌就绿色 var mydata = data.sh; var piecesn = 1; var j = 0; for(let i = 1; i < mydata.length; i++) { //console.log(i); if(mydata.indexOf(i) && mydata[i] >= mydata[i-1]) { option.visualMap[piecesn].pieces[j] = {gt:i-1,lte:i,color:'red'}; j++; } } return option; } /** * 15:20 时:分格式时间增加num分钟 * @param {Object} time 起始时间 * @param {Object} num */ function addTimeStr(time,num){ var hour=time.split(':')[0]; var mins=Number(time.split(':')[1]); var mins_un=parseInt((mins+num)/60); var hour_un=parseInt((Number(hour)+mins_un)/24); if(mins_un>0){ if(hour_un>0){ var tmpVal=((Number(hour)+mins_un)%24)+""; hour=tmpVal.length>1? tmpVal:'0'+tmpVal;//判断是否是一位 }else{ var tmpVal=Number(hour)+mins_un+""; hour=tmpVal.length>1? tmpVal:'0'+tmpVal; } var tmpMinsVal=((mins+num)%60)+""; mins=tmpMinsVal.length>1? tmpMinsVal:0+tmpMinsVal;//分钟数为取余60的数 }else{ var tmpMinsVal=mins+num+""; mins=tmpMinsVal.length>1? tmpMinsVal:'0'+tmpMinsVal;//不大于整除60 } return hour+":"+mins; } //获取增加指定分钟数的数组如 09:30增加2分钟结果为 ['09:31','09:32'] function getNextTime(startTime, endTIme, offset, resultArr) { var result = addTimeStr(startTime, offset); resultArr.push(result); if (result == endTIme) { return resultArr; } else { return getNextTime(result, endTIme, offset, resultArr); } } /** * 不同类型的股票的交易时间会不同 * @param {Object} type hs=沪深 us=美股 hk=港股 */ var time_arr = function(type) { if(type.indexOf('us')!=-1){//生成美股时间段 var timeArr = new Array(); timeArr.push('09:30') return getNextTime('09:30', '16:00', 1, timeArr); } if(type.indexOf('hs')!=-1){//生成沪深时间段 var timeArr = new Array(); timeArr.push('09:30'); timeArr.concat(getNextTime('09:30', '11:29', 1, timeArr)); timeArr.push('13:00'); timeArr.concat(getNextTime('13:00', '15:00', 1, timeArr)); return timeArr; } if(type.indexOf('hk')!=-1){//生成港股时间段 var timeArr = new Array(); timeArr.push('09:30'); timeArr.concat(getNextTime('09:30', '11:59', 1, timeArr)); timeArr.push('13:00'); timeArr.concat(getNextTime('13:00', '16:00', 1, timeArr)); return timeArr; } } var get_m_data = function(m_data,type) { var priceArr = new Array(); var avgPrice = new Array(); var vol = new Array(); var times = time_arr(type); $.each(m_data.data, function(i, v) { priceArr.push(v[1]); avgPrice.push(v[2]); vol.push(v[3]); }) return { priceArr: priceArr, avgPrice: avgPrice, vol: vol, times: times } } /** * 计算价格涨跌幅百分比 * @param {Object} price 当前价 * @param {Object} yclose 昨收价 */ function ratioCalculate(price,yclose){ return ((price-yclose)/yclose*100).toFixed(3); } //数组处理 function splitData(rawData) { var datas = []; var times = [];var vols = []; var zj = [];var sh = [];var lz = [];var zjw = [];var shw = [];var lzw = []; for (var i = 0; i < rawData.length; i++) { datas.push(rawData[i]); times.push(rawData[i].splice(0, 1)[0]); vols.push(rawData[i][4]); zj.push([i,rawData[i][5],((i>0 && rawData[i][5]>rawData[i-1][5])?1:-1)]); sh.push(rawData[i][6]); lz.push(0); } return {datas:datas,times:times,vols:vols,zj:zj,sh:sh,lz:lz,zjw:zjw,shw:shw,lzw:lzw}; } //================================MA计算公式 function calculateMA(dayCount,data) { var result = []; for (var i = 0, len = data.times.length; i < len; i++) { if (i < dayCount) { result.push('-'); continue; } var sum = 0; for (var j = 0; j < dayCount; j++) { sum += data.datas[i - j][1]; } result.push((sum / dayCount).toFixed(2)); } return result; }

bug,折线使用visualMap，分段显示不同颜色，颜色会越界，会错乱