以广发双擎升级混合基金 (005911)为例
W005911.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> echarts Kline </title>
<!-- 引入ECharts文件 -->
<script type="text/javascript" src="/echarts/echarts.3.8.js "></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的DOM -->
<div id="main" style="width: 1200px; height: 600px;"></div>
<script type="text/javascript">
/*基于准备好的dom，初始化echarts实例 */
var myChart = echarts.init(document.getElementById('main'));
// 数据项：date,open,close,low,high
// ['2016-01-08',1.1141,1.0800,1.0600,1.1350,1.101]
var data = splitData([['2018-11-02',1.0001,1.0001,1.0001,1.0001],
['2018-11-09',1.0000,1.0000,1.0000,1.0000],
['2018-11-16',0.9999,0.9999,0.9999,0.9999],
['2018-11-23',0.9999,0.9999,0.9999,0.9999],
['2018-11-30',0.9998,0.9998,0.9998,0.9998],
['2018-12-07',0.9997,1.0022,0.9997,1.0036],
['2018-12-14',0.9974,1.0028,0.9974,1.0064],
['2018-12-21',0.9986,0.9813,0.9813,0.9986],
['2018-12-28',0.9849,0.9832,0.9832,0.9868],
['2019-01-04',0.9830,0.9823,0.9760,0.9830],
['2019-01-11',0.9881,0.9929,0.9881,0.9929],
['2019-01-18',0.9847,1.0145,0.9847,1.0145],
['2019-01-25',1.0137,1.0246,0.9999,1.0246],
['2019-02-01',1.0199,1.0478,1.0057,1.0478],
['2019-02-15',1.0719,1.0887,1.0719,1.1046],
['2019-02-22',1.1338,1.1593,1.1201,1.1593],
['2019-03-01',1.2137,1.2223,1.1798,1.2223],
['2019-03-08',1.2476,1.2702,1.2476,1.2946],
['2019-03-15',1.3083,1.2703,1.2702,1.3403],
['2019-03-22',1.2924,1.3007,1.2924,1.3108],
['2019-03-29',1.3004,1.3454,1.2913,1.3454],
['2019-04-04',1.3793,1.3807,1.3782,1.3807],
['2019-04-12',1.3504,1.3254,1.3254,1.3597],
['2019-04-19',1.3138,1.3442,1.3138,1.3442],
['2019-04-26',1.3400,1.3234,1.3234,1.3499],
['2019-04-30',1.3031,1.3077,1.3031,1.3077],
['2019-05-10',1.2476,1.3051,1.2476,1.3051],
['2019-05-17',1.2988,1.3071,1.2937,1.3160],
['2019-05-24',1.3090,1.3074,1.3074,1.3274],
['2019-05-31',1.3289,1.3301,1.3289,1.3450],
['2019-06-06',1.3309,1.2871,1.2871,1.3309],
['2019-06-14',1.2965,1.3051,1.2965,1.3301],
['2019-06-21',1.2984,1.3553,1.2984,1.3553],
['2019-06-30',1.3524,1.3597,1.3428,1.3704],
['2019-07-05',1.4026,1.3892,1.3787,1.4081],
['2019-07-12',1.3552,1.3835,1.3552,1.3861],
['2019-07-19',1.4140,1.3907,1.3895,1.4140],
['2019-07-26',1.3735,1.4512,1.3735,1.4574],
['2019-08-02',1.4644,1.4569,1.4569,1.4746],
['2019-08-09',1.4434,1.4163,1.3997,1.4434],
['2019-08-16',1.4673,1.5203,1.4632,1.5203],
['2019-08-23',1.5819,1.5667,1.5665,1.5864],
['2019-08-30',1.5639,1.6539,1.5639,1.6539],
['2019-09-06',1.7254,1.7993,1.7254,1.7993],
['2019-09-12',1.8718,1.8158,1.8158,1.8718],
['2019-09-20',1.8268,1.8593,1.7878,1.8593],
['2019-09-27',1.9044,1.7703,1.7601,1.9116],
['2019-09-30',1.7399,1.7399,1.7399,1.7399],
['2019-10-11',1.7120,1.7731,1.7120,1.7918],
['2019-10-18',1.8277,1.7345,1.7345,1.8277],
['2019-10-25',1.7271,1.7879,1.7271,1.7879],
['2019-11-01',1.8626,1.8759,1.8315,1.8759],
['2019-11-08',1.8876,1.8911,1.8876,1.9322],
['2019-11-15',1.8595,1.9708,1.8595,1.9786],
['2019-11-22',1.9662,1.9292,1.9292,2.0160],
['2019-11-29',1.8758,1.9334,1.8758,1.9462],
['2019-12-06',1.9657,2.0833,1.9657,2.0833],
['2019-12-13',2.1021,2.1756,2.1021,2.1756],
['2019-12-20',2.2221,2.1742,2.1742,2.2334],
['2019-12-27',2.1436,2.1711,2.1436,2.2256],
['2020-01-03',2.1752,2.2030,2.1752,2.2168],
['2020-01-10',2.2107,2.2799,2.1871,2.2799],
['2020-01-17',2.3195,2.3749,2.2982,2.3749],
['2020-01-23',2.4625,2.4445,2.4400,2.4958],
['2020-02-07',2.2939,2.5209,2.2939,2.5209],
['2020-02-14',2.5221,2.6219,2.5221,2.6219],
['2020-02-21',2.6931,2.8538,2.6931,2.8538],
['2020-02-28',2.9539,2.7286,2.7286,3.0328],
['2020-03-06',2.6654,2.6402,2.6402,2.6867],
['2020-03-13',2.5154,2.5190,2.5093,2.6234],
['2020-03-20',2.3522,2.3632,2.3141,2.3663],
['2020-03-27',2.2409,2.3096,2.2409,2.3475],
['2020-04-03',2.2665,2.3426,2.2641,2.3654],
['2020-04-10',2.4139,2.3371,2.3371,2.4204],
['2020-04-17',2.3039,2.4091,2.3039,2.4091]]);
//切割数组，把数组中的日期和数据分离，返回数组中的日期和数据
function splitData(rawData) {
var dates = [];
var values = [];
for (var i = 0; i < rawData.length; i++) {
//splice 返回每组数组中被删除的第一项，即返回数组中被删除的日期
//alert(rawData[i].splice(0, 1)[0]);
//dates 日期 把返回的日期放到dates[]数组中
dates.push(rawData[i].splice(0, 1)[0]);
//alert(dates);
//数据数组，即数组中除日期外的数据
values.push(rawData[i])
}
return {
dates: dates, //数组中的日期 x轴对应的日期
values: values //数组中的数据 y轴对应的数据
};
}
//计算MA平均线，N日移动平均线=N日收盘价之和/N dayCount要计算的天数(5,10,20,30)
function calculateMA(dayCount) {
var result = [];
for (var i = 0, len = data.values.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
//alert(result);
continue; //结束单次循环，即不输出本次结果
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
//收盘价总和
sum += data.values[i - j][1];
//alert(sum);
}
result.push(parseFloat(sum/dayCount).toFixed(4));
// alert(result);
}
return result;
}
option = {
title: { //标题
text: "005911 \u5468K\u7ebf\u56fe",
left: 0
},
tooltip: { //提示框
trigger: 'axis', //触发类型：坐标轴触发
axisPointer: { //坐标轴指示器配置项
type: 'cross' //指示器类型，十字准星
}
},
legend: { //图例控件，点击图例控制哪些系列不现实
data: ['week', 'MA5', 'MA10', 'MA20', 'MA30']
},
grid: { //直角坐标系
show:true,
left: '10%', //grid组件离容器左侧的距离
right: '10%',
bottom: '15%',
//backgroundColor:'#ccc'
},
xAxis: {
type: 'category', //坐标轴类型，类目轴
data: data.dates,
//scale: true, //只在数字轴中有效
boundaryGap : false, //刻度作为分割线，标签和数据点会在两个刻度上
axisLine: {onZero: false},
splitLine: {show: false}, //是否显示坐标轴轴线
//splitNumber: 20, //坐标轴的分割段数，预估值，在类目轴中无效
min: 'dataMin', //特殊值，数轴上的最小值作为最小刻度
max: 'dataMax' //特殊值，数轴上的最大值作为最大刻度
},
yAxis: {
scale: true, //坐标刻度不强制包含零刻度
splitArea: {
show: true //显示分割区域
}
},
dataZoom: [ //用于区域缩放
{
filterMode:'filter', //当前数据窗口外的数据被过滤掉来达到数据窗口缩放的效果 默认值filter
type: 'inside', //内置型数据区域缩放组件
start: 50, //数据窗口范围的起始百分比
end: 100 //数据窗口范围的结束百分比
},
{
show: true,
type: 'slider', //滑动条型数据区域缩放组件
y: '90%',
start: 50,
end: 100
}
],
series: [ //图表类型
{
name: 'Week',
type: 'candlestick', //K线图
data: data.values, //y轴对应的数据
图标标注/
markPoint: { //图表标注
label: { //标注的文本
normal: { //默认不显示标注
show:true,
//position:['20%','30%'],
formatter: function (param) { //标签内容控制器
return param != null ? Math.round(param.value) : '';
}
}
},
data: [ //标注的数据数组
{
name: 'highest value',
type: 'max', //最大值
valueDim: 'highest' //在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默认，emphasis高亮
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'
}
]
}
},
{ //MA5 5天内的收盘价之和/5
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}
}
},
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
