echarts K线图

由于工作需要画K线图，那么使用echarts 来实现k线图，但是由于echarts的k线图不能满足需求，结合了echarts 的k线图实例和日力图实例，再加上自己摸索看官方文档，终于需求实现了，
实例：

drawLine(data,MA5Price,MA10Price,MA20Price,MA30Price,MA60Price,dn,mb,up,ids,volumes,rsi,rsiABSEma,rsiMaxEma,MA5Volume,MA10Volume,s,rsv,d,j,k,dif,dea,macd,ema12,ema26,r,tr,atr,tradeList){this.$nextTick(function () {var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;var upColor = '#ec0000';var upBorderColor = '#8A0000';var downColor = '#00da3c';var downBorderColor = '#008F28';// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)var data0 = splitData(data);function splitData(rawData) {var categoryData = [];var values = []for (var i = 0; i < rawData.length; i++) {categoryData.push(rawData[i].splice(0, 1)[0]);values.push(rawData[i])}return {categoryData: categoryData,values: values};}myChart.setOption(   option = {animation: false,legend: {data: ['K线图','MA5','MA10','MA20','MA30','MA60','dn','mb','up'],},tooltip: {trigger: 'axis',axisPointer: {type: 'cross'},confine:true,borderWidth: 1,borderColor: '#ccc',padding: 10,textStyle: {fontSize: 5, //设置字体大小color: '#000'},//  extraCssText: 'width:250px;height:400px;',//提示框大小},axisPointer: { //十字线link: {xAxisIndex: 'all'},label: {backgroundColor: '#777'}},grid: [{left: '10%',right: '8%',height: '40%'},{left: '10%',right: '8%',top: '50%',height: '10%'},{left: '10%',right: '8%',top: '60%',height: '5%'},{left: '10%',right: '8%',top: '65%',height: '5%'},{left: '10%',right: '8%',top: '70%',height: '5%'},{left: '10%',right: '8%',top: '75%',height: '5%'},{left: '10%',right: '8%',top: '80%',height: '5%'},{left: '10%',right: '8%',top: '85%',height: '5%'},{left: '10%',right: '8%',top: '90%',height: '5%'},{ //调left: '10%',right: '8%',top: '95%',height: '5%'},],xAxis: [{type: 'category',data: data0.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},splitLine: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax',axisPointer: {z: 100}},{type: 'category',gridIndex: 1,data: data0.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax'},{type: 'category',gridIndex: 2,data: data0.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax'},{type: 'category',gridIndex: 3,data: data0.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax'},{type: 'category',gridIndex: 4,data: data0.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax'},{type: 'category',gridIndex: 5,data: data0.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax'},{type: 'category',gridIndex: 6,data: data0.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax'},{type: 'category',gridIndex: 7,data: data0.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax'},{type: 'category',gridIndex: 8,data: data0.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax'},{type: 'category',gridIndex: 9,data: data0.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax'}],yAxis: [{scale: true,splitArea: {show: true}},{scale: true,gridIndex: 1,splitNumber: 2,axisLabel: {show: false},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}},{name:'volume:',scale: true,gridIndex: 2,splitNumber: 2,axisLabel: {show: false},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}},{name:'RSI:',scale: true,gridIndex: 3,splitNumber: 2,axisLabel: {show: false},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}},{name:'VolumeMA:',scale: true,gridIndex: 4,splitNumber: 2,axisLabel: {show: false},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}},{name:'KDJ:',scale: true,gridIndex: 5,splitNumber: 2,axisLabel: {show: false},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}},{name:'MACD:',scale: true,gridIndex: 6,splitNumber: 2,axisLabel: {show: false},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}},{name:'ema:',scale: true,gridIndex: 7,splitNumber: 2,axisLabel: {show: false},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}},{name:'WR:',scale: true,gridIndex: 8,splitNumber: 2,axisLabel: {show: false},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}},{name:'ATR:',scale: true,gridIndex: 9,splitNumber: 2,axisLabel: {show: false},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}}],dataZoom: [{type: 'inside',xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],start: 0,end: 100},{show: true,xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],type: 'slider',top: '96%',start: 0,end: 100},{show: true,xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],type: 'slider',top: '96%',start: 0,end: 100},{show: true,xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],type: 'slider',top: '96%',start: 0,end: 100},{show: true,xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],type: 'slider',top: '96%',start: 0,end: 100},{show: true,xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],type: 'slider',top: '96%',start: 0,end: 100},{show: true,xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],type: 'slider',top: '96%',start: 0,end: 100},{show: true,xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],type: 'slider',top: '96%',start: 0,end: 100},{show: true,xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],type: 'slider',top: '96%',start: 0,end: 100},{show: true,xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],type: 'slider',top: '96%',start: 0,end: 100}],series: [{name: 'K线图',type: 'candlestick',data: data0.values,itemStyle: {color: upColor,color0: downColor,borderColor: upBorderColor,borderColor0: downBorderColor},markPoint: {label: {normal: {formatter: function (param) {return param != null ? param.value: '';}}},data: tradeList,},markLine: {symbol: ['none', 'none'],data: [[{name: 'from lowest to highest',type: 'min',valueDim: 'lowest',symbol: 'circle',symbolSize: 10,label: {show: false},emphasis: {label: {show: false}}},{type: 'max',valueDim: 'highest',symbol: 'circle',symbolSize: 10,label: {show: false},emphasis: {label: {show: false}}}],{name: 'min line on close',type: 'min',valueDim: 'close'},{name: 'max line on close',type: 'max',valueDim: 'close'},{name: 'highest value',type: 'max',valueDim: 'highest'},{name: 'lowest value',type: 'min',valueDim: 'lowest'},]},},{name: 'MA5',type: 'line',data: MA5Price,smooth: true,lineStyle: {opacity: 0.5}},{name: 'MA10',type: 'line',data: MA10Price,smooth: true,lineStyle: {opacity: 0.5}},{name: 'MA20',type: 'line',data: MA20Price,smooth: true,lineStyle: {opacity: 0.5}},{name: 'MA30',type: 'line',data: MA30Price,smooth: true,lineStyle: {opacity: 0.5}},{//消除空，不然图有错误type: 'line',data: [],},{name: 'MA60',type: 'line',data: MA60Price,smooth: true,lineStyle: {opacity: 0.5}},{name: 'dn',type: 'line',data: dn ,smooth: true,lineStyle: {opacity: 0.5}},{name: 'mb',type: 'line',data: mb,smooth: true,lineStyle: {opacity: 0.5}},{name: 'up',type: 'line',data: up ,smooth: true,lineStyle: {opacity: 0.5}},{name: 'Volume',type: 'bar',xAxisIndex: 1,yAxisIndex: 1,data: volumes,itemStyle: {normal: {color: function(params) {var colorList;if (params.data[2]==-1) {colorList = upColor;} else {colorList =  downColor;}return colorList;}}}},//RSI{name: 'rsi',type: 'line',xAxisIndex: 2,yAxisIndex: 2,data: rsi ,smooth: true,lineStyle: {opacity: 0.5}},{name: 'rsiABSEma',type: 'line',xAxisIndex: 2,yAxisIndex: 2,data: rsiABSEma ,smooth: true,lineStyle: {opacity: 0.5}},{name: 'rsiMaxEma',type: 'line',xAxisIndex: 2,yAxisIndex: 2,data: rsiMaxEma ,smooth: true,lineStyle: {opacity: 0.5}},//VolumeMA{name: 'MA5Volume',type: 'line',xAxisIndex: 3,yAxisIndex: 3,data: MA5Volume ,smooth: true,lineStyle: {opacity: 0.5}},{name: 'MA10Volume',type: 'line',xAxisIndex: 3,yAxisIndex: 3,data: MA10Volume,smooth: true,lineStyle: {opacity: 0.5}},//KDJ{name: 's',type: 'line',xAxisIndex: 4,yAxisIndex: 4,data: s,smooth: true,lineStyle: {opacity: 0.5}},{name: 'rsv',type: 'line',xAxisIndex: 4,yAxisIndex: 4,data: rsv,smooth: true,lineStyle: {opacity: 0.5}},{name: 'd',type: 'line',xAxisIndex: 4,yAxisIndex: 4,data: d,smooth: true,lineStyle: {opacity: 0.5}},{name: 'j',type: 'line',xAxisIndex: 4,yAxisIndex: 4,data: j,smooth: true,lineStyle: {opacity: 0.5}},{name: 'k',type: 'line',xAxisIndex: 4,yAxisIndex: 4,data: k,smooth: true,lineStyle: {opacity: 0.5}},//MACD{name: 'dif',type: 'line',xAxisIndex: 5,yAxisIndex: 5,data: dif,smooth: true,lineStyle: {opacity: 0.5}},{name: 'dea',type: 'line',xAxisIndex: 5,yAxisIndex: 5,data: dea,smooth: true,lineStyle: {opacity: 0.5}},{name: 'macd',type: 'line',xAxisIndex: 5,yAxisIndex: 5,data: macd,smooth: true,lineStyle: {opacity: 0.5}},{name: 'ema12',type: 'line',xAxisIndex: 6,yAxisIndex: 6,data: ema12,smooth: true,lineStyle: {opacity: 0.5}},{name: 'ema26',type: 'line',xAxisIndex: 6,yAxisIndex: 6,data: ema26,smooth: true,lineStyle: {opacity: 0.5}},{name: 'r',type: 'line',xAxisIndex: 7,yAxisIndex: 7,data: r,smooth: true,lineStyle: {opacity: 0.5}},{name: 'tr',type: 'line',xAxisIndex: 8,yAxisIndex: 8,data: tr,smooth: true,lineStyle: {opacity: 0.5}},{name: 'atr',type: 'line',xAxisIndex: 8,yAxisIndex: 8,data: atr,smooth: true,lineStyle: {opacity: 0.5}},]},true)});option && myChart.setOption(option);},

接口数据太多了就不放在这了。这是我改的官方日力图的代码，效果一样的，

var upColor = '#00da3c';
var downColor = '#ec0000';function splitData(rawData) {var categoryData = [];var values = [];var volumes = [];for (var i = 0; i < rawData.length; i++) {categoryData.push(rawData[i].splice(0, 1)[0]);values.push(rawData[i]);volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);}return {categoryData: categoryData,values: values,volumes: volumes};
}function calculateMA(dayCount, data) {var result = [];for (var i = 0, len = data.values.length; i < len; i++) {if (i < dayCount) {result.push('-');continue;}var sum = 0;for (var j = 0; j < dayCount; j++) {sum += data.values[i - j][1];}result.push(+(sum / dayCount).toFixed(3));}return result;
}$.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {var data = splitData(rawData);myChart.setOption(option = {animation: false,legend: {bottom: 10,left: 'center',data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']},tooltip: {trigger: 'axis',axisPointer: {type: 'cross'},borderWidth: 1,borderColor: '#ccc',padding: 10,textStyle: {color: '#000'},position: function (pos, params, el, elRect, size) {var obj = {top: 10};obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;return obj;}// extraCssText: 'width: 170px'},axisPointer: {link: {xAxisIndex: 'all'},label: {backgroundColor: '#777'}},visualMap: {show: false,seriesIndex: 5,dimension: 2,pieces: [{value: 1,color: downColor}, {value: -1,color: upColor}]},grid: [{left: '10%',right: '8%',height: '50%'},{left: '10%',right: '8%',top: '63%',height: '16%'},{left: '10%',right: '8%',top: '73%',height: '16%'}],xAxis: [{type: 'category',data: data.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},splitLine: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax',axisPointer: {z: 100}},{type: 'category',gridIndex: 1,data: data.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax'},{type: 'category',gridIndex: 2,data: data.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax'}],yAxis: [{scale: true,splitArea: {show: true}},{scale: true,gridIndex: 1,splitNumber: 2,axisLabel: {show: false},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}},{scale: true,gridIndex: 2,splitNumber: 3,axisLabel: {show: false},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}}],dataZoom: [{type: 'inside',xAxisIndex: [0, 1],start: 98,end: 100},{show: true,xAxisIndex: [0, 1],type: 'slider',top: '85%',start: 98,end: 100},{show: true,xAxisIndex: [0, 1, 2],type: 'slider',top: '85%',start: 98,end: 100},],series: [{name: 'Dow-Jones index',type: 'candlestick',data: data.values,itemStyle: {color: upColor,color0: downColor,borderColor: null,borderColor0: null},},{name: 'MA5',type: 'line',data: calculateMA(5, data),smooth: true,lineStyle: {opacity: 0.5}},{name: 'MA10',type: 'line',data: calculateMA(10, data),smooth: true,lineStyle: {opacity: 0.5}},{name: 'MA20',type: 'line',data: calculateMA(20, data),smooth: true,lineStyle: {opacity: 0.5}},{name: 'MA30',type: 'line',data: calculateMA(30, data),smooth: true,lineStyle: {opacity: 0.5}},{name: 'Volume',type: 'bar',xAxisIndex: 1,yAxisIndex: 1,data: data.volumes},{name: 'Volume',type: 'line',xAxisIndex: 2,yAxisIndex: 2,data: data.volumes}]}, true);});

可以在官方日力图实例看下

echarts K线图相关推荐

通过新浪股票接口实现 Echarts K线图
股票行情K线图的效果找到一个好的接口很重要~~(之前自己搜罗的一个接口查回来的数据 JSON key不带引号恶心的一匹然后数据也不是很好用,直接舍弃) 股票行情图接口-日K历史数据请求 ( ...
SpringBoot+webSocket+echarts K线图（自动更新）
1.前端html代码 <!--THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.htm ...
html引入外部股票k线图,怎么做股票网站的K线图 echarts k线图怎么导入动态数据...
1.加载插件,实例化chart. 2.链接websocket 3.接收数据,处理数据,调用chart的实例,不断更新数据百度的echart有k线图更新动态数据方法:html> 50 //加载 ...
echarts K线图candlestick
1.配置datadata:[[open, close, lowest, highest],[],...]及开盘值, 收盘值, 最低值, 最高值2.配置seriesseries:[{type: 'can ...
微信小程序使用Echarts绘制K线图与双曲线图以及实现tab切换
在微信小程序中使用Echarts需要下载相应的文件,可在这下载ec-canvas,该github里也有很多很好的例子,可自行调试学习. 本例子的目录结构: 微信小程序使用Echarts的步骤在需要引 ...
python 通达信板块_[python]沪深龙虎榜数据导入通达信的自选板块，并标注于K线图上...
将沪深龙虎榜数据导入通达信的自选板块,并标注于K线图上原理:python读取前一次处理完的计算5日后涨跌幅输出的csv文件文件名前加"[paint]" 安照通达信的画图文件和板 ...
php k线图 echarts,利用ECharts.js画K线图的方法示例
前言最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比较简单,不过数据这块需要在后 ...
layui + echarts股票K线图（含案例、代码、截图）（转载篇）
文章目录 layui + echarts股票K线图(含案例.代码.截图)(转载篇) 一.案例.代码.截图经验 · 补充说明: layui + echarts股票K线图(含案例.代码.截图)(转载篇) ...
如何使用Echarts设计专业的K线图
如何使用Echarts设计专业的K线图先上图: Echarts所需的K线的数据结构有:时间(date),开盘(open),收盘(close),最低(lowest),最高(highest),成交量(v ...

echarts K线图

echarts K线图相关推荐

最新文章

热门文章