搜索
查看: 722|回复: 0

echarts再封装的研究

[复制链接]

39

主题

174

帖子

1037

积分

荣誉会员

htmlayout.cn 我的学习笔记

Rank: 8Rank: 8

积分
1037
发表于 2018-8-31 09:30:55 | 显示全部楼层 |阅读模式
想要二次封装下echarts图表,至少用起来的时候不要有其他的js操作参与。
于是想着用table表的操作来执行,这样也利于二次封装
看了echarts的文档,属性好多,如果按照下面的方式来写,估计写着写着就晕了。不知道有没更好点的方式,使用的时候不用去记忆这些属性,当我在函数里使用123的时候,发现还不如输入“line”,“pie”来的直接...
下面是测试的一个思路:
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = win.form(text="aardio form";right=759;bottom=469)
  4. winform.add(
  5. button={cls="button";text="Button";left=678;top=412;right=763;bottom=468;z=1}
  6. )
  7. /*}}*/

  8. import web.json;
  9. import web.blink.form;
  10. var wbForm = web.blink.form(winform);
  11. wbForm.go("\res\echartsHtml\main.html")

  12. 绘制图表 = function(_web,optionTab){
  13.     var str ="option = " ++  web.json.stringify(optionTab,false,false) ++ ";myChart.setOption(option);";
  14.     _web.doScript(str);
  15. }
  16.      
  17. x坐标轴类型设置 = function(optionTab,index){
  18.     var str = "value";
  19.     select(index) {
  20.         case "数值轴" {
  21.             str = "value";
  22.         }
  23.         case "类目轴" {
  24.             str = "category";
  25.         }
  26.         case "时间轴" {
  27.             str = "time";
  28.         }
  29.         case "对数轴" {
  30.             str = "log";
  31.         }
  32.         else {
  33.             
  34.         }
  35.     }
  36.     optionTab.xAxis = table.mixin(optionTab.xAxis,{type = str});        
  37. }
  38.      
  39. x坐标轴数据设置 = function(optionTab,dataTab){   
  40.     optionTab.xAxis.data = table.mixin(optionTab.xAxis.data,dataTab);
  41. }

  42. y坐标轴类型设置 = function(optionTab,index){
  43.     var str = "value";
  44.     select(index) {
  45.         case "数值轴" {
  46.             str = "value";
  47.         }
  48.         case "类目轴" {
  49.             str = "category";
  50.         }
  51.         case "时间轴" {
  52.             str = "time";
  53.         }
  54.         case "对数轴" {
  55.             str = "log";
  56.         }
  57.         else {
  58.             
  59.         }
  60.     }
  61.     optionTab.yAxis = table.mixin(optionTab.yAxis,{type = str});        
  62. }
  63. 系列列表类型设置 = function(optionTab,index){
  64.     var str = "line";
  65.     select(index) {
  66.         case 1 {
  67.             str = "line";
  68.         }
  69.         case 2 {
  70.             str = "bar";
  71.         }
  72.         case 3 {
  73.             str = "pie";
  74.         }
  75.         case 4 {
  76.             str = "scatter";
  77.         }
  78.         else {
  79.             
  80.         }
  81.     }
  82.     optionTab.series = table.mixin(optionTab.series,{type=str});      
  83. }
  84. 系列列表数据设置 = function(optionTab,dataTab){
  85.     optionTab.series.data = table.mixin(optionTab.series.data,dataTab);      
  86. }
  87. 系列列表其他属性设置 = function(optionTab,dataTab){
  88.     optionTab.series = table.mixin(optionTab.series,dataTab);     
  89. }
  90. var option = {};
  91. x坐标轴类型设置(option,"类目轴");
  92. x坐标轴数据设置(option,{ 0 });
  93. y坐标轴类型设置(option,"数值轴");
  94. 系列列表类型设置(option,1);
  95. 系列列表数据设置(option,{ 0 });
  96. 系列列表其他属性设置(option,{smooth = true});
  97. 绘制图表(wbForm,option);

  98. var tmId = winform.addtimer(
  99.     200,
  100.     function(hwnd,msg,id,tick){
  101.         if(#option.xAxis.data > 50000){
  102.             option.xAxis.data = {0};
  103.             option.series.data = {0};
  104.         }else {
  105.             table.push(option.xAxis.data,option.xAxis.data[#option.xAxis.data]+1);
  106.             table.push(option.series.data,math.random(0,2200));
  107.         }
  108.          
  109.         绘制图表(wbForm,option);
  110.          
  111.     }
  112. )

  113. winform.button.oncommand = function(id,event){
  114.     option.xAxis.data = {0};
  115.     option.series.data = {0};
  116. }

  117. winform.show();
  118. win.loopMessage();
  119. return winform;
复制代码


html文件内容如下:
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script src="js/echarts.simple.min.js"></script>
  6. <style type="text/css">
  7. #main {  height:100% ; width:100%; position:absolute;}
  8. body {  margin:0px; padding:0px; overflow:hidden;}
  9. </style>
  10. </head>
  11. <body>
  12.     <div id="main">缺少数据初始化JS指令</div>
  13. </body>
  14. <script type="text/javascript">
  15.     var myChart = echarts.init(document.getElementById('main'));
  16.     myChart.setOption(option);
  17. </script>
  18. </html>
复制代码

1535605122793235.png
! www.HtmLayout.Cn 我的学习笔记
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

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

GMT+8, 2018-12-14 01:38 , Processed in 0.062500 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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