web组态,开发仪表组件echarts。
首先我们登陆系统就会看到新增的组件管理选项 如下图:
点击添加组件选择2D组件我们就可以建立一个自己的组件了
《组件设计器》由 基础设置(包括名称 code 类型 状态 icon 次序号 )HTML编辑区域 CSS编辑区域 JS编辑区域 和预览区域组成。
首先我们给组件 起一个‘名字’ 和 ‘code’,在url输入框中可以给组件设置一个icon。点击保存系统会为我们建立一个组件模板。
由于web组态是由vue开发的所以开发组件也需要vue的的基础知识。建议去看下vue的教程及生命周期,以方便开发组件。以下我附上组件代码。
我们就开始设计一个炫酷的按钮作为例子
HTML代码如下:
<a href="#" class="btn123" :style="imrstyle" v-show="controlProp.commProp.visible">{{controlProp.textProp.text}}</a>
这里:
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组态中就可以使用我们自定义的仪表盘组件了!