Echarts-K线图配置项说明： http://echarts.baidu.com/option.html#title
案例：从数据库获取到开盘(open)，收盘(close)，最低(lowest)，最高(highest)的数据和对应日期，实现K线图的功能。
//时间戳 转换为日期格式
function timestampToTime(timestamp) {
var date = new Date(timestamp);
Y = date.getFullYear() + '/';
M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
D = date.getDate() + ' ';
return Y + M + D;
}
var myChart = echarts.init(document.getElementById('chartmain'));
var upColor = '#ec0000';
var upBorderColor = '#8A0000';
var downColor = '#00da3c';
var downBorderColor = '#008F28';
// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
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: [], //存放日期数组
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: 'inside',
y: '90%',
start: 50,
end: 100
}
],
series: [{
name: '日K',
type: 'candlestick',
data: [], //存放开盘(open)，收盘(close)，最低(lowest)，最高(highest)的数据数组
itemStyle: {
normal: {
color: upColor,
color0: downColor,
borderColor: upBorderColor,
borderColor0: downBorderColor
}
},
markPoint: {
label: {
normal: {
formatter: function(param) {
return param != null ? Math.round(param.value) : '';
}
}
},
data: [{
name: 'XX标点',
coord: ['2013/5/31', 2300], //指定数据的坐标位置
value: 2300,
itemStyle: {
normal: {
color: 'rgb(41,60,85)'
}
}
},
{
name: 'highest value',
type: 'max',
valueDim: 'highest'
},
{
name: 'lowest value',
type: 'min',
valueDim: 'lowest'
},
{
name: 'average value on close',
type: 'average',
valueDim: 'close'
}
],
tooltip: {
formatter: function(param) {
return param.name + '<br>' + (param.data.coord || '');
}
}
},
markLine: {
symbol: ['none', 'none'],
data: [
[{
name: 'from lowest to highest',
type: 'min',
valueDim: 'lowest',
symbol: 'circle',
symbolSize: 10,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
}
},
{
type: 'max',
valueDim: 'highest',
symbol: 'circle',
symbolSize: 10,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
}
}
],
{
name: 'min line on close',
type: 'min',
valueDim: 'close'
},
{
name: 'max line on close',
type: 'max',
valueDim: 'close'
}
]
}
},
{
name: 'MA5', //MA5 5天内的收盘价之和/5
type: 'line',
data:"",
smooth: true,
lineStyle: {
normal: {
opacity: 0.5
}
}
},
{
name: 'MA10',
type: 'line',
data:"",
smooth: true,
lineStyle: {
normal: {
opacity: 0.5
}
}
},
{
name: 'MA20',
type: 'line',
data:"",
smooth: true,
lineStyle: {
normal: {
opacity: 0.5
}
}
},
{
name: 'MA30',
type: 'line',
data:"",
smooth: true,
lineStyle: {
normal: {
opacity: 0.5
}
}
},
]
};
// myChart.setOption(option);
$("#Kxian").click(function() {
var comcode = getQueryVariable("comcode"); //获取点击的城市编码
var market = getQueryVariable("market");
// alert(market);
$.ajax({
type: "post",
url: "http://61.155.6.130:8080/jsee-interface/stk/get_stkdailyquote_list.do",
async: true,
data: {
comcode: comcode, //公司id
market: market //市场板块
},
dataType: "json",
success: function(result) {
var stkDailyQuoteList = result.result_info.stkDailyQuoteList;
var K_time = []; //k线 日期
var K_data = []; //k线 数据
for(var i = 0; i < stkDailyQuoteList.length; i++) {
K_time.push(timestampToTime(stkDailyQuoteList[i].tradingday)),
K_data.push([
stkDailyQuoteList[i].openingprice,
stkDailyQuoteList[i].closingprice, stkDailyQuoteList[i].lowestprice,
stkDailyQuoteList[i].highestprice
]);
}
//计算MA平均线，N日移动平均线=N日收盘价之和/N dayCount要计算的天数(5,10,20,30)
function calculateMA(dayCount) {
var result = [];
for(var i = 0, len = K_data.length; i < len; i++) {
if(i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for(var j = 0; j < dayCount; j++) {
sum += K_data[i - j][1];
}
result.push(sum / dayCount);
}
return result;
}
//设置k线图数据
option.xAxis.data = K_time;
option.series[0].data = K_data;
option.series[1].data = calculateMA(5);
option.series[2].data = calculateMA(10);
option.series[3].data = calculateMA(20);
option.series[4].data = calculateMA(30);
myChart.setOption(option);
},
error: function() {
console.log("获取失败");
}
})
})