Vue.js的带有SVG和Smith图表组件

Vue.js的带有SVG和Smith图表组件

插件名称:vue-smith-chart

发布时间:2020年8月8日

插件作者:germi

官网 演示 GitHub下载

一个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
},
相关插件