echarts_highcharts_筆記_風向箭頭

echarts_highcharts_筆記_風向箭頭

轉載注明來源: 本文鏈接 來自osnosn的博客，寫於 2019-05-16.

• highcharts 文檔
• echarts 文檔 或者 echarts 文檔

提示框顯示參數，添加文字/數值單位。

• highcharts， 比較簡單，在默認顯示風格中添加文字。highcharts的文檔有描述。 tooltip:{valueSuffix:'公里'}
• echarts， 文檔也有描述，但不易理解。使用 tooltip:{ formatter: ... }
  • 方式1，直接用字符串 formatter: '{a}: {b} 公里' ， 缺點是，那個有顏色的圓點就沒有了。
  • 方式2，用 formatter: function(params) {...}，代碼有點長，多個參數一起顯示也沒問題(比如:疊加的柱狀圖)。

  formatter: function(params) {
   var htmlStr = '';
   htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
   for(var i=0,j=params.length;i<j;i++){
    //前面的圓點和他的顏色
    htmlStr += '<span style="width: 10px;height: 10px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span>';
    htmlStr += ' <span style="color:#fff;">' + params[i].seriesName + ':</span>';
    htmlStr += ' <span style="color:#fff;">' + params[i].value + ' 公里</span><br/>';
   }
   htmlStr += '</div>';
   return  htmlStr;
  }

坐標軸縮放

• highcharts， 用 chart: { zoomType:'x' }實現x軸縮放。缺點是放大之后，不能象echarts那樣平移。參看文檔。
  • 好像不支持鼠標滾輪縮放。
• echarts， 用dataZoom:[{xAxisIndex: 0 }] 來定義第一個x軸的縮放。參看文檔。
  • 如果又要有縮放控件，又支持鼠標滾輪縮放。
    則設置兩個一樣的dataZoom:[{type:'slider',...},{type:'inside',...}]僅type不同。
  • 縮放控制會壓住圖表。用dataZoom:[{left:..., right:...}] 設置縮放控件的顯示位置。
    用 grid:{ left:0,right:0,...} 使圖表讓出空間，擺放縮放控件。

多個數據集，缺省時，部分顯示/激活，部分不顯示/不激活

• highcharts，在 series:[{visible:false, data:[...]}, {visible:true, data:[...]}] 中設置，僅設置false即可。
• echarts， 在 legend: { selected:{'參數1':false,'參數2':false} } 中設置，僅需設置false的即可。

圖片另存(工具欄功能)

• highcharts，參看文檔。(highcharts-8.0.4)
  • 需要導入 <script src="exporting.js"></script> 和 <script src="offline-exporting.js"></script>
  • 還需要幾個庫的支持 canvg.js, jspdf.js, rgbcolor.js, svg2pdf.js
  • exporting:{fallbackToExportServer:false,libURL:'/mywebdir/js/lib/'} 指定支持庫的路徑。
• echarts，參考文檔。用toolbox: { itemSize:10,itemGap:5,feature:{ restore:{},saveAsImage:{pixelRatio:2} } } (還原,另存)
  • 其中itemSize指定圖標大小，pixelRatio數字越大保存的圖片尺寸越大(質量越好)。
  • 無論指定 png 還是 jpg ，導出的圖片都是PNG格式。
  • 在{renderer:'svg'}時，只能導出 svg 格式圖片。可惜有 bug，如果有中文，導出的 svg 文件不完整，無法打開。(echarts-4.7.0)

echarts 兩個關聯的grid圖，畫出風向箭頭 (echarts-4.7.0 測試可用)

highcharts,似乎畫不出風向箭頭。至少我不會。

• 首先, 透明背景的箭頭圖片不好找，自己畫一個吧。把以下代碼寫入文本文件，保存為 arrow.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100" width="100" style="display:block;">
<path d="M90 10 L2 92 M90 10 L8 98 Z" stroke="#c00" stroke-width="9" fill="none" />
<path d="M100 0 L50 20 L74 26 L80 50 L100 0 Z" stroke="#c00" stroke-width="1" fill="#c00" />
</svg>

• 兩個grid的畫圖位置。自己調整位置，高度，讓它們不要重疊了。

var options={
  ... //其他設置項目
 grid: [
  { top:45,left:15,right:15,bottom: 30, containLabel: true,height:280 },
  { left:15, right:15,bottom:15, containLabel: true,height:80 }
 ],
  ... //其他設置項目
);

• 對第二個grid，分別指定 x,y 軸。x,y都要有至少一個指向gridIndex:1。
  如果y軸不顯示刻度標簽，要同時指定 show 和 axisLabel.show ，否則grid還是會讓出y軸顯示空間。

