搜索
aardio官方社区 门户 查看主题

echarts图表中tooltip提示框formatter函数报错

发布者: liubing19860405 | 发布时间: 2015-12-14 00:30| 查看数: 5012| 评论数: 3|帖子模式

这是一个aardio中调用百度echarts图表工具的代码。
是一个根据版主的例子,依葫芦画瓢一点一点的改来的,
现在遇到点问题。
echarts图表中tooltip提示框formatter函数报错,不知道怎么改,在代码中的28行,我已经把这段注释掉了。
希望各位高手们帮帮忙,教教我。
先谢谢了  

最新评论

auaau 发表于 2015-12-14 13:54:18
1、你在JSON里写函数很有些莫名其妙,JSON是跨语言的标准 - 不可能会支持函数。

2、你可以在JS里调用aardio函数,不等于aardio代码可以替代JS写任何东西,你的echart所需要的JS回调函数也并不需要翻译为aardio代码,JS函数就该直接写到JS里,例如:
<script>
   var myChart = echarts.init(document.getElementById('main'));
   
var option = external.getOption();
   option.tooltip.formatter =
function (params) {
        
var res = params[0].name;
        res +=
'<br/>' + params[0].seriesName;
        res +=
'<br/>  开盘 : ' + params[0].value[0] + '  最高 : ' + params[0].value[3];
        res +=
'<br/>  收盘 : ' + params[0].value[1] + '  最低 : ' + params[0].value[2];
        
return res;
    }
   myChart.setOption( option );
</script>
你在option.tooltip.formatter的代码里仍然可以调用aardio里的函数,明白了吗?你只能相互调用,不能用一个语言完全替代另一个语言。

