Echarts制作K线图

qq_28032019 2019-03-11 12:12:25

//绘制图表
function splitDate(rawData) {
var categoryData = [];
var values = [];
for (var i in rawData.results) {
for (var x in rawData.results[i].array) {
//categoryDate 日期把返回的日期放到categoryData[]数组中
categoryData.push(rawData.results[i].array[x].splice(0, 1)[0]);
//数据数组，即数组中除日期外的数据
var arr = rawData.results[i].array[x];
arr[2] = arr.splice(3,1,arr[2])[0]; //数组下标位置转换最低价最高价
values.push(rawData.results[i].array[x]);
}
}
// echarts图表绘制函数
option = {
title: {
// text: '上证指数',
left: 0
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
},
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: categoryData,
scale: true,
boundaryGap : false,
axisLine: {onZero: false},
splitLine: {show: false},
splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
},
yAxis: {
scale: true,
splitArea: {
show: true
}
},
dataZoom: [
{
type: 'inside',
start: 50,
end: 100
},
{
show: true,
type: 'slider',
y: '90%',
start: 50,
end: 100
}
],
series: [
{
name: '日K',
type: 'candlestick',
data: values,
itemStyle: {
normal: {
color: upColor,
color0: downColor,
borderColor: upBorderColor,
borderColor0: downBorderColor
}
},
},
{
name: 'MA5',
type: 'line',
data: calculateMA(5,values),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
}
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10,values),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
}
},
{
name: 'MA20',
type: 'line',
data: calculateMA(20,values),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
}
},
{
name: 'MA30',
type: 'line',
data: calculateMA(30,values),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
}
},

]
};
if (option && typeof option === 'object') {
myChart.setOption(option, true);
}
}
function calculateMA(dayCount,values) {
var result = [];
for (var i = 0, len = values.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += values[i - j][1];
}
var aa = (sum / dayCount);
result.push(aa.toFixed(2));
// result.push(sum / dayCount);

}

return result;
}

rawData是ajax回调回来的数据

...全文