Echarts-K線圖的使用
阿新 • • 發佈：2018-08-17
jquery 圖例 500px wid 方法 鍵值對 back start length
工作：
使用Hbuilder建web工程，加入echarts相關庫，根據需要更改K線圖及其的提示樣式，去除默認提示，使用異步加載echarts的數據，數據格式為json。
需要註意的K線圖和5日均線，10日均線的意義，5日均值是根據前4天加上當天的值再除以5來計算的，10日的類似，則可以理解以下算均線的函數：
function calculateMA(dayCount) { var result = []; for(var i = 0, len = data.data.length; i < len; i++) { if(i < dayCount) { result.push(‘-‘); continue; } var sum= 0; for(var j = 0; j < dayCount; j++) { sum += data.data[i - j][1]; } result.push(sum / dayCount); } return result; }
在官網下載echarts.min.js，同時在網上找jquery的js下載下來。用Hbuilder新建web項目，將js文件放入工程相應的文件夾中。
在index.html中引入兩個js文件，就可以使用了。
去echarts官網找典型的K線圖例子，放入自己的html頁面中，Hbulider右側則會顯示出echarts圖
異步加載數據需要使用jquery找到json文件，從中取出數據，然後用Mychart.setOption()方法異步加載數據，類似於這樣
myChart.setOption({ title: { text: data.title, left: 0 }, xAxis: { data: data.date }, series: [{// 根據名字對應到相應的系列 data: data.data }, { data: calculateMA(5) }, { data: calculateMA(15) }, { data: calculateMA(30) } ] }); });
註意數據對應的圖表。
k線圖默認的是股票的tooltip提示，默認提示固定有open，close，highest，lowest等字段，而且有默認的提示樣式
如果需要改提示字段，則需要自己設置tooltip中的formatter參數，設置觸發器為axis，提示中帶有顏色的小圓點是是params的marker，其他的可以根據需要設計。
tooltip: { trigger: ‘axis‘, formatter: function(params, ticket, callback) { var result = "時間："+params[0].name + "<br/>"; params.forEach(function(item) { if(item.seriesName=="日K") { result += item.marker + " " + item.seriesName + " ("+item.value.toString().split(",")[1]+"，"+ +item.value.toString().split(",")[2] + ")</br>"; } else { result += item.marker + " " + item.seriesName + " : " + item.value.toString().substring(0, 7) + "</br>"; } }); return result; },
更改字段後顯示可以如下，將默認的highest，lowest，open，close去除了
html代碼為：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>K線圖</title> <script src="js/echarts.min.js"></script> <script src="js/jquery.js"></script> <script src="js/infographic.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width:800px;height:500px;"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById(‘main‘), ‘infographic‘); // 數據意義：前一天，後一天，前一天，後一天 option = { title: { text: ‘‘, left: 0 }, tooltip: { trigger: ‘axis‘, formatter: function(params, ticket, callback) { var result = "時間："+params[0].name + "<br/>"; params.forEach(function(item) { if(item.seriesName=="日K") { result += item.marker + " " + item.seriesName + " ("+item.value.toString().split(",")[1]+"，"+ +item.value.toString().split(",")[2] + ")</br>"; } else { result += item.marker + " " + item.seriesName + " : " + item.value.toString().substring(0, 7) + "</br>"; } }); return result; }, // // // 坐標軸指示器配置項 // axisPointer: { // type: ‘cross‘, // label: { // show: true, // color: ‘yellow‘, // // }, // crossStyle: { //// type: ‘solid‘ // } // // } }, legend: { data: [‘日K‘, ‘5日均線‘, ‘15日均線‘, ‘30日均線‘] }, 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: ‘slider‘, y: ‘90%‘, start: 50, end: 100 } ], series: [{ name: ‘日K‘, type: ‘candlestick‘, data: [], markPoint: { label: { }, data: [], tooltip: { } }, markLine: { symbol: [‘none‘, ‘none‘], data: [ { name: ‘min line on close‘, type: ‘min‘, valueDim: ‘close‘ }, { name: ‘max line on close‘, type: ‘max‘, valueDim: ‘close‘ } ] } }, { name: ‘5日均線‘, type: ‘line‘, data: [], color: ‘lightblue‘, smooth: true, lineStyle: { normal: { opacity: 0.5 } } }, { name: ‘15日均線‘, type: ‘line‘, data: [], smooth: true, lineStyle: { normal: { opacity: 0.5 } } }, { name: ‘30日均線‘, type: ‘line‘, data: [], smooth: true, lineStyle: { normal: { opacity: 0.5 } } }, ] }; myChart.setOption(option); $.get(‘data.json‘).done(function(data) { // 填入數據 // var info = splitData(data.raw); function calculateMA(dayCount) { var result = []; for(var i = 0, len = data.data.length; i < len; i++) { if(i < dayCount) { result.push(‘-‘); continue; } var sum = 0; for(var j = 0; j < dayCount; j++) { sum += data.data[i - j][1]; } result.push(sum / dayCount); } return result; } myChart.setOption({ title: { text: data.title, left: 0 }, xAxis: { data: data.date }, series: [{ // 根據名字對應到相應的系列 data: data.data }, { data: calculateMA(5) }, { data: calculateMA(15) }, { data: calculateMA(30) } ] }); }); </script> </body> </html>
json格式的測試數據如下，其中有三個鍵值對：
title標題
date日期
data數據
{
"title": "X市區",
"date": [
"2013/1/24",
"2013/1/25",
"2013/1/28",
"2013/1/29",
"2013/1/30",
"2013/1/31",
"2013/2/1",
"2013/2/4",
"2013/2/5",
"2013/2/6",
"2013/2/7",
"2013/2/8",
"2013/2/18",
"2013/2/19",
"2013/2/20",
"2013/2/21",
"2013/2/22",
"2013/2/25",
"2013/2/26",
"2013/2/27",
"2013/2/28",
"2013/3/1",
"2013/3/4",
"2013/3/5",
"2013/3/6",
"2013/3/7",
"2013/3/8",
"2013/3/11",
"2013/3/12",
"2013/3/13",
"2013/3/14",
"2013/3/15",
"2013/3/18",
"2013/3/19",
"2013/3/20",
"2013/3/21",
"2013/3/22",
"2013/3/25",
"2013/3/26",
"2013/3/27",
"2013/3/28",
"2013/3/29",
"2013/4/1",
"2013/4/2",
"2013/4/3",
"2013/4/8",
"2013/4/9",
"2013/4/10",
"2013/4/11",
"2013/4/12",
"2013/4/15",
"2013/4/16",
"2013/4/17",
"2013/4/18",
"2013/4/19",
"2013/4/22",
"2013/4/23",
"2013/4/24",
"2013/4/25",
"2013/4/26",
"2013/5/2",
"2013/5/3",
"2013/5/6",
"2013/5/7",
"2013/5/8",
"2013/5/9",
"2013/5/10",
"2013/5/13",
"2013/5/14",
"2013/5/15",
"2013/5/16",
"2013/5/17",
"2013/5/20",
"2013/5/21",
"2013/5/22",
"2013/5/23",
"2013/5/24",
"2013/5/27",
"2013/5/28",
"2013/5/29",
"2013/5/30",
"2013/5/31",
"2013/6/3",
"2013/6/4",
"2013/6/5",
"2013/6/6",
"2013/6/7",
"2013/6/13"
],
"data": [[
2320.26,
2302.6,
2287.3,
2362.94
],
[
2300,
2291.3,
2288.26,
2308.38
],
[
2295.35,
2346.5,
2295.35,
2346.92
],
[
2347.22,
2358.98,
2337.35,
2363.8
],
[
2360.75,
2382.48,
2347.89,
2383.76
],
[
2383.43,
2385.42,
2371.23,
2391.82
],
[
2377.41,
2419.02,
2369.57,
2421.15
],
[
2425.92,
2428.15,
2417.58,
2440.38
],
[
2411,
2433.13,
2403.3,
2437.42
],
[
2432.68,
2434.48,
2427.7,
2441.73
],
[
2430.69,
2418.53,
2394.22,
2433.89
],
[
2416.62,
2432.4,
2414.4,
2443.03
],
[
2441.91,
2421.56,
2415.43,
2444.8
],
[
2420.26,
2382.91,
2373.53,
2427.07
],
[
2383.49,
2397.18,
2370.61,
2397.94
],
[
2378.82,
2325.95,
2309.17,
2378.82
],
[
2322.94,
2314.16,
2308.76,
2330.88
],
[
2320.62,
2325.82,
2315.01,
2338.78
],
[
2313.74,
2293.34,
2289.89,
2340.71
],
[
2297.77,
2313.22,
2292.03,
2324.63
],
[
2322.32,
2365.59,
2308.92,
2366.16
],
[
2364.54,
2359.51,
2330.86,
2369.65
],
[
2332.08,
2273.4,
2259.25,
2333.54
],
[
2274.81,
2326.31,
2270.1,
2328.14
],
[
2333.61,
2347.18,
2321.6,
2351.44
],
[
2340.44,
2324.29,
2304.27,
2352.02
],
[
2326.42,
2318.61,
2314.59,
2333.67
],
[
2314.68,
2310.59,
2296.58,
2320.96
],
[
2309.16,
2286.6,
2264.83,
2333.29
],
[
2282.17,
2263.97,
2253.25,
2286.33
],
[
2255.77,
2270.28,
2253.31,
2276.22
],
[
2269.31,
2278.4,
2250,
2312.08
],
[
2267.29,
2240.02,
2239.21,
2276.05
],
[
2244.26,
2257.43,
2232.02,
2261.31
],
[
2257.74,
2317.37,
2257.42,
2317.86
],
[
2318.21,
2324.24,
2311.6,
2330.81
],
[
2321.4,
2328.28,
2314.97,
2332
],
[
2334.74,
2326.72,
2319.91,
2344.89
],
[
2318.58,
2297.67,
2281.12,
2319.99
],
[
2299.38,
2301.26,
2289,
2323.48
],
[
2273.55,
2236.3,
2232.91,
2273.55
],
[
2238.49,
2236.62,
2228.81,
2246.87
],
[
2229.46,
2234.4,
2227.31,
2243.95
],
[
2234.9,
2227.74,
2220.44,
2253.42
],
[
2232.69,
2225.29,
2217.25,
2241.34
],
[
2196.24,
2211.59,
2180.67,
2212.59
],
[
2215.47,
2225.77,
2215.47,
2234.73
],
[
2224.93,
2226.13,
2212.56,
2233.04
],
[
2236.98,
2219.55,
2217.26,
2242.48
],
[
2218.09,
2206.78,
2204.44,
2226.26
],
[
2199.91,
2181.94,
2177.39,
2204.99
],
[
2169.63,
2194.85,
2165.78,
2196.43
],
[
2195.03,
2193.8,
2178.47,
2197.51
],
[
2181.82,
2197.6,
2175.44,
2206.03
],
[
2201.12,
2244.64,
2200.58,
2250.11
],
[
2236.4,
2242.17,
2232.26,
2245.12
],
[
2242.62,
2184.54,
2182.81,
2242.62
],
[
2187.35,
2218.32,
2184.11,
2226.12
],
[
2213.19,
2199.31,
2191.85,
2224.63
],
[
2203.89,
2177.91,
2173.86,
2210.58
],
[
2170.78,
2174.12,
2161.14,
2179.65
],
[
2179.05,
2205.5,
2179.05,
2222.81
],
[
2212.5,
2231.17,
2212.5,
2236.07
],
[
2227.86,
2235.57,
2219.44,
2240.26
],
[
2242.39,
2246.3,
2235.42,
2255.21
],
[
2246.96,
2232.97,
2221.38,
2247.86
],
[
2228.82,
2246.83,
2225.81,
2247.67
],
[
2247.68,
2241.92,
2231.36,
2250.85
],
[
2238.9,
2217.01,
2205.87,
2239.93
],
[
2217.09,
2224.8,
2213.58,
2225.19
],
[
2221.34,
2251.81,
2210.77,
2252.87
],
[
2249.81,
2282.87,
2248.41,
2288.09
],
[
2286.33,
2299.99,
2281.9,
2309.39
],
[
2297.11,
2305.11,
2290.12,
2305.3
],
[
2303.75,
2302.4,
2292.43,
2314.18
],
[
2293.81,
2275.67,
2274.1,
2304.95
],
[
2281.45,
2288.53,
2270.25,
2292.59
],
[
2286.66,
2293.08,
2283.94,
2301.7
],
[
2293.4,
2321.32,
2281.47,
2322.1
],
[
2323.54,
2324.02,
2321.17,
2334.33
],
[
2316.25,
2317.75,
2310.49,
2325.72
],
[
2320.74,
2300.59,
2299.37,
2325.53
],
[
2300.21,
2299.25,
2294.11,
2313.43
],
[
2297.1,
2272.42,
2264.76,
2297.1
],
[
2270.71,
2270.93,
2260.87,
2276.86
],
[
2264.43,
2242.11,
2240.07,
2266.69
],
[
2242.26,
2210.9,
2205.07,
2250.63
],
[
2190.1,
2148.35,
2126.22,
2190.1
]
]
}
Echarts-K線圖的使用