vue-novnc-sedu

VUE Echarts 基础组件

支持多个图表共存

//安装依赖
npm i -S @novnc/novnc
npm i -S vue-novnc-sedu
//运行项目
npm run dev

调用

main.js:   加入
  import seduVnc from 'vue-novnc-sedu'

  Vue.use(seduVnc);

---

具体视图：
<template>
    <!-- vnc 插件 -->
    <sedu-vnc nodeID="aaaa"
              :configData="option1" />
</template>

<script>
export default {
  data () {
    return {
      option1:{
          host: '192.168.200.15',
          port : '8888',
          password : 'ssssss',
          path :  "websockify\/?vm_uuid=532922ca-92ca-4556-b963-22f4de627469",
      }
    }
  },
  created(){
    setTimeout(() => {
      this.option1 = {
        title: { text: "ECharts Gauge" },
        tooltip: { formatter: "{a} <br/>{b} : {c}%" },
        series: [
          {
            name: "业务指标",
            type: "gauge",
            detail: { formatter: "{value}%" },
            data: [{ value: 50 }]
          }
        ]
      };
      }, 3000);
  }
}
</script>

参数

props: {
    // 自定义class
   lineStyle: {
      type: String,
      default: 'width:600px;height:450px;'
    },
    //自定义class
    className: {
      type: String,
      default: ''
    },
    //传参数配置
    configData: {
      type: Object,
      required: true
    },
    //domid
    nodeID: {
      type: String,
      required: true
    }