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>