cola-designer新增控件

cpt-test-text-option.vue

<template>
  <el-form label-width="100px" size="mini">
    <el-form-item label="标题">
      <el-input v-model="attribute.title"/>
    </el-form-item>
    <el-form-item label="标题颜色">
      <el-color-picker v-model="attribute.titleTextColor" show-alpha/>
    </el-form-item>
    <el-form-item label="副标题">
      <el-input v-model="attribute.subtext"/>
    </el-form-item>
    <el-form-item label="副标题颜色">
      <el-color-picker v-model="attribute.subtextColor" show-alpha/>
    </el-form-item>
    <el-form-item label="标题位置(左)">
      <el-input v-model="attribute.titleLeft"/>
    </el-form-item>
    <el-form-item label="标题位置(上)">
      <el-input v-model="attribute.titleTop"/>
    </el-form-item>
    <el-form-item label="x轴文字">
      <el-switch v-model="attribute.xLabelShow" active-text="开" inactive-text="关"/>
    </el-form-item>
    <el-form-item label="x轴字体颜色">
      <el-color-picker v-model="attribute.xLabelColor" show-alpha/>
    </el-form-item>
    <el-form-item label="x轴线显示">
      <el-switch v-model="attribute.xLineShow" active-text="开" inactive-text="关"/>
    </el-form-item>
    <el-form-item label="x轴线颜色">
      <el-color-picker v-model="attribute.xLineColor" show-alpha/>
    </el-form-item>
    <el-form-item label="x轴刻度线">
      <el-switch v-model="attribute.xTickShow" active-text="开" inactive-text="关"/>
    </el-form-item>
    <el-form-item label="y轴文字">
      <el-switch v-model="attribute.yLabelShow" active-text="开" inactive-text="关"/>
    </el-form-item>
    <el-form-item label="y轴字体颜色">
      <el-color-picker v-model="attribute.yLabelColor" show-alpha/>
    </el-form-item>
    <el-form-item label="y轴线显示">
      <el-switch v-model="attribute.yLineShow" active-text="开" inactive-text="关"/>
    </el-form-item>
    <el-form-item label="y轴颜色">
      <el-color-picker v-model="attribute.yLineColor" show-alpha/>
    </el-form-item>
    <el-form-item label="y轴网格线">
      <el-switch v-model="attribute.yGridLineShow" active-text="开" inactive-text="关"/>
    </el-form-item>
    <el-form-item label="y轴刻度线">
      <el-switch v-model="attribute.yTickShow" active-text="开" inactive-text="关"/>
    </el-form-item>
    <el-form-item label="平滑曲线">
      <el-switch v-model="attribute.smooth" active-text="开" inactive-text="关"/>
    </el-form-item>

    <el-form-item label="渐变颜色1">
      <el-color-picker v-model="attribute.areaColor1" show-alpha/>
    </el-form-item>
    <el-form-item label="渐变颜色2">
      <el-color-picker v-model="attribute.areaColor2" show-alpha/>
    </el-form-item>
    <el-form-item label="渐变颜色3">
      <el-color-picker v-model="attribute.areaColor3" show-alpha/>
    </el-form-item>
  </el-form>
</template>
  
  <script>
  const dataText = JSON.stringify({
    xData:"Mon,Tue,Wed,Thu,Fri,Sat,Sun",
    yData: "120,200,150,80,70,110,130"
})

  export default {
    name: "cpt-test-text-option",
    props: { attribute: Object },
    cptDataForm:{
        dataSource: 1, pollTime: 0,
        dataText: dataText,
    },
    attribute:{
        title: '一天用电量分布',subtext:'纯属虚构',titleLeft: 'center', titleTop: 10,
        subtextColor: '#aaa',yTickShow: true,yGridLineShow:false,
        xLineShow: true, yLineShow: true, xTickShow:true,
        xLabelShow: true, yLabelShow: true,
        lineColor: '#409eff',xLabelColor:'#eee',xLineColor:'#eee',titleTextColor:'#ccc',
        yLabelColor:'#eee',yLineColor:'#eee',smooth:false,
        areaColor1:'rgba(80,141,255,0.39)',areaColor2:'rgba(56,155,255,0.25)',areaColor3:'rgba(38,197,254,0.00)',
    }
  }
  </script>
  

cpt-test-text.vue

<template>
    <div :id="uuid" style="width: 100%;height:100%;"></div>
  </template>
  
  <script>
  import {getDataJson, pollingRefresh} from "@/utils/refreshCptData";

    export default {
    name: "cpt-test-text",
    props: {
        option: Object,
        width: Number,
        height: Number,
    },
  data(){
    return {
      uuid:'',
      chartOption:{},
      chart:undefined,
      cptData:[]
    }
  },
  watch:{
    'option.attribute':{
      handler(newObj) {
        this.loadChart(newObj);
      },
      deep: true//深度监听
    },
    width(){
      this.chart.resize();
    },
    height(){
      this.chart.resize();
    }
  },
  created() {
    this.uuid = require('uuid').v1();
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.uuid));
    this.refreshCptData();
  },
  methods:{
    refreshCptData(){
      pollingRefresh(this.uuid, this.option.cptDataForm, this.loadData)
    },
    loadData() {
      getDataJson(this.option.cptDataForm).then(res => {
        this.cptData = res;
        this.loadChart(this.option.attribute);
      });
    },
    loadChart(attribute){
      const that = this;
      that.chartOption = {
  title: {
    text: attribute.title,
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
      that.chart.setOption(that.chartOption);
    }
  }
}
</script>

<style scoped>

</style>

自定义组件 | Cola-Designer (gitee.io)