看样子还得附上完整代码:
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form(text="aardio echarts";right=1437;bottom=786;border="dialog frame";max=false;min=false)
  4. winform.add(
  5. custom={cls="custom";text="custom";left=3;top=12;right=1419;bottom=766;edge=1;transparent=1;z=1}
  6. )
  7. /*}}*/

  8. import web.form;
  9. var wb = web.form(winform.custom);

  10. import web.json;
  11. wb.external = {
  12. /*option{{*/
  13.     getOption = function( num ){
  14.                
  15.                 var option = {
  16.                  
  17.                   title = {
  18.                         text= '2013年上半年上证指数'
  19.                     };
  20.                     tooltip = {
  21.                         trigger= 'axis';
  22.                         showDelay= 0;     // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
  23.                
  24.                     };
  25.                   
  26.                     legend= {
  27.                         data={'上证指数';'成交金额(万)';'虚拟数据'}
  28.                     };
  29.                     toolbox= {
  30.                         show = true;
  31.                         feature = {
  32.                             mark = {show= true};
  33.                             dataZoom = {show= true};
  34.                             magicType = {show= true; type= {'line'; 'bar'}};
  35.                             restore = {show= true};
  36.                             saveAsImage = {show= true}
  37.                         }
  38.                     };
  39.                     dataZoom = {
  40.                         y= 250;
  41.                         show = true;
  42.                         realtime= true;
  43.                         start = 50;
  44.                         'end' = 100
  45.                     };
  46.                     grid= {
  47.                         x= 80;
  48.                         y= 40;
  49.                         x2=20;
  50.                         y2=25
  51.                     };
  52.                     xAxis = {
  53.                         {
  54.                             type = 'category';
  55.                             boundaryGap = true;
  56.                             axisTick= {onGap=false};
  57.                             splitLine= {show=false};
  58.                             data =  {
  59.                                             "2013/1/24"; "2013/1/25"; "2013/1/28"; "2013/1/29"; "2013/1/30";
  60.                                             "2013/1/31"; "2013/2/1"; "2013/2/4"; "2013/2/5"; "2013/2/6";
  61.                                             "2013/2/7"; "2013/2/8"; "2013/2/18"; "2013/2/19"; "2013/2/20";
  62.                                             "2013/2/21"; "2013/2/22"; "2013/2/25"; "2013/2/26"; "2013/2/27";
  63.                                             "2013/2/28"; "2013/3/1"; "2013/3/4"; "2013/3/5"; "2013/3/6";
  64.                                             "2013/3/7"; "2013/3/8"; "2013/3/11"; "2013/3/12"; "2013/3/13";
  65.                                             "2013/3/14"; "2013/3/15"; "2013/3/18"; "2013/3/19"; "2013/3/20";
  66.                                             "2013/3/21"; "2013/3/22"; "2013/3/25"; "2013/3/26"; "2013/3/27";
  67.                                             "2013/3/28"; "2013/3/29"; "2013/4/1"; "2013/4/2"; "2013/4/3";
  68.                                             "2013/4/8"; "2013/4/9"; "2013/4/10"; "2013/4/11"; "2013/4/12";
  69.                                             "2013/4/15"; "2013/4/16"; "2013/4/17"; "2013/4/18"; "2013/4/19";
  70.                                             "2013/4/22"; "2013/4/23"; "2013/4/24"; "2013/4/25"; "2013/4/26";
  71.                                             "2013/5/2"; "2013/5/3"; "2013/5/6"; "2013/5/7"; "2013/5/8";
  72.                                             "2013/5/9"; "2013/5/10"; "2013/5/13"; "2013/5/14"; "2013/5/15";
  73.                                             "2013/5/16"; "2013/5/17"; "2013/5/20"; "2013/5/21"; "2013/5/22";
  74.                                             "2013/5/23"; "2013/5/24"; "2013/5/27"; "2013/5/28"; "2013/5/29";
  75.                                             "2013/5/30"; "2013/5/31"; "2013/6/3"; "2013/6/4"; "2013/6/5";
  76.                                             "2013/6/6"; "2013/6/7"; "2013/6/13"
  77.                                         };
  78.                         }
  79.                     };
  80.                     yAxis = {
  81.                         {
  82.                             type = 'value';
  83.                             scale=true;
  84.                             boundaryGap= {0.05; 0.05};
  85.                             splitArea = {show = true}
  86.                         }
  87.                     };
  88.                       series = {
  89.                         {
  90.                             name='上证指数';
  91.                             type='k';
  92.                             data={ // 开盘,收盘,最低,最高
  93.                                 {2320.26;2302.6;2287.3;2362.94};
  94.                                 {2300;2291.3;2288.26;2308.38};
  95.                                 {2295.35;2346.5;2295.35;2346.92};
  96.                                 {2347.22;2358.98;2337.35;2363.8};
  97.                                 {2360.75;2382.48;2347.89;2383.76};
  98.                                 {2383.43;2385.42;2371.23;2391.82};
  99.                                 {2377.41;2419.02;2369.57;2421.15};
  100.                                 {2425.92;2428.15;2417.58;2440.38};
  101.                                 {2411;2433.13;2403.3;2437.42};
  102.                                 {2432.68;2434.48;2427.7;2441.73};
  103.                                 {2430.69;2418.53;2394.22;2433.89};
  104.                                 {2416.62;2432.4;2414.4;2443.03};
  105.                                 {2441.91;2421.56;2415.43;2444.8};
  106.                                 {2420.26;2382.91;2373.53;2427.07};
  107.                                 {2383.49;2397.18;2370.61;2397.94};
  108.                                 {2378.82;2325.95;2309.17;2378.82};
  109.                                 {2322.94;2314.16;2308.76;2330.88};
  110.                                 {2320.62;2325.82;2315.01;2338.78};
  111.                                 {2313.74;2293.34;2289.89;2340.71};
  112.                                 {2297.77;2313.22;2292.03;2324.63};
  113.                                 {2322.32;2365.59;2308.92;2366.16};
  114.                                 {2364.54;2359.51;2330.86;2369.65};
  115.                                 {2332.08;2273.4;2259.25;2333.54};
  116.                                 {2274.81;2326.31;2270.1;2328.14};
  117.                                 {2333.61;2347.18;2321.6;2351.44};
  118.                                 {2340.44;2324.29;2304.27;2352.02};
  119.                                 {2326.42;2318.61;2314.59;2333.67};
  120.                                 {2314.68;2310.59;2296.58;2320.96};
  121.                                 {2309.16;2286.6;2264.83;2333.29};
  122.                                 {2282.17;2263.97;2253.25;2286.33};
  123.                                 {2255.77;2270.28;2253.31;2276.22};
  124.                                 {2269.31;2278.4;2250;2312.08};
  125.                                 {2267.29;2240.02;2239.21;2276.05};
  126.                                 {2244.26;2257.43;2232.02;2261.31};
  127.                                 {2257.74;2317.37;2257.42;2317.86};
  128.                                 {2318.21;2324.24;2311.6;2330.81};
  129.                                 {2321.4;2328.28;2314.97;2332};
  130.                                 {2334.74;2326.72;2319.91;2344.89};
  131.                                 {2318.58;2297.67;2281.12;2319.99};
  132.                                 {2299.38;2301.26;2289;2323.48};
  133.                                 {2273.55;2236.3;2232.91;2273.55};
  134.                                 {2238.49;2236.62;2228.81;2246.87};
  135.                                 {2229.46;2234.4;2227.31;2243.95};
  136.                                 {2234.9;2227.74;2220.44;2253.42};
  137.                                 {2232.69;2225.29;2217.25;2241.34};
  138.                                 {2196.24;2211.59;2180.67;2212.59};
  139.                                 {2215.47;2225.77;2215.47;2234.73};
  140.                                 {2224.93;2226.13;2212.56;2233.04};
  141.                                 {2236.98;2219.55;2217.26;2242.48};
  142.                                 {2218.09;2206.78;2204.44;2226.26};
  143.                                 {2199.91;2181.94;2177.39;2204.99};
  144.                                 {2169.63;2194.85;2165.78;2196.43};
  145.                                 {2195.03;2193.8;2178.47;2197.51};
  146.                                 {2181.82;2197.6;2175.44;2206.03};
  147.                                 {2201.12;2244.64;2200.58;2250.11};
  148.                                 {2236.4;2242.17;2232.26;2245.12};
  149.                                 {2242.62;2184.54;2182.81;2242.62};
  150.                                 {2187.35;2218.32;2184.11;2226.12};
  151.                                 {2213.19;2199.31;2191.85;2224.63};
  152.                                 {2203.89;2177.91;2173.86;2210.58};
  153.                                 {2170.78;2174.12;2161.14;2179.65};
  154.                                 {2179.05;2205.5;2179.05;2222.81};
  155.                                 {2212.5;2231.17;2212.5;2236.07};
  156.                                 {2227.86;2235.57;2219.44;2240.26};
  157.                                 {2242.39;2246.3;2235.42;2255.21};
  158.                                 {2246.96;2232.97;2221.38;2247.86};
  159.                                 {2228.82;2246.83;2225.81;2247.67};
  160.                                 {2247.68;2241.92;2231.36;2250.85};
  161.                                 {2238.9;2217.01;2205.87;2239.93};
  162.                                 {2217.09;2224.8;2213.58;2225.19};
  163.                                 {2221.34;2251.81;2210.77;2252.87};
  164.                                 {2249.81;2282.87;2248.41;2288.09};
  165.                                 {2286.33;2299.99;2281.9;2309.39};
  166.                                 {2297.11;2305.11;2290.12;2305.3};
  167.                                 {2303.75;2302.4;2292.43;2314.18};
  168.                                 {2293.81;2275.67;2274.1;2304.95};
  169.                                 {2281.45;2288.53;2270.25;2292.59};
  170.                                 {2286.66;2293.08;2283.94;2301.7};
  171.                                 {2293.4;2321.32;2281.47;2322.1};
  172.                                 {2323.54;2324.02;2321.17;2334.33};
  173.                                 {2316.25;2317.75;2310.49;2325.72};
  174.                                 {2320.74;2300.59;2299.37;2325.53};
  175.                                 {2300.21;2299.25;2294.11;2313.43};
  176.                                 {2297.1;2272.42;2264.76;2297.1};
  177.                                 {2270.71;2270.93;2260.87;2276.86};
  178.                                 {2264.43;2242.11;2240.07;2266.69};
  179.                                 {2242.26;2210.9;2205.07;2250.63};
  180.                                 {2190.1;2148.35;2126.22;2190.1}
  181.                             }
  182.                         }
  183.                     }
  184.                 };       
  185.                        
  186.             var json = web.json.stringify(option);
  187.             var opt = wb.script.eval( "(" + json + ")" )
  188.      
  189.                 return opt;
  190.     }
  191.    
  192. /*}}*/
  193. };

  194. wb.html = /**
  195. <!doctype html>
  196. <html>
  197. <head>
  198.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  199.     <meta charset="UTF-8">  
  200. </head>
  201. <body>
  202.     <div id="main" style="height:250px;"></div>
  203.     <div id="main2" style="height:250px;"></div>
  204.     <div id="main3" style="height:200px;"></div>
  205.     <script src="http://apps.bdimg.com/libs/echarts/2.1.9/source/echarts-all.js"></script>
  206.     <script>
  207.        var myChart = echarts.init(document.getElementById('main'));
  208.       
  209.        var option = external.getOption();
  210.        option.tooltip.formatter = function (params) {
  211.                     var res = params[0].name;
  212.                     res += '<br/>' + params[0].seriesName;
  213.                     res += '<br/>  开盘 : ' + params[0].value[0] + '  最高 : ' + params[0].value[3];
  214.                     res += '<br/>  收盘 : ' + params[0].value[1] + '  最低 : ' + params[0].value[2];
  215.                     return res;
  216.            }
  217.        myChart.setOption( option );
  218.     </script>
  219. </body>
  220. </html>
  221. **/

  222. winform.show();
  223. win.loopMessage();
复制代码




评分

参与人数 1银币 +10 收起 理由
liubing19860405 + 10 赞一个!既给鱼又授渔,非常感谢。

查看全部评分

liubing19860405 发表于 2015-12-14 16:11:35

[quote][size=2][url=forum.php?mod=redirect&goto=findpost&pid=70461&ptid=13161][c

auaau 发表于 2015-12-14 13:54
你不是第一次上网吧?!很多论坛新人只要包含链接就不让发,没什么很难理解的吧?!
那我们每天辛苦发帖 ...

如果没有这个完整代码,我还真看不懂。多谢多谢!
你太了解我们了,让我又学会了些东西。
四月物语 发表于 2017-3-2 11:56:44
很好,学习了

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2017-9-22 07:11 , Processed in 0.046875 second(s), 20 queries , Wincache On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表