由于工作需要画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);
});
可以在官方日力图实例看下