Lovely Life ZZZ
0%

利用C#和Echarts开发流量占有率对比小工具

发表于 更新于 分类于 阅读次数： Valine：

网易也把评论关了，不知啥原因，所以有问题的话，大家还是邮件联系吧，目前难找到一个国内的公共留言平台了，桑心！ 后来还是找到替代方案了。

事情由来

最近在研究检测器数据，对数据的研究通常需要有一个直观的认识，但是由于数据量非常大，时间跨度也非常长，之前利用python或者matlab生成的静态图片已经不能满足我的需求，突然在Echarts上看到一个模板如下图，发现还挺适合我的需求的，就想着利用Echarts来展示。

对比图

萌生的思路

受限于自身水平和数据环境原因，为了做这个小工具，也走了不少弯路，有一些想法也可能很笨拙，将中间遇到的问题进行总结，希望帮助到大家，也希望大家给我更好的建议。（PS:如果大家问我为啥不用JAVA，因为这个我还不会，而且赶时间[捂脸]）

思路1：利用Python完成

大致的想法是这样的：

1
2
3
4
5
6
7
8
//更新了发现原来hexo默认不能解析流程图，重新加个流程图，这个也留着，当做对应吧
st=>start
dj=>operation: 利用django构建简单web平台
or=>operation: 读取oracle数据库
js=>operation: 生成json文件
ec=>operation: Echarts读取json文件生成图形
e=>end
st(right)->dj(right)->or->js->ec->e

python流程图
然而这个想法很快就夭折了，因为python链接oracle实在是太坑了，涉及到了很多编码问题和软件位数问题。链接需要一个叫做cx_oracle的包，因为要用plsql（32位），所以之前装了一个32位的oracle客户端，而数据库服务器上装的是64位的oracle，我自己的python版本的3.4 64位，所以就安装了64位的cx_oracle，中间自己编译还遇到了找不到vs10的编译执行文件的问题，通过SET设置环境变量解决了。最终装上了，结果遇上了编码问题，无法导入包。读取数据库是最关键的步骤，这一步解决不了，我只有放弃这个思路了。

思路2：利用C#完成

原本使用python是希望可以直接利用里面的包进行分析，然后想想选择一个折中的方式吧，反正都是生成了json文件，pandas可以直接读取，干脆把展示和分析分为两个部分。
C#去直连oracle数据库是比较简单的，同时可以嵌入一个浏览器的控件去展示最后生成的页面，因此就产生了下面的想法：

1
2
3
4
5
6
7
8
9
st=>start
c=>operation: C# winform
web=>operation: 浏览器控件
or=>operation: oracle链接查询类
js=>operation: json文件
ec=>operation: echarts加载
e=>end
st(right)->c
c->or(right)->js(right)->web(right)->ec(right)->e

c#流程图
为了实现这个想法，主要需要解决以下问题：

  1. C#链接数据库并执行查询工作
    这个过程比较简单，网上有大量的方法去解决这个数据库连接与查询的问题，在此就不赘述。
  2. 将查询的文件按照json格式保存
    由于json格式还是相对比较自由，主要看的两种方式(其他的嵌套方式在这里不考虑)：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #第一种方式
    {
    "key1":[value1,value2,...],
    "key2":[value1,value2,...]
    }
    #第二种方式
    {
    [{"key1":value1,"key2":value1,...},
    {"key1":value2,"key2":value2,...}]
    ]
    为了便于从数据库数据中写出数据，这里采用了第一种存储方式，利用C#流写出一个json文件，对json格式拿不准了可以在网上找个格式校验的分析一下生成的格式是否有问题。
  3. Echarts文件加载本地的json文件
    在这一步上有若干的问题，我采用浏览器加载本地html文件，而利用echarts的js包加载数据需要JQ的支持，因此在本地的html文件中至少加载两个js文件，一个echarts的，一个JQ的。
    因为考虑要异步的加载数据，数据是不可能写死在html文件中，因此必须使用JQ。这里出现了几个问题：
  • C#默认的浏览器内核是IE的（我这里应该是IE11），需要在html文件中写适配才能够执行js的文件。
  • JQ出于安全性考虑，是无法加载本机（Windows）的文件路径的，必须通过服务器返回json文件。如果你在html的js块中写了加载本地文件的语句，利用chrome调试，会提示没有权限加载本地文件。为了解决这个问题，在本机搭了一个IIS服务器，通过localhost返回json文件。此时又出现一个问题，就是JQ跨域加载文件的问题，由于在本机测试，我这里采用了一个不安全的做法，在IIS的配置中设置如下（IE10以下似乎是不支持的）：
    1
    2
    3
    header("Access-Control-Allow-Origin:*");
    /*星号表示所有的域都可以接受，*/
    header("Access-Control-Allow-Methods:GET,POST");
    之后JQ就能加载到本地文件了。
    到这里大多数的问题都解决了，采用了一个笨拙的方法去解决一个问题，其实有时候也挺有趣的。
    最后的效果就是这样：软件界面