Головна сторінка Огляд Довідка
Реєстрація Увійти
xmnk
/
wkshi
2
0
Відгалуження 0
Файли Проблеми 0 Запити на злиття 0 Wiki
Гілка: master
Гілки Теги
wkshi
/
public
/
vendor
/
echarts
/
test
/
touch-candlestick.html

touch-candlestick.html 18 KB
Постійне посилання Історія Запис

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345 
  1. <!DOCTYPE>
    2. 

  2. <html>
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <script src="lib/esl.js"></script>
    6. 

  6.         <script src="lib/config.js"></script>
    7. 

  7.         <script src="lib/jquery.min.js"></script>
    8. 

  8.         <script src="lib/facePrint.js"></script>
    9. 

  9.         <meta name="viewport" content="width=device-width, initial-scale=1" />
    10. 

  10.         <link rel="stylesheet" href="lib/reset.css">
    11. 

  11.     </head>
    12. 

  12.     <body>
    13. 

  13.         <style>
    14. 

  14.             body {
    15. 

  15.                 padding: 0;
    16. 

  16.                 margin: 0;
    17. 

  17.                 width: 100%;
    18. 

  18.             }
    19. 

  19.             #main {
    20. 

  20.                 overflow: hidden;
    21. 

  21.                 height: 360px;
    22. 

  22.             }
    23. 

  23.         </style>
    24. 

  24.         <h3>Test Tooltip Performance on Mobile</h3>
    25. 

  25.         <div id="main"></div>
    26. 

  26.         <script>
    27. 

  27. 

  28.             var echarts;
    29. 

  29.             var colorTool;
    30. 

  30.             var chart;
    31. 

  31.             var myChart;
    32. 

  32.             var groupCategories = [];
    33. 

  33.             var groupColors = [];
    34. 

  34. 

  35.             require([
    36. 

  36.                 'echarts'
    37. 

  37.                 // 'zrender/tool/color',
    38. 

  38.                 // 'echarts/chart/line',
    39. 

  39.                 // 'echarts/chart/bar',
    40. 

  40.                 // 'echarts/chart/candlestick',
    41. 

  41.                 // 'echarts/component/grid',
    42. 

  42.                 // 'echarts/component/graphic',
    43. 

  43.                 // 'echarts/component/legend',
    44. 

  44.                 // 'echarts/component/tooltip',
    45. 

  45.                 // 'echarts/component/toolbox',
    46. 

  46.                 // 'echarts/component/dataZoom'
    47. 

  47.             ], function (ec) {
    48. 

  48.                 echarts = ec;
    49. 

  49.                 colorTool = echarts.color;
    50. 

  50.                 chart = myChart = echarts.init(document.getElementById('main'));
    51. 

  51. 

  52. 

  53. 

  54. 

  55. 

  56. 

  57. 

  58. 

  59. 

  60. var rawData = [["2015/1/5","3258.63","3350.52","115.84","3.58%","3253.88","3369.28","531352384","54976008","-"],["2015/1/6","3330.8","3351.45","0.93","0.03%","3303.18","3394.22","501661696","53239848","-"],["2015/1/7","3326.65","3373.95","22.51","0.67%","3312.21","3374.9","391918880","43641672","-"],["2015/1/8","3371.96","3293.46","-80.5","-2.39%","3285.09","3381.57","371131200","39923032","-"],["2015/1/9","3276.97","3285.41","-8.04","-0.24%","3267.51","3404.83","410240864","45864804","-"],["2015/1/12","3258.21","3229.32","-56.1","-1.71%","3191.58","3275.19","322064672","36627308","-"],["2015/1/13","3223.54","3235.3","5.98","0.19%","3214.41","3259.39","230725760","27358878","-"],["2015/1/14","3242.34","3222.44","-12.86","-0.40%","3193.98","3268.48","240190752","26720452","-"],["2015/1/15","3224.07","3336.46","114.02","3.54%","3207.54","3337.08","282546240","33061054","-"],["2015/1/16","3343.6","3376.5","40.04","1.20%","3340.49","3400.32","339876768","39225388","-"],["2015/1/19","3189.73","3116.35","-260.14","-7.70%","3095.07","3262.21","401098784","40988600","-"],["2015/1/20","3114.56","3173.05","56.7","1.82%","3100.48","3190.25","357080800","41629524","-"],["2015/1/21","3189.08","3323.61","150.56","4.74%","3178.34","3337","410956032","47375868","-"],["2015/1/22","3327.32","3343.34","19.73","0.59%","3293.98","3352.38","353382976","40787408","-"],["2015/1/23","3357.1","3351.76","8.42","0.25%","3328.29","3406.79","366249248","42097952","-"],["2015/1/26","3347.26","3383.18","31.42","0.94%","3321.31","3384.8","317540992","35842744","-"],["2015/1/27","3389.85","3352.96","-30.22","-0.89%","3290.22","3390.22","374517568","41829884","-"],["2015/1/28","3325.72","3305.74","-47.22","-1.41%","3294.66","3354.8","301927104","34156428","-"],["2015/1/29","3259","3262.3","-43.43","-1.31%","3234.24","3286.79","274658624","29642450","-"],["2015/1/30","3273.75","3210.36","-51.94","-1.59%","3210.31","3288.5","258312544","28426564","-"],["2015/2/2","3148.14","3128.3","-82.06","-2.56%","3122.57","3175.13","250861632","26684996","-"],["2015/2/3","3156.09","3204.91","76.61","2.45%","3129.73","3207.94","248192160","28335594","-"],["2015/2/4","3212.82","3174.13","-30.78","-0.96%","3171.14","3238.98","249098080","29015516","-"],["2015/2/5","3251.21","3136.53","-37.6","-1.18%","3135.82","3251.21","306139296","34826696","-"],["2015/2/6","3120.09","3075.91","-60.62","-1.93%","3052.94","3129.54","246749680","26650278","-"],["2015/2/9","3063.51","3095.12","19.22","0.62%","3049.11","3119.03","206108384","24071968","-"],["2015/2/10","3090.49","3141.59","46.47","1.50%","3084.25","3142.1","193817136","22508492","-"],["2015/2/11","3145.76","3157.7","16.11","0.51%","3139.05","3166.42","172840096","21086256","-"],["2015/2/12","3157.96","3173.42","15.71","0.50%","3134.24","3181.77","194592320","22969158","-"],["2015/2/13","3186.81","3203.83","30.41","0.96%","3182.79","3237.16","261290432","29301768","-"],["2015/2/16","3206.14","3222.36","18.54","0.58%","3195.88","3228.85","223797440","26595070","-"],["2015/2/17","3230.88","3246.91","24.54","0.76%","3230.77","3255.73","228332624","26334004","-"],["2015/2/25","3256.48","3228.84","-18.06","-0.56%","3215.55","3257.22","233348096","26514336","-"],["2015/2/26","3222.15","3298.36","69.52","2.15%","3202.19","3300.62","301263872","33434746","-"],["2015/2/27","3296.83","3310.3","11.94","0.36%","3291.01","3324.55","299163712","33501958","-"],["2015/3/2","3332.72","3336.28","25.98","0.78%","3298.67","3336.76","346445664","41025956","-"],["2015/3/3","3317.7","3263.05","-73.23","-2.20%","3260.43","3317.7","382044608","44159348","-"],["2015/3/4","3264.18","3279.53","16.48","0.51%","3250.48","3286.59","293639520","34678976","-"],["2015/3/5","3264.08","3248.48","-31.06","-0.95%","3221.67","3266.64","320663584","37358000","-"],["2015/3/6","3248.04","3241.19","-7.29","-0.22%","3234.53","3266.93","282915808","32834414","-"],["2015/3/9","3224.31","3302.41","61.22","1.89%","3198.37","3307.7","321495456","35992752","-"],["2015/3/10","3289.08","3286.07","-16.34","-0.49%","3277.09","3309.92","285817568","32995596","-"],["2015/3/11","3289.59","3290.9","4.83","0.15%","3278.47","3325.05","282985536","32757308","-"],["2015/3/12","3314.81","3349.32","58.42","1.78%","3300.49","3360.05","357295104","40719240","-"],["2015/3/13","3359.49","3372.91","23.59","0.70%","3352.15","3391.25","328410144","37404140","-"],["2015/3/16","3391.16","3449.3","76.39","2.26%","3377.09","3449.3","399132416","47935532","-"],["2015/3/17","3469.6","3502.85","53.54","1.55%","3459.69","3504.12","520939520","60150068","-"],["2015/3/18","3510.5","3577.3","74.45","2.13%","3503.85","3577.66","545217152","61736700","-"],["2015/3/19","3576.02","3582.27","4.97","0.14%","3546.84","3600.68","537346624","61224968","-"],["2015/3/20","3587.08","3617.32","35.05","0.98%","3569.38","3632.34","516661664","65177196","-"],["2015/3/23","3640.1","3687.73","70.41","1.95%","3635.49","3688.25","536062816","66157464","-"],["2015/3/24","3692.57","3691.41","3.68","0.10%","3600.7","3715.87","639554688","75488472","-"],["2015/3/25","3680.95","3660.73","-30.68","-0.83%","3634.56","3693.15","521886336","64549892","-"],["2015/3/26","3641.94","3682.09","21.37","0.58%","3615.01","3707.32","488647200","61951560","-"],["2015/3/27","3686.13","3691.1","9","0.24%","3656.83","3710.48","408945184","50929848","-"],["2015/3/30","3710.61","3786.57","95.47","2.59%","3710.61","3795.94","564702400","69212536","-"],["2015/3/31","3822.99","3747.9","-38.67","-1.02%","3737.04","3835.57","561676032","72129488","-"],["2015/4/1","3748.34","3810.29","62.4","1.66%","3742.21","3817.08","447458304","59241832","-"],["2015/4/2","3827.69","3825.78","15.49","0.41%","3775.89","3835.45","479299680","63202892","-"],["2015/4/3","3803.38","3863.93","38.14","1.00%","3792.21","3864.41","473033312","63565136","-"]];
    61. 

  61. var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
    62. 

  62. var labelFont = 'bold 12px Sans-serif';
    63. 

  63. 

  64. function calculateMA(dayCount, data) {
    65. 

  65.     var result = [];
    66. 

  66.     for (var i = 0, len = data.length; i < len; i++) {
    67. 

  67.         if (i < dayCount) {
    68. 

  68.             result.push('-');
    69. 

  69.             continue;
    70. 

  70.         }
    71. 

  71.         var sum = 0;
    72. 

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

  73.             sum += data[i - j][1];
    74. 

  74.         }
    75. 

  75.         result.push((sum / dayCount).toFixed(2));
    76. 

  76.     }
    77. 

  77.     return result;
    78. 

  78. }
    79. 

  79. 

  80. 

  81. var dates = ["2016-03-29", "2016-03-30", "2016-03-31", "2016-04-01", "2016-04-04", "2016-04-05", "2016-04-06", "2016-04-07", "2016-04-08", "2016-04-11", "2016-04-12", "2016-04-13", "2016-04-14", "2016-04-15", "2016-04-18", "2016-04-19", "2016-04-20", "2016-04-21", "2016-04-22", "2016-04-25", "2016-04-26", "2016-04-27", "2016-04-28", "2016-04-29", "2016-05-02", "2016-05-03", "2016-05-04", "2016-05-05", "2016-05-06", "2016-05-09", "2016-05-10", "2016-05-11", "2016-05-12", "2016-05-13", "2016-05-16", "2016-05-17", "2016-05-18", "2016-05-19", "2016-05-20", "2016-05-23", "2016-05-24", "2016-05-25", "2016-05-26", "2016-05-27", "2016-05-31", "2016-06-01", "2016-06-02", "2016-06-03", "2016-06-06", "2016-06-07", "2016-06-08", "2016-06-09", "2016-06-10", "2016-06-13", "2016-06-14", "2016-06-15", "2016-06-16", "2016-06-17", "2016-06-20", "2016-06-21", "2016-06-22"];
    82. 

  82. var data = [[17512.58,17633.11,17434.27,17642.81,86160000],[17652.36,17716.66,17652.36,17790.11,79330000],[17716.05,17685.09,17669.72,17755.7,102600000],[17661.74,17792.75,17568.02,17811.48,104890000],[17799.39,17737,17710.67,17806.38,85230000],[17718.03,17603.32,17579.56,17718.03,115230000],[17605.45,17716.05,17542.54,17723.55,99410000],[17687.28,17541.96,17484.23,17687.28,90120000],[17555.39,17576.96,17528.16,17694.51,79990000],[17586.48,17556.41,17555.9,17731.63,107100000],[17571.34,17721.25,17553.57,17744.43,81020000],[17741.66,17908.28,17741.66,17918.35,91710000],[17912.25,17926.43,17885.44,17962.14,84510000],[17925.95,17897.46,17867.41,17937.65,118160000],[17890.2,18004.16,17848.22,18009.53,89390000],[18012.1,18053.6,17984.43,18103.46,89820000],[18059.49,18096.27,18031.21,18167.63,100210000],[18092.84,17982.52,17963.89,18107.29,102720000],[17985.05,18003.75,17909.89,18026.85,134120000],[17990.94,17977.24,17855.55,17990.94,83770000],[17987.38,17990.32,17934.17,18043.77,92570000],[17996.14,18041.55,17920.26,18084.66,109090000],[18023.88,17830.76,17796.55,18035.73,100920000],[17813.09,17773.64,17651.98,17814.83,136670000],[17783.78,17891.16,17773.71,17912.35,80100000],[17870.75,17750.91,17670.88,17870.75,97060000],[17735.02,17651.26,17609.01,17738.06,95020000],[17664.48,17660.71,17615.82,17736.11,81530000],[17650.3,17740.63,17580.38,17744.54,80020000],[17743.85,17705.91,17668.38,17783.16,85590000],[17726.66,17928.35,17726.66,17934.61,75790000],[17919.03,17711.12,17711.05,17919.03,87390000],[17711.12,17720.5,17625.38,17798.19,88560000],[17711.12,17535.32,17512.48,17734.74,86640000],[17531.76,17710.71,17531.76,17755.8,88440000],[17701.46,17529.98,17469.92,17701.46,103260000],[17501.28,17526.62,17418.21,17636.22,79120000],[17514.16,17435.4,17331.07,17514.16,95530000],[17437.32,17500.94,17437.32,17571.75,111990000],[17507.04,17492.93,17480.05,17550.7,87790000],[17525.19,17706.05,17525.19,17742.59,86480000],[17735.09,17851.51,17735.09,17891.71,79180000],[17859.52,17828.29,17803.82,17888.66,68940000],[17826.85,17873.22,17824.73,17873.22,73190000],[17891.5,17787.2,17724.03,17899.24,147390000],[17754.55,17789.67,17664.79,17809.18,78530000],[17789.05,17838.56,17703.55,17838.56,75560000],[17799.8,17807.06,17689.68,17833.17,82270000],[17825.69,17920.33,17822.81,17949.68,71870000],[17936.22,17938.28,17936.22,18003.23,78750000],[17931.91,18005.05,17931.91,18016,71260000],[17969.98,17985.19,17915.88,18005.22,69690000],[17938.82,17865.34,17812.34,17938.82,90540000],[17830.5,17732.48,17731.35,17893.28,101690000],[17710.77,17674.82,17595.79,17733.92,93740000],[17703.65,17640.17,17629.01,17762.96,94130000],[17602.23,17733.1,17471.29,17754.91,91950000],[17733.44,17675.16,17602.78,17733.44,248680000],[17736.87,17804.87,17736.87,17946.36,99380000],[17827.33,17829.73,17799.8,17877.84,85130000],[17832.67,17780.83,17770.36,17920.16,89440000]];
    83. 

  83. var volumns = [86160000,79330000,102600000,104890000,85230000,115230000,99410000,90120000,79990000,107100000,81020000,91710000,84510000,118160000,89390000,89820000,100210000,102720000,134120000,83770000,92570000,109090000,100920000,136670000,80100000,97060000,95020000,81530000,80020000,85590000,75790000,87390000,88560000,86640000,88440000,103260000,79120000,95530000,111990000,87790000,86480000,79180000,68940000,73190000,147390000,78530000,75560000,82270000,71870000,78750000,71260000,69690000,90540000,101690000,93740000,94130000,91950000,248680000,99380000,85130000,89440000];
    84. 

  84. 

  85. var dataMA5 = calculateMA(5, data);
    86. 

  86. var dataMA10 = calculateMA(10, data);
    87. 

  87. var dataMA20 = calculateMA(20, data);
    88. 

  88. 

  89. 

  90. var option = {
    91. 

  91.     animation: false,
    92. 

  92.     color: colorList,
    93. 

  93.     legend: {
    94. 

  94.         show: false,
    95. 

  95.         bottom: 10,
    96. 

  96.         itemHeight: 20,
    97. 

  97.         textStyle: {
    98. 

  98.             fontSize: 14,
    99. 

  99.         },
    100. 

  100.         data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
    101. 

  101.     },
    102. 

  102.     tooltip: {
    103. 

  103.         trigger: 'axis',
    104. 

  104.         transitionDuration: 0,
    105. 

  105.         confine: true,
    106. 

  106.         position: function (point, params, dom) {
    107. 

  107.             var width = dom.clientWidth;
    108. 

  108.             return [point[0] - width / 2, 20];
    109. 

  109.         },
    110. 

  110.         backgroundColor: 'transparent',
    111. 

  111.         padding: 0,
    112. 

  112.         formatter: function (params) {
    113. 

  113.             var dataIndex = params[0].dataIndex;
    114. 

  114.             var open = data[dataIndex][0];
    115. 

  115.             var close = data[dataIndex][1];
    116. 

  116.             var bgColor = close > open ? '#B30003' : close < open ? '#059400' : 'grey';
    117. 

  117.             return [
    118. 

  118.                 '<div style="border-radius:3px;padding:0 5px;height:38px;line-height:40px;background:' + bgColor + '">',
    119. 

  119.                 '<span style="font-size:22px;padding-right: 10px;">' + data[dataIndex][1] + '</span>' + dates[dataIndex],
    120. 

  120.                 '</div>'
    121. 

  121.             ].join('');
    122. 

  122.         }
    123. 

  123.     },
    124. 

  124.     xAxis: [{
    125. 

  125.         type: 'category',
    126. 

  126.         data: dates,
    127. 

  127.         axisLine: { lineStyle: { color: '#777' } },
    128. 

  128.         min: 'dataMin',
    129. 

  129.         max: 'dataMax'
    130. 

  130.     }, {
    131. 

  131.         type: 'category',
    132. 

  132.         gridIndex: 1,
    133. 

  133.         data: dates,
    134. 

  134.         scale: true,
    135. 

  135.         boundaryGap : false,
    136. 

  136.         axisLine: {onZero: false},
    137. 

  137.         axisTick: {show: false},
    138. 

  138.         splitLine: {show: false},
    139. 

  139.         axisLabel: {show: false},
    140. 

  140.         splitNumber: 20,
    141. 

  141.         min: 'dataMin',
    142. 

  142.         max: 'dataMax'
    143. 

  143.     }],
    144. 

  144.     yAxis: [{
    145. 

  145.         scale: true,
    146. 

  146.         axisLine: { lineStyle: { color: '#777' } },
    147. 

  147.         splitLine: { show: true },
    148. 

  148.         axisTick: { show: false },
    149. 

  149.         axisLabel: {
    150. 

  150.             inside: true,
    151. 

  151.             formatter: '{value}\n'
    152. 

  152.         }
    153. 

  153.     }, {
    154. 

  154.         scale: true,
    155. 

  155.         gridIndex: 1,
    156. 

  156.         splitNumber: 2,
    157. 

  157.         axisLabel: {show: false},
    158. 

  158.         axisLine: {show: false},
    159. 

  159.         axisTick: {show: false},
    160. 

  160.         splitLine: {show: false}
    161. 

  161.     }],
    162. 

  162.     grid: [{
    163. 

  163.         left: 10,
    164. 

  164.         right: 10,
    165. 

  165.         top: 90,
    166. 

  166.         bottom: 150
    167. 

  167.     }, {
    168. 

  168.         left: 10,
    169. 

  169.         right: 10,
    170. 

  170.         height: 80,
    171. 

  171.         bottom: 40
    172. 

  172.     }],
    173. 

  173.     animation: false,
    174. 

  174.     graphic: [{
    175. 

  175.         type: 'group',
    176. 

  176.         left: 'center',
    177. 

  177.         top: 70,
    178. 

  178.         width: 300,
    179. 

  179.         bounding: 'raw',
    180. 

  180.         children: [{
    181. 

  181.             id: 'MA5',
    182. 

  182.             type: 'text',
    183. 

  183.             style: {fill: colorList[1], font: labelFont},
    184. 

  184.             left: 0
    185. 

  185.         }, {
    186. 

  186.             id: 'MA10',
    187. 

  187.             type: 'text',
    188. 

  188.             style: {fill: colorList[2], font: labelFont},
    189. 

  189.             left: 'center'
    190. 

  190.         }, {
    191. 

  191.             id: 'MA20',
    192. 

  192.             type: 'text',
    193. 

  193.             style: {fill: colorList[3], font: labelFont},
    194. 

  194.             right: 0
    195. 

  195.         }]
    196. 

  196.     }],
    197. 

  197.     series: [{
    198. 

  198.         name: 'Volumn',
    199. 

  199.         type: 'bar',
    200. 

  200.         xAxisIndex: 1,
    201. 

  201.         yAxisIndex: 1,
    202. 

  202.         itemStyle: {
    203. 

  203.             normal: {
    204. 

  204.                 color: '#7fbe9e'
    205. 

  205.             }
    206. 

  206.         },
    207. 

  207.         data: volumns
    208. 

  208.     }, {
    209. 

  209.         type: 'candlestick',
    210. 

  210.         name: '日K',
    211. 

  211.         data: data,
    212. 

  212.         itemStyle: {
    213. 

  213.             normal: {
    214. 

  214.                 color: '#ef232a',
    215. 

  215.                 color0: '#14b143',
    216. 

  216.                 borderColor: '#ef232a',
    217. 

  217.                 borderColor0: '#14b143'
    218. 

  218.             }
    219. 

  219.         }
    220. 

  220.     }, {
    221. 

  221.         name: 'MA5',
    222. 

  222.         type: 'line',
    223. 

  223.         data: dataMA5,
    224. 

  224.         smooth: true,
    225. 

  225.         showSymbol: false,
    226. 

  226.         lineStyle: {
    227. 

  227.             normal: {
    228. 

  228.                 width: 1
    229. 

  229.             }
    230. 

  230.         }
    231. 

  231.     }, {
    232. 

  232.         name: 'MA10',
    233. 

  233.         type: 'line',
    234. 

  234.         data: dataMA10,
    235. 

  235.         smooth: true,
    236. 

  236.         showSymbol: false,
    237. 

  237.         lineStyle: {
    238. 

  238.             normal: {
    239. 

  239.                 width: 1
    240. 

  240.             }
    241. 

  241.         }
    242. 

  242.     }, {
    243. 

  243.         name: 'MA20',
    244. 

  244.         type: 'line',
    245. 

  245.         data: dataMA20,
    246. 

  246.         smooth: true,
    247. 

  247.         showSymbol: false,
    248. 

  248.         lineStyle: {
    249. 

  249.             normal: {
    250. 

  250.                 width: 1
    251. 

  251.             }
    252. 

  252.         }
    253. 

  253.     }]
    254. 

  254. };
    255. 

  255. 

  256. var updateText = throttle(function (dataIndex) {
    257. 

  257.     myChart.setOption({
    258. 

  258.         graphic: [{
    259. 

  259.             id: 'MA5',
    260. 

  260.             style: {text: 'MA5: ' + dataMA5[dataIndex]}
    261. 

  261.         }, {
    262. 

  262.             id: 'MA10',
    263. 

  263.             style: {text: 'MA10: ' + dataMA10[dataIndex]}
    264. 

  264.         }, {
    265. 

  265.             id: 'MA20',
    266. 

  266.             style: {text: 'MA20: ' + dataMA20[dataIndex]}
    267. 

  267.         }]
    268. 

  268.     });
    269. 

  269. }, 60);
    270. 

  270. 

  271. myChart.on('showTip', function (params) {
    272. 

  272.     // FIXME: set dataIndex but not only dataIndexInside.
    273. 

  273.     var dataIndex = params.dataIndexInside;
    274. 

  274.     updateText(dataIndex);
    275. 

  275. });
    276. 

  276. 

  277. function throttle(fn, delay, debounce) {
    278. 

  278.     var currCall;
    279. 

  279.     var lastCall = 0;
    280. 

  280.     var lastExec = 0;
    281. 

  281.     var timer = null;
    282. 

  282.     var diff;
    283. 

  283.     var scope;
    284. 

  284.     var args;
    285. 

  285. 

  286.     delay = delay || 0;
    287. 

  287. 

  288.     function exec() {
    289. 

  289.         lastExec = (new Date()).getTime();
    290. 

  290.         timer = null;
    291. 

  291.         fn.apply(scope, args || []);
    292. 

  292.     }
    293. 

  293. 

  294.     var cb = function () {
    295. 

  295.         currCall = (new Date()).getTime();
    296. 

  296.         scope = this;
    297. 

  297.         args = arguments;
    298. 

  298.         diff = currCall - (debounce ? lastCall : lastExec) - delay;
    299. 

  299. 

  300.         clearTimeout(timer);
    301. 

  301. 

  302.         if (debounce) {
    303. 

  303.             timer = setTimeout(exec, delay);
    304. 

  304.         }
    305. 

  305.         else {
    306. 

  306.             if (diff >= 0) {
    307. 

  307.                 exec();
    308. 

  308.             }
    309. 

  309.             else {
    310. 

  310.                 timer = setTimeout(exec, -diff);
    311. 

  311.             }
    312. 

  312.         }
    313. 

  313. 

  314.         lastCall = currCall;
    315. 

  315.     };
    316. 

  316. 

  317.     /**
    318. 

  318.      * Clear throttle.
    319. 

  319.      * @public
    320. 

  320.      */
    321. 

  321.     cb.clear = function () {
    322. 

  322.         if (timer) {
    323. 

  323.             clearTimeout(timer);
    324. 

  324.             timer = null;
    325. 

  325.         }
    326. 

  326.     };
    327. 

  327. 

  328.     return cb;
    329. 

  329. };
    330. 

  330. 

  331. 

  332. 

  333. 

  334. 

  335. 

  336. 

  337. 

  338. 

  339. 

  340.                 chart.setOption(option);
    341. 

  341.             });
    342. 

  342. 

  343.         </script>
    344. 

  344.     </body>
    345. 

  345. </html>
    346.