web組態，開發儀表元件echarts。

首先我們登陸系統就會看到新增的元件管理選項 如下圖：

《元件設計器》由 基礎設定（包括名稱 code 型別 狀態 icon 次序號 ）HTML編輯區域 CSS編輯區域 JS編輯區域 和預覽區域組成。

由於web組態是由vue開發的所以開發元件也需要vue的的基礎知識。建議去看下vue的教程及生命週期，以方便開發元件。以下我附上元件程式碼。

HTML程式碼如下：

style="imrstyle"：樣式 在web組態設計器中呈現的樣式

v-show="controlProp.commProp.visible"：可見性 在web組態設計器中可實現顯示或閃爍

{{controlProp.textProp.text}}：文字 對應元件的文字屬性

更多屬性請參考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7

JS程式碼如下：

export default {  props: {    controlProp: Object,    controlImports: Object,    previewId: String // 頁面容器的id,若控制元件在頁面容器中 用來區分生成canvas的元素  },  data() {    return {      myCharts: null,    }  },  mounted() {    let echarts = this.controlImports['echarts']    // 基於準備好的dom，初始化echarts例項    let box    if (this.previewId) {      box = $('.' + this.previewId + ' #' + this.controlProp.commProp.id)[0]    } else {      box = $('#' + this.controlProp.commProp.id)[0]    }    this.myCharts = echarts.init(box)    this.initCharts()  },  computed: {    imrstyle: function () {      return {        position: 'absolute',        width: this.controlProp.commProp.width + 'px',        height: this.controlProp.commProp.height + 'px',        // left: this.controlProp.commProp.x + 'px',        // top: this.controlProp.commProp.y + 'px',        'background-color': this.controlProp.commProp.backgroundColor,        'border': this.controlProp.commProp.borderwidth + 'px ' + this.controlProp.commProp.borderstyle + ' ' + this.controlProp.commProp.bordercolor,        'animation': this.controlProp.commProp.isFlash ? 'myfirst 1s infinite' : '',        '-webkit-animation': this.controlProp.commProp.isFlash ? 'myfirst 1s infinite' : '',        'transform': 'rotate(' + this.controlProp.commProp.angle + 'deg)',        'box-shadow': this.controlProp.spProp.isShowShadow ? '10px 0px 10px rgba(0,0,0,0.9)' : 'none'      }    }  },  watch: {    'controlProp.commProp.width': {      handler: function () {        this.myCharts.resize()      }    },    'controlProp.commProp.height': {      handler: function () {        this.myCharts.resize()      }    },    'controlProp.spProp.echartsOption'(val) {      this.initCharts()    },    'controlProp.spProp.value'(val) {      this.setValue()    },    'controlProp.spProp.name'(val) {      this.setValue()    },    'controlProp.spProp.max'(val) {      this.setValue()    },  },  created() {    console.log('echarts')    this.controlProp.spProp.update = this.update  },  methods: {    initCharts() {      //準備資料      let category = [{        name: this.controlProp.spProp.name,        value: this.controlProp.spProp.value      }];      let total = this.controlProp.spProp.max; //資料總數      let datas = [];      category.forEach(value => {        datas.push(value.value);      });      // 使用剛指定的配置項和資料顯示圖表。      let option = eval('(' + this.controlProp.spProp.echartsOption + ')')      option.xAxis.max = total      option.yAxis.data = category      option.series[0].data = category      option.series[1].data = [total, total, total, total]      option.series[1].symbolBoundingData = total      option.series[2].data = datas      option.series[2].label.normal.formatter = category[0].value + '%'      option.series[2].symbolBoundingData = total      option.series[3].data = [total, total, total, total]      option.series[4].data = [total, total, total, total]      this.myCharts.setOption(option, true);    },    setValue() {      //準備資料      let category = [{        name: this.controlProp.spProp.name,        value: this.controlProp.spProp.value      }];      let total = this.controlProp.spProp.max; //資料總數      let datas = [];      category.forEach(value => {        datas.push(value.value);      });      // 使用剛指定的配置項和資料顯示圖表。      let option = eval('(' + this.controlProp.spProp.echartsOption + ')')      option.xAxis.max = total      option.yAxis.data = category      option.series[0].data = category      option.series[1].data = [total, total, total, total]      option.series[1].symbolBoundingData = total      option.series[2].data = datas      option.series[2].label.normal.formatter = category[0].value + '%'      option.series[2].symbolBoundingData = total      option.series[3].data = [total, total, total, total]      option.series[4].data = [total, total, total, total]      //更新echarts      this.myCharts.setOption(option);    },    update() {      this.initCharts()    },    initImports() {      return {        'echarts': 'echarts'      }    },    initProp() {      return {        commProp: { // 基礎屬性          width: 600,          height: 60        },        textProp: {          padding: 0,          margin: 0        },        spProp: { // 特殊屬性          name: '進度',          value: 80,          max:100,          echartsOption: `{              xAxis: {                  max: total,                  splitLine: {                      show: false                  },                  axisLine: {                      show: false                  },                  axisLabel: {                      show: false                  },                  axisTick: {                      show: false                  }              },              grid: {                  left: 50,                  top: 0, //設定條形圖的邊距                  right: 50,                  bottom: 0              },              yAxis: [{                  type: "category",                  inverse: false,                  data: category,                  axisLine: {                      show: false                  },                  axisTick: {                      show: false                  },                  axisLabel: {                      show: false                  }              }],              series: [{                      //內                      type: "bar",                      barWidth: 28,                      legendHoverLink: false,                      silent: true,                      itemStyle: {                          color: {                              type: "linear",                              x: 0,                              y: 0,                              x2: 1,                              y2: 0,                              colorStops: [{                                      offset: 0,                                      color: "#0097ff" // 0% 處的顏色                                  },                                  {                                      offset: 0.4,                                      color: "#6dffe1" // 100% 處的顏色                                  },                                  {                                      offset: 0.8,                                      color: "#9d6fff" // 100% 處的顏色                                  }                              ]                          }                      },                      label: {                          normal: {                              show: true,                              position: "left",                              formatter: "{b}",                              offset: [0, 2], //設定右邊資料位置                              textStyle: {                                  color: "#0097ff",                                  fontSize: 14,                                  fontWeight: 600                              }                          }                      },                      data: category,                      z: 1,                      animationEasing: "elasticOut"                  },                  {                      // 分隔                      type: "pictorialBar",                      itemStyle: {                          normal: {                              color: "#07314a"                          }                      },                      symbolRepeat: "fixed",                      symbolMargin: 2,                      symbol: "rect",                      symbolClip: true,                      symbolSize: [3, 28],                      symbolPosition: "start",                      symbolOffset: [3, -4],                      symbolBoundingData: total,                      data: [total, total, total, total],                      z: 2,                      animationEasing: "elasticOut",                  },                  {                      //外邊框                      type: "pictorialBar",                      symbol: "rect",                      symbolBoundingData: total,                      itemStyle: {                          normal: {                              color: "none"                          }                      },                      label: {                          normal: {                              formatter: "80"+"%",                              show: true,                              position: "right",                              offset: [5, -3], //設定右邊資料位置                              textStyle: {                                  color: "#0097ff",                                  fontSize: 14,                                  fontWeight: 600                              }                          }                      },                      data: datas,                      z: 0,                      animationEasing: "elasticOut"                  },                  {                      name: "外框",                      type: "bar",                      barGap: "-130%", // 設定外框粗細                      data: [total, total, total, total],                      barWidth: 45,                      itemStyle: {                          normal: {                              barBorderRadius: [5, 5, 5, 5],                              color: "#07314a", // 填充色                              barBorderColor: "#1588D1", // 邊框色                              barBorderWidth: 3, // 邊框寬度                          }                      },                      z: 0                  },                  {                      type: 'scatter',                      name: '條形',                      symbol: 'roundRect',                      symbolSize: [7,20],                      symbolOffset: [3, -5],                      symbolKeepAspect: true,                      itemStyle: {                          normal: {                              color: "#1588D1"                          }                      },                      data: [total, total, total, total],                  }              ]          }`,          update: null        },        spPropSetting: [ // 特殊屬性          { label: '名稱', type: 'textinput', group: '特殊', valuename: 'name' },          { label: '數值', type: 'numberinput', group: '特殊', valuename: 'value' },          { label: '最大值', type: 'numberinput', group: '特殊', valuename: 'max' },        ]      }    }  }}

這裡需要注意：

initProp()：方法中實現對元件的 基礎屬性 文字屬性 特殊屬性的初始化配置

watch：中監聽'controlProp.spProp.value'屬性，這樣就可以使用web組態中的變數繫結功能，實現實時顯示數值。

更多屬性配置參考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7

這樣在我們的web組態中就可以使用我們自定義的儀表盤元件了！