Toggle navigation
bug,折线使用visualMap,分段显示不同颜色,颜色会越界,会错乱
By
dignfei
2019-06-02 14:14:38
脚本
16
21
作品使用的第三方脚本
数据管理
上传数据
支持小于 5M 任意格式(csv, xlsx, json, xml, ...)的数据文件
上传后可以通过生成的文件链接异步获取托管的数据。
历史数据
0 条
无历史数据
代码修改记录
信息提示
保存作品
对当前截图不满意?你还可以
上传本地截图
重新截图
作品名称
作品描述
标签
geo
grid
legend
markLine
markPoint
bar
effectScatter
line
lines
map
timeline
title
toolbox
tooltip
visualMap
作品默认版本
最新
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
20:11:45
图表已生成
整理代码
刷新
代码
//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; }