K线图

<div id="main" style="width:100%;height:800px;border:1px solid gainsboro;"></div>

<script src="js/jquery.min.js"></script>

<script src="js/echarts.js"></script>

//js代码

var data0 = splitData([

['2013/1/24', 2020.26, 2320.26, 2287.3, 2362.94],

['2013/1/25', 2300, 2291.3, 2288.26, 2308.38],

['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92],

['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8],

['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76],

['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82],

['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15],

['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38],

['2013/2/5', 2411, 2433.13, 2403.3, 2437.42],

['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73],

['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89],

['2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03],

['2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8],

['2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07],

['2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94],

['2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82],

['2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88],

['2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78],

['2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71],

['2013/5/30', 2316.25, 2317.75, 2310.49, 2325.72],

['2013/5/31', 2320.74, 2300.59, 2299.37, 2325.53],

['2013/6/3', 2300.21, 2299.25, 2294.11, 2313.43],

['2013/6/4', 2297.1, 2272.42, 2264.76, 2297.1],

['2013/6/5', 2270.71, 2270.93, 2260.87, 2276.86],

['2013/6/6', 2264.43, 2242.11, 2240.07, 2266.69],

['2013/6/7', 2242.26, 2210.9, 2205.07, 2250.63],

['2013/6/13', 2190.1, 2148.35, 2126.22, 2190.1]

]);

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

};

}

function calculateMA(dayCount) {

var result = [];

for(var i = 0, len = data0.values.length; i < len; i++) {

if(i < dayCount) {

result.push('-');

continue;

}

var sum = 0;

for(var j = 0; j < dayCount; j++) {

sum += data0.values[i - j][1];

}

result.push(sum / dayCount);

}

return result;

}

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: data0.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: data0.values,

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 + '

' + (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',

type: 'line',

data: calculateMA(5),

smooth: true,

lineStyle: {

normal: {

opacity: 0.5

}

}

},

{

name: 'MA10',

type: 'line',

data: calculateMA(10),

smooth: true,

lineStyle: {

normal: {

opacity: 0.5

}

}

},

{

name: 'MA20',

type: 'line',

data: calculateMA(20),

smooth: true,

lineStyle: {

normal: {

opacity: 0.5

}

}

},

{

name: 'MA30',

type: 'line',

data: calculateMA(30),

smooth: true,

lineStyle: {

normal: {

opacity: 0.5

}

}

},

]

}

echarts.setOption(option);