一个Vue.js图表库,用于使用SVG 呈现史密斯圆图。
1.导入并注册组件。
new Vue({
components: {
smithChart
}
})
2.将“史密斯圆图”组件添加到模板。
<smith-chart></smith-chart>
3.在史密斯圆图上绘制点和弧。
<smith-chart>
<sm-point :res="0" :react="0" fill="red"></sm-point>
<sm-point :res="1" :react="0" fill="blue"></sm-point>
<sm-point :res="2" :react="0" fill="green"></sm-point>
<sm-point :res="3" :react="1" fill="purple"></sm-point>
<sm-point :res="0.6" :react="0.6" fill="rgba(123,345,2,0.5)" r="10"></sm-point>
</smith-chart>
<smith-chart>
<sm-res-circle
:res="2"
fill="rgba(0,0,255,0.5)"
></sm-res-circle>
<sm-res-circle
:res="0.5"
:crop="1"
fill="rgba(255,0,255,0.5)"
stroke-width="2"
stroke="black"
></sm-res-circle>
<sm-res-circle
:res="0.2"
:crop="0.4"
fill="none"
stroke-width="5"
stroke="#FF4136"
></sm-res-circle>
</smith-chart>
4.所有默认选项。
radius: {
type: Number,
default: 400
},
resistanceLabels: {
type: Boolean,
default: true
},
reactanceLabels: {
type: Boolean,
default: true
},
labelRings: {
type: Boolean,
default: true
},
translateX: {
type: Number,
default: 100
},
rotate: {
type: Number,
default: 0
},