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)