javascript：echarts 画基金周K线图

以广发双擎升级混合基金 (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',    //当前数据窗口外的数据被过滤掉来达到数据窗口缩放的效果  默认值filtertype: '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天内的收盘价之和/5name: '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>

javascript：echarts 画基金周K线图相关推荐

基于echarts定制修改的k线图工具
基于echarts定制修改的k线图工具注:百度echarts拷贝下来的k线图框架,根据需求自己修改制作的k线图工具前端代码: <!DOCTYPE html> <html lang ...
如何使用Echarts设计专业的K线图
如何使用Echarts设计专业的K线图先上图: Echarts所需的K线的数据结构有:时间(date),开盘(open),收盘(close),最低(lowest),最高(highest),成交量(v ...
python能画k线图吗_k线图怎么画?_Python绘制K线图
本文介绍关于Python绘制K线图与股票中怎样才能画出有效的趋势线.压力和支撑位?与手工绘制股票K线图有什么技巧,要先从哪学起?与外汇怎样绘制蜡烛图?与k线图怎么变宽了,怎么复原?与怎样判断K线点位高 ...
python能画k线图吗_python画k线图(一天的k线图怎么画)
1.大智慧软件在日线窗口的左上角标有主图的公式名称,(如ma sar bbi )等, 如果不是ma指标,请输入ma,回车.2.如果输入ma后还是没有均线,请按 f7 键,弹出最好能举个例子的.非常感 ...
pyecharts 画K线图
中文版帮助文档 http://pyecharts.org/#/zh-cn/ Kline/Candlestick(K线图), 这里以画基金净值月K线图为例: 数据文件 M660008.csv ym,op ...
如何用Python的pyecharts库绘制K线图
01 K线图一.概念股市及期货市场中的K线图的画法包含四个数据,即开盘价.最高价.最低价.收盘价,所有的K线都是围绕这四个数据展开,反映大势的状况和价格信息.如果把每日的K线图放在一张纸上,就能得 ...
Python之数据分析（Numpy中读取与保存数据文件、将数据文件制成K线图）
文章目录一.读取与保存文件二.将数据文件制成K线图一.读取与保存文件 1.读取文件格式 numpy.loadtxt(文件名,delimiter = 分割符,usecols = 选择列,unpac ...
《Python数据可视化之Matplotlib与Pyecharts》之K线图
10.5.1 K线图及其参数配置 K线图又称蜡烛图,股市及期货市场中的K线图的画法包含四个数据,即开盘价.最高价.最低价.收盘价,所有的k线都是围绕这四个指标展开,反映股票的状况.如果把每日的K线图 ...
dax和m的区别_动态股票K线图----从M语言到DAX表达式
偶然见别人画的股票K线图,不禁见猎心喜,也来模仿一番.原图是不能动的,一动MACD移动平滑趋势线就没有了.这是微软excel的一个缺陷. 所以我想了一个办法弥补这个缺陷.由于手头没有数据,开始实施网抓 ...

javascript：echarts 画基金周K线图

javascript：echarts 画基金周K线图相关推荐

最新文章

热门文章