目前公司需要開發移動端圖表專案，就選用了f2。目前沒在官方例項裡面找到羅盤的例子，就參考了g2的寫了乙個。
import react, from 'react';
import proptypes from 'prop-types';
import immutable from 'immutable';
import f2 from '@antv/f2';
const color = ['#ff5961', '#fabe32', '#1fde44'];
export default class panelchart extends component ,
chartid: ''
};static proptypes = ;
constructor(props) ;
} componentwillreceiveprops(nextprops)
} draw = (chart, panenldataobj) =>
});chart.guide().arc(
});chart.guide().arc(
});chart.guide().arc(
});chart.guide().arc(
});chart.guide().arc(
});// 繪製指標數字
chart.guide().html(
` + ` $
` + ` $$ $
` + '
' });
chart.render();
} changemainchart = (panenldataobj) => = this.props;
const = f2;
let = this.state;
if (!chart) );
shape.registershape('point', 'pointer', );
group.addshape('line', ,
});group.addshape('circle',
});return group;
}});
} else
// 自定義shape 部分
chart.source(panenldataobj.paneldata);
chart.coord('polar', );
chart.tooltip(false);
chart.scale('value', );
chart.axis('1', false);
chart.axis('value',
},tickline: ,
grid: null
});chart.legend(false);
chart.point().position('value*1')
.shape('pointer');
this.setstate();
this.draw(chart, panenldataobj);
} render() = this.props;
return (
);}}
成圖:
注意：
1.paneldata要為number型別，antvf2為固定~3.5.0-beta.3版本，當我^3.5.0-beta.3向上相容新的版本的時候，儀錶盤指標會失效，查到原因是 x1: center.x,y1: center.y,x2: cfg.x,y2: cfg.y,會對應同乙個座標點，導致指標肯定無法顯示了。不知道新的f2版本為啥會出現這個問題~~~~~
2.當你切換多個tab下的羅盤時，會出現羅盤數值會被重複覆蓋的問題，或者是手指觸控螢幕檢視圖示資料，會有閃現的情況發生。都可以用
在此附上f2官網例項
自製環境光監測儀 Part 2 理解與實現ADC
part 1 在lcd上顯示測量值 part 2 理解和實現adc part 3 測量和解析環境光照度 part 4 過零檢測 part 5 使用雙向可控矽調節燈亮度 slstk2000a efm8評估板 simplicity studio整合開發環境 scilab 麵包板 100k電阻 我們製作的...
KD樹 BBF KNN使用C 實現（2）
在上一節中我們講解了kd的構造過程，這裡我們主要講解的kd的搜尋過程，如何查詢距離目標點最近的點。我們先把kd樹的最鄰近搜尋 knn 的 貼上出來 private node kdtreefindnearest node tree,train target else searchnode search...
使用Vue Router 2實現路由功能
注意 vue router 2只適用於vue2.x版本，下面我們是基於vue2.0講的如何使用vue router 2實現路由功能。推薦使用npm安裝。npm install vue router一 使用路由 在main.js中，需要明確安裝路由功能 import vue from vue impo...