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

由于之前萌購(gòu)并沒(méi)有匯率的統(tǒng)計(jì)功能晓避。上一個(gè)版本算是自己做了一個(gè)超低配版的匯率記錄和比較功能玫膀。雖然勉強(qiáng)能用迈喉，但問(wèn)題存在很多赵誓，比如如果不是每天都去打開(kāi)看一下的話菲宴，數(shù)據(jù)就會(huì)產(chǎn)生滯后性艰管。

然后有一天前方，突然發(fā)現(xiàn)萌購(gòu)現(xiàn)在增加了匯率走勢(shì)圖的功能狈醉。

萌購(gòu)官方匯率走勢(shì)圖

既然官方已經(jīng)自帶走勢(shì)圖了，那么作為萌購(gòu)的小粉絲镣丑。自然也要更新一把插件了舔糖。
于是乎說(shuō)干就干，利用了兩個(gè)晚上把插件給更新了一把莺匠。

廢話先不多說(shuō)金吗，直接上圖看看最后在Chrome上的效果。
GitHub：030 Rate Viewer（覺(jué)得有用的話請(qǐng)Star一下哦）
Chrome應(yīng)用商店：030 Rate Viewer

030RateViewer 匯率圖收起時(shí)

030RateViewer 匯率圖展開(kāi)時(shí)

這一個(gè)版本最大的特色就是增加了匯率走勢(shì)圖以及去除了Chrome的本地存儲(chǔ)趣竣。
而整體的核心便是圖表數(shù)據(jù)的獲取以及展示了摇庙。

• 圖表數(shù)據(jù)的獲取：
  通過(guò)分析官網(wǎng)的NetWork遥缕，可以知道官網(wǎng)用來(lái)制作匯率走勢(shì)圖的數(shù)據(jù)是下面這些卫袒。

官網(wǎng)匯率數(shù)據(jù)獲取

因此，一旦拿到了這些數(shù)據(jù)单匣，那么我們就也能“為所欲為”了夕凝。

• 圖表的展示：
  圖表的展示借助ECharts來(lái)進(jìn)行實(shí)現(xiàn)宝穗。從上面返回的數(shù)據(jù)中，我們把date作為X軸的码秉，把exchange作為Y軸逮矛。ECharts提供了大量的官方實(shí)例，因此可以很方便的實(shí)現(xiàn)转砖。這一次參考的實(shí)例：大面積折線圖

文字說(shuō)明就是上面這些须鼎。這一版本中最主要的獲取數(shù)據(jù)以及生成圖表的方法如下。

//獲取匯率圖表
   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: '萌購(gòu)匯率走勢(shì)圖',
                   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
                   }
               ]
           };

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

       });
   }