ECharts股票k线图
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>股票k线</title>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="js/echarts-all-3.js"></script>
<script type="text/javascript" src="js/dataTool.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/world.js"></script>
<script type="text/javascript" src="js/api.js"></script>
<script type="text/javascript" src="js/bmap.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
function splitData(rawData) {
var categoryData = [];
var values = [];
var volumns = [];
for (var i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
values.push(rawData[i]);
volumns.push(rawData[i][4]);
}
return {
categoryData: categoryData,
values: values,
volumns: volumns
};
}
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('data/stock.json', function (rawData) {//数据接口，插入数据
var data = splitData(rawData);
myChart.setOption(option = {
backgroundColor: '#000',
animation: false,
legend: {
bottom: 10,
left: 'center',
data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
backgroundColor: 'rgba(245, 245, 245, 0.8)',
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'
}
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: false
},
brush: {
type: ['lineX', 'clear']
}
}
},
brush: {
xAxisIndex: 'all',
brushLink: 'all',
outOfBrush: {
colorAlpha: 0.1
}
},
grid: [
{
left: '10%',
right: '8%',
height: '50%'
},
{
left: '10%',
right: '8%',
top: '63%',
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',
axisPointer: {
label: {
formatter: function (params) {
var seriesValue = (params.seriesData[0] || {}).value;
return params.value
+ (seriesValue != null
? '\n' + echarts.format.addCommas(seriesValue)
: ''
);
}
}
}
}
],
yAxis: [
{
position:'right',
scale: true,
splitArea: {
show: false
}
},
{
scale: true,
gridIndex: 1,
splitNumber: 2,
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
}
],
series: [
{
name: 'Dow-Jones index',
type: 'candlestick',
data: data.values,
itemStyle: {
normal: {
borderColor: '#3aa60c',
color: '#3aa60c',
borderColor0: '#f00',
color0: '#000'
}
},
tooltip: {
formatter: function (param) {
param = param[0];
return [
'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
'Open: ' + param.data[0] + '<br/>',
'Close: ' + param.data[1] + '<br/>',
'Lowest: ' + param.data[2] + '<br/>',
'Highest: ' + param.data[3] + '<br/>'
].join('');
}
}
},
{
name: 'MA5',
type: 'line',
data: calculateMA(5, data),
smooth: true,
lineStyle: {
normal: {
opacity: 0.5,
color: '#997500'
}
}
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10, data),
smooth: true,
lineStyle: {
normal: {
opacity: 0.5,
color: '#1e0039'
}
}
},
{
name: 'MA20',
type: 'line',
data: calculateMA(20, data),
smooth: true,
lineStyle: {
normal: {
opacity: 0.5,
color:'#a50053'
}
}
},
// {
// name: 'MA30',
// type: 'line',
// data: calculateMA(30, data),
// smooth: true,
// lineStyle: {
// normal: {
// opacity: 0.5,
//
// }
// }
// },
{
name: 'Volumn',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: data.volumns,
itemStyle:{
normal:{
color:'red'//颜色修改
}
}
}
],
textStyle:{
color:"white"
}
}, true);
// myChart.on('brushSelected', renderBrushed);
// function renderBrushed(params) {
// var sum = 0;
// var min = Infinity;
// var max = -Infinity;
// var countBySeries = [];
// var brushComponent = params.brushComponents[0];
// var rawIndices = brushComponent.series[0].rawIndices;
// for (var i = 0; i < rawIndices.length; i++) {
// var val = data.values[rawIndices[i]][1];
// sum += val;
// min = Math.min(val, min);
// max = Math.max(val, max);
// }
// panel.innerHTML = [
// '<h3>STATISTICS:</h3>',
// 'SUM of open: ' + (sum / rawIndices.length).toFixed(4) + '<br>',
// 'MIN of open: ' + min.toFixed(4) + '<br>',
// 'MAX of open: ' + max.toFixed(4) + '<br>'
// ].join(' ');
// }
myChart.dispatchAction({
type: 'brush',
areas: [
{
brushType: 'lineX',
coordRange: ['2016-06-02', '2016-06-20'],
xAxisIndex: 0
}
]
});
});;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
扫一扫
3220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
