Chrome 插件 030RateViewer 1.0.0版更新

上一篇地址：Chrome 插件 030RateViewer 0.02版更新

由于之前萌购并没有汇率的统计功能。上一个版本算是自己做了一个超低配版的汇率记录和比较功能。虽然勉强能用，但问题存在很多，比如如果不是每天都去打开看一下的话，数据就会产生滞后性。

然后有一天，突然发现萌购现在增加了汇率走势图的功能。

萌购官方汇率走势图

既然官方已经自带走势图了，那么作为萌购的小粉丝。自然也要更新一把插件了。
于是乎说干就干，利用了两个晚上把插件给更新了一把。

废话先不多说，直接上图看看最后在Chrome上的效果。
GitHub：030 Rate Viewer（觉得有用的话请Star一下哦）
Chrome应用商店：030 Rate Viewer

030RateViewer 汇率图收起时 030RateViewer 汇率图展开时

这一个版本最大的特色就是增加了汇率走势图以及去除了Chrome的本地存储。
而整体的核心便是图表数据的获取以及展示了。

• 图表数据的获取：
  通过分析官网的NetWork，可以知道官网用来制作汇率走势图的数据是下面这些。

官网汇率数据获取

因此，一旦拿到了这些数据，那么我们就也能“为所欲为”了。

• 图表的展示：
  图表的展示借助ECharts来进行实现。从上面返回的数据中，我们把date作为X轴的，把exchange作为Y轴。ECharts提供了大量的官方实例，因此可以很方便的实现。这一次参考的实例：大面积折线图

---

文字说明就是上面这些。这一版本中最主要的获取数据以及生成图表的方法如下。

//获取汇率图表
   function getRateChart() {
       $.get(RATE_DATA_URL, function (data) {
           var data_json = JSON.parse(data);
           var rateLog = data_json['exchange_log'];

           var rateDate = [],
               rateData = [];

           rateLog.forEach(function (exchangeData) {
               rateDate.push(exchangeData['date']);
               rateData.push(parseFloat(exchangeData['exchange']));
           });

           var option = {
               title: {
                   left: 'center',
                   text: '萌购汇率走势图',
                   textStyle:{
                       fontSize: 12
                   }
               },
               // 提示框
               tooltip: {
                   trigger: 'axis'
               },
               xAxis: {
                   type: 'category',
                   boundaryGap: false,
                   data: rateDate
               },
               yAxis: {
                   type: 'value',
                   boundaryGap: [0, '100%']
               },
               series: [
                   {
                       name: '汇率',
                       type: 'line',
                       smooth: true,
                       symbol: 'none',
                       sampling: 'average',
                       itemStyle: {
                           normal: {
                               color: 'rgb(255, 70, 131)'
                           }
                       },
                       areaStyle: {
                           normal: {
                               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                   offset: 0,
                                   color: 'rgb(255, 158, 68)'
                               }, {
                                   offset: 1,
                                   color: 'rgb(255, 70, 131)'
                               }])
                           }
                       },
                       data: rateData
                   }
               ]
           };

           //设置图表所在的元素
           var rateChart = echarts.init($('#rateChartBox')[0]);
           rateChart.setOption(option);

       });
   }