xAxis: [
  //不設置,默認是gridIndex:0
  { type: 'value', scale:true,right:5,min:'dataMin',max:'dataMax',splitLine:{show:false} },
  { type: 'value', scale:true,right:5,min:'dataMin',max:'dataMax',splitLine:{show:false},show:false,gridIndex:1 }
 ],
yAxis: [
 //不設置,默認是gridIndex:0
 { name:'G..',type:'value', scale:true,axisLine:{onZero:true},
  //y軸不顯示刻度標簽,也不會導致grid縮進
  show:false,axisLabel:{show:false},
  min: function (value) { pad=value.min-(value.max-value.min)* 0.05; return pad.toFixed(3); },
  max: function (value) { pad=value.max+(value.max-value.min)* 0.05; return pad.toFixed(3); }
 },
 { name:'HEAD',type:'value', scale:true,axisLine:{onZero:true},
  gridIndex:1,nameLocation:'start',splitNumber:3
 },
   .... //其他y軸定義
],

• 讓 HEAD 參數顯示到gridIndex:1上。同時讓箭頭顯示在曲線上。
  因為上面的設置中 xAxisIndex:1 和 yAxisIndex:1 是指向 gridIndex:1 的。
  要讓參數顯示到第二個grid上，必須同時指定xAxisIndex 和 yAxisIndex，否則會出錯。

series: [
  { name: 'G..',type:'line',smooth:0.3,showSymbol:false,label:{show:false},
    //如果不指定xAxis或yAxis,則默認是0
    yAxisIndex:0,
    data:[
[18301.25,95.0],[18302.25,91.0],[18303.25,86.0],
[18350.25,10.0],[18351.25,10.0],[18352.25,10.0]
    ]
  },
  { name: 'HEAD',type:'line',smooth:0.3,showSymbol:false,label:{show:false},
    yAxisIndex:1,
    xAxisIndex:1,
    //箭頭圖片的相對路徑
    symbol:'image://../js/arrow.svg',
    showAllSymbol: true,
    symbolSize:'36',
    //自定義數據類型,指定的箭頭的旋轉角度(因為原箭頭已經有45度,這里的旋轉方向是逆時針的)
    data:[
{ value:[18302.125,55.195312],symbolRotate:405-55.195312 },{ value:[18303.125,54.84375],symbolRotate:405-54.84375 },
{ value:[18304.125,54.84375],symbolRotate:405-54.84375 },{ value:[18305.125,55.195312],symbolRotate:405-55.195312 },
{ value:[18306.125,54.84375],symbolRotate:405-54.84375 }
    ]
  },
   .... // 其他參數
],

• 讓tooltip的浮動窗固定位置，並且讓箭頭顯示在浮動窗的HEAD參數前。

tooltip: {
  trigger: 'axis',
  axisPointer: { type: 'line',lineStyle:{ type:'dashed'} },
  //固定tooltip位置
  position: function (pos, params, el, elRect, size) {
    var obj = {top: 40};
    obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 50;
    return obj;
  },
  //重新定義tooltip中的內容
  formatter: function(params) {
   var htmlStr = '';
   htmlStr += '<div>';
   frame=0;
   for(var i=0,j=params.length;i<j;i++){
     if (params[i].value[0] != frame) {
       if (frame!=0) htmlStr += ' <br/>';
       htmlStr += ' <span style="color:#fff;">' + params[i].value[0] + '</span><br/> ';
       frame=params[i].value[0];
     }
     if (params[i].seriesName=='HEAD') {
       // transform:rotate是順時針轉的
       htmlStr += '<img src="../js/arrow.svg" style="width:30px;height:30px;transform:rotate('+(params[i].value[1]-45)+'deg);" />';
     } else {
       //前面的原點和他的顏色
        htmlStr += '<span style="width: 10px;height: 10px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span>';
     }
     htmlStr += ' <span style="color:#fff;">' + params[i].seriesName + ':</span>';
     htmlStr += ' <span style="color:#fff;">' + params[i].value[1] + '</span><br/>';
   }
   htmlStr += '</div>';
   return  htmlStr;
  }
 },

• 兩個 grid 通過 x 軸關聯起來。

axisPointer: { link: { xAxisIndex: 'all' } },

• 加上縮放控件，同時支持鼠標滾輪縮放。並讓兩個 grid 聯動縮放。

dataZoom:[
  { type:'slider', xAxisIndex:[0,1], filterMode:'none', minValueSpan:3, showDetail:false, bottom:-3, },
  { type:'inside', xAxisIndex:[0,1], filterMode:'none', minValueSpan:3, showDetail:false, bottom:-3, }
]

---

轉載注明來源: 本文鏈接 來自osnosn的博客.