diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js index c368c32b..d3447d6e 100644 --- a/report-ui/src/mixins/queryform.js +++ b/report-ui/src/mixins/queryform.js @@ -125,7 +125,9 @@ export default { return this.gaugeFn(params.chartProperties, data); } else if (chartType == "widget-text") { return this.widgettext(params.chartProperties, data) - } else { + } else if (chartType == "widget-barstack") { + return this.barStackFn(params.chartProperties, data) + }else{ return data } }, @@ -156,6 +158,10 @@ export default { ananysicData["xAxis"] = xAxisList; ananysicData["series"] = series; return ananysicData; + }, + //柱状堆叠图 + barStackFn(chartProperties, data){ + }, // 饼图、漏斗图 piechartFn(chartProperties, data) { diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 3f6aaef9..f15b19e6 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -5665,6 +5665,635 @@ const widgetTools = [ ] } }, + { + code: 'widgetBarStackChart', + type: 'chart', + label: '柱状堆叠图', + icon: 'iconzhuzhuangtu', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '柱状堆叠图', + }, + { + type: 'el-switch', + label: '竖展示', + name: 'verticalShow', + required: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'background', + required: false, + placeholder: '', + value: '' + }, + [ + { + name: '柱体设置', + list: [ + { + type: 'el-slider', + label: '最大宽度', + name: 'maxWidth', + required: false, + placeholder: '', + value: 10, + }, + { + type: 'el-slider', + label: '圆角', + name: 'radius', + require: false, + placeholder: '', + value: 5, + }, + { + type: 'el-slider', + label: '最小高度', + name: 'minHeight', + require: false, + placeholder: '', + value: 0, + }, + ], + }, + { + name: '标题设置', + list: [ + { + type: 'el-switch', + label: '标题', + name: 'isNoTitle', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '标题', + name: 'titleText', + required: false, + placeholder: '', + value: '', + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'textColor', + required: false, + placeholder: '', + value: '#FFD700' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'textFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + type: 'el-select', + label: '字体位置', + name: 'textAlign', + required: false, + placeholder: '', + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'center' + }, + { + type: 'el-input-text', + label: '副标题', + name: 'subText', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: 'rgba(30, 144, 255, 1)' + }, + { + type: 'el-input-text', + label: '字体粗细', + name: 'subTextFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 + }, + ], + }, + { + name: 'X轴设置', + list: [ + { + type: 'el-input-text', + label: '名称', + name: 'xName', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '显示', + name: 'hideX', + required: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'xNameColor', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'xNameFontSize', + required: false, + placeholder: '', + value: 12 + }, + { + type: 'el-slider', + label: '文字角度', + name: 'textAngle', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-input-number', + label: '文字间隔', + name: 'textInterval', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalX', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '颜色', + name: 'Xcolor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字号', + name: 'fontSizeX', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineX', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorX', + required: false, + placeholder: '', + value: '#fff', + + } + ], + }, + { + name: 'Y轴设置', + list: [ + { + type: 'el-input-text', + label: '名称', + name: 'textNameY', + require: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '显示', + name: 'isShowY', + require: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'NameColorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'NameFontSizeY', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalY', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '颜色', + name: 'colorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字号', + name: 'fontSizeY', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + }, { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineY', + require: false, + placeholder: '', + value: false, + }, { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorY', + required: false, + placeholder: '', + value: '#fff', + + } + ], + }, + { + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'fontSize', + required: false, + placeholder: '', + value: 14 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'fontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + ], + }, + { + name: '提示语设置', + list: [ + { + type: 'el-input-number', + label: '字体大小', + name: 'fontSize', + required: false, + placeholder: '', + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lineColor', + required: false, + placeholder: '', + }, + ], + }, + { + name: '坐标轴边距设置', + list: [ + { + type: 'el-slider', + label: '左边距(像素)', + name: 'marginLeft', + required: false, + placeholder: '', + value: 10, + }, { + type: 'el-slider', + label: '顶边距(像素)', + name: 'marginTop', + required: false, + placeholder: '', + value: 50, + }, { + type: 'el-slider', + label: '右边距(像素)', + name: 'marginRight', + required: false, + placeholder: '', + value: 40, + }, { + type: 'el-slider', + label: '底边距(像素)', + name: 'marginBottom', + required: false, + placeholder: '', + value: 10, + }, + ], + }, + { + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lengedColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'lengedFontSize', + required: false, + placeholder: '', + value: 16, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'lengedWidth', + required: false, + placeholder: '', + value: 15, + }, + { + type: 'el-select', + label: '横向位置', + name: 'lateralPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: '' + }, + { + type: 'el-select', + label: '纵向位置', + name: 'longitudinalPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'top', name: '顶部'}, + {code: 'bottom', name: '底部'}, + ], + value: '' + }, + { + type: 'el-select', + label: '布局前置', + name: 'layoutFront', + required: false, + placeholder: '', + selectOptions: [ + {code: 'vertical', name: '竖排'}, + {code: 'horizontal', name: '横排'}, + ], + value: '' + }, + ], + }, + { + name: '自定义配色', + list: [ + { + type: 'customColor', + label: '', + name: 'customColor', + required: false, + value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}], + }, + ], + }, + ], + ], + // 数据 + data: [ + { + type: 'el-radio-group', + label: '数据类型', + name: 'dataType', + require: false, + placeholder: '', + selectValue: true, + selectOptions: [ + { + code: 'staticData', + name: '静态数据', + }, + { + code: 'dynamicData', + name: '动态数据', + }, + ], + value: 'staticData', + }, + { + type: 'el-input-number', + label: '刷新时间(毫秒)', + name: 'refreshTime', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + value: 5000 + }, + { + type: 'el-button', + label: '静态数据', + name: 'staticData', + required: false, + placeholder: 'px', + relactiveDom: 'dataType', + relactiveDomValue: 'staticData', + value: [ + {"axis":"2021-07-25","name":"A","data":"12"}, + {"axis":"2021-07-25","name":"B","data":"20"}, + {"axis":"2021-07-26","name":"B","data":"5"}, + {"axis":"2021-07-26","name":"C","data":"20"}, + {"axis":"2021-07-27","name":"A","data":"15"}, + {"axis":"2021-07-27","name":"B","data":"30"}, + {"axis":"2021-07-27","name":"C","data":"5"} + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: 'px', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + chartType: 'widget-barstack', + value: '', + }, + ], + // 坐标 + position: [ + { + type: 'el-input-number', + label: '左边距', + name: 'left', + required: false, + placeholder: 'px', + value: 0, + }, + { + type: 'el-input-number', + label: '上边距', + name: 'top', + required: false, + placeholder: 'px', + value: 0, + }, + { + type: 'el-input-number', + label: '宽度', + name: 'width', + required: false, + placeholder: '该容器在1920px大屏中的宽度', + value: 400, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 200, + }, + ], + }, + }, ] const getToolByCode = function (code) { diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue new file mode 100644 index 00000000..41eff3ec --- /dev/null +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue @@ -0,0 +1,397 @@ +<template> + <div :style="styleObj"> + <v-chart :options="options" autoresize/> + </div> +</template> + +<script> +export default { + name: "WidgetBarStackchart", + components: {}, + props: { + value: Object, + ispreview: Boolean + }, + data() { + return { + options: { + grid: {}, + legend: { + textStyle: { + color: "#fff" + } + }, + xAxis: { + type: "category", + data: [], + axisLabel: { + show: true, + textStyle: { + color: "#fff" + } + } + }, + yAxis: { + type: "value", + data: [], + axisLabel: { + show: true, + textStyle: { + color: "#fff" + } + } + }, + series: [ + { + data: [], + name: '', + type: "bar", + barGap: "0%", + itemStyle: { + borderRadius: null + } + } + ] + }, + optionsStyle: {}, // 样式 + optionsData: {}, // 数据 + optionsSetup: {}, + flagInter: null + }; + }, + computed: { + styleObj() { + return { + position: this.ispreview ? "absolute" : "static", + width: this.optionsStyle.width + "px", + height: this.optionsStyle.height + "px", + left: this.optionsStyle.left + "px", + top: this.optionsStyle.top + "px", + background: this.optionsSetup.background + }; + } + }, + watch: { + value: { + handler(val) { + this.optionsStyle = val.position; + this.optionsData = val.data; + this.optionsCollapse = val.setup; + this.optionsSetup = val.setup; + this.editorOptions(); + }, + deep: true + } + }, + mounted() { + this.optionsStyle = this.value.position; + this.optionsData = this.value.data; + this.optionsCollapse = this.value.setup; + this.optionsSetup = this.value.setup; + this.editorOptions(); + }, + methods: { + // 修改图标options属性 + editorOptions() { + this.setOptionsTitle(); + //this.setOptionsX(); + //this.setOptionsY(); + this.setOptionsTop(); + this.setOptionsTooltip(); + this.setOptionsMargin(); + //this.setOptionsLegend(); + //this.setOptionsColor(); + this.setOptionsData(); + }, + // 标题修改 + setOptionsTitle() { + const optionsCollapse = this.optionsSetup; + const title = {}; + title.text = optionsCollapse.titleText; + title.show = optionsCollapse.isNoTitle; + title.left = optionsCollapse.textAlign; + title.textStyle = { + color: optionsCollapse.textColor, + fontSize: optionsCollapse.textFontSize, + fontWeight: optionsCollapse.textFontWeight + }; + title.subtext = optionsCollapse.subText; + title.subtextStyle = { + color: optionsCollapse.subTextColor, + fontWeight: optionsCollapse.subTextFontWeight, + fontSize: optionsCollapse.subTextFontSize + }; + + this.options.title = title; + }, + // X轴设置 + setOptionsX() { + const optionsCollapse = this.optionsSetup; + const xAxis = { + type: "category", + show: optionsCollapse.hideX, // 坐标轴是否显示 + name: optionsCollapse.xName, // 坐标轴名称 + nameTextStyle: { + color: optionsCollapse.xNameColor, + fontSize: optionsCollapse.xNameFontSize + }, + nameRotate: optionsCollapse.textAngle, // 文字角度 + inverse: optionsCollapse.reversalX, // 轴反转 + axisLabel: { + show: true, + interval: optionsCollapse.textInterval, // 文字角度 + rotate: optionsCollapse.textAngle, // 文字角度 + textStyle: { + color: optionsCollapse.Xcolor, // x轴 坐标文字颜色 + fontSize: optionsCollapse.fontSizeX + } + }, + axisLine: { + show: true, + lineStyle: { + color: optionsCollapse.lineColorX + } + }, + splitLine: { + show: optionsCollapse.isShowSplitLineX, + lineStyle: { + color: optionsCollapse.splitLineColorX + } + } + }; + this.options.xAxis = xAxis; + }, + // Y轴设置 + setOptionsY() { + const optionsCollapse = this.optionsSetup; + const yAxis = { + type: "value", + show: optionsCollapse.isShowY, // 坐标轴是否显示 + name: optionsCollapse.textNameY, // 坐标轴名称 + nameTextStyle: { + color: optionsCollapse.NameColorY, + fontSize: optionsCollapse.NameFontSizeY + }, + inverse: optionsCollapse.reversalY, // y轴反转 + axisLabel: { + show: true, + textStyle: { + color: optionsCollapse.colorY, // y轴 坐标文字颜色 + fontSize: optionsCollapse.fontSizeY + } + }, + axisLine: { + show: true, + lineStyle: { + color: optionsCollapse.lineColorY + } + }, + splitLine: { + show: optionsCollapse.isShowSplitLineY, + lineStyle: { + color: optionsCollapse.splitLineColorY + } + } + }; + this.options.yAxis = yAxis; + }, + // 数值设定 or 柱体设置 + setOptionsTop() { + const optionsCollapse = this.optionsSetup; + const series = this.options.series; + + for (const key in series) { + if (series[key].type == "bar") { + series[key].label = { + show: optionsCollapse.isShow, + position: "top", + distance: 10, + fontSize: optionsCollapse.fontSize, + color: optionsCollapse.subTextColor, + fontWeight: optionsCollapse.fontWeight + }; + series[key].barWidth = optionsCollapse.maxWidth; + series[key].barMinHeight = optionsCollapse.minHeight; + } + } + this.options.series = series; + }, + // tooltip 设置 + setOptionsTooltip() { + const optionsCollapse = this.optionsSetup; + const tooltip = { + trigger: "item", + show: true, + textStyle: { + color: optionsCollapse.lineColor, + fontSize: optionsCollapse.fontSize + } + }; + this.options.tooltip = tooltip; + }, + // 边距设置 + setOptionsMargin() { + const optionsCollapse = this.optionsSetup; + const grid = { + left: optionsCollapse.marginLeft, + right: optionsCollapse.marginRight, + bottom: optionsCollapse.marginBottom, + top: optionsCollapse.marginTop, + containLabel: true + }; + this.options.grid = grid; + }, + // 图例操作 legend + setOptionsLegend() { + const optionsCollapse = this.optionsSetup; + const legend = this.options.legend; + legend.show = optionsCollapse.isShowLegend; + legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto"; + legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto"; + legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto"; + legend.bottom = + optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto"; + legend.orient = optionsCollapse.layoutFront; + legend.textStyle = { + color: optionsCollapse.lengedColor, + fontSize: optionsCollapse.fontSize + }; + legend.itemWidth = optionsCollapse.lengedWidth; + }, + // 图例颜色修改 + setOptionsColor() { + const optionsCollapse = this.optionsSetup; + const customColor = optionsCollapse.customColor; + if (!customColor) return; + const arrColor = []; + for (let i = 0; i < customColor.length; i++) { + arrColor.push(customColor[i].color); + } + const itemStyle = { + normal: { + color: params => { + return arrColor[params.dataIndex]; + }, + barBorderRadius: optionsCollapse.radius + } + }; + for (const key in this.options.series) { + if (this.options.series[key].type == "bar") { + this.options.series[key].itemStyle = itemStyle; + } + } + this.options = Object.assign({}, this.options); + }, + // 数据解析 + setOptionsData() { + const optionsSetup = this.optionsSetup; + const optionsData = this.optionsData; // 数据类型 静态 or 动态 + optionsData.dataType == "staticData" + ? this.staticDataFn(optionsData.staticData, optionsSetup) + : this.dynamicDataFn( + optionsData.dynamicData, + optionsData.refreshTime, + optionsSetup + ); + }, + //去重 + setUnique(arr) { + let newArr = []; + arr.forEach(item => { + return newArr.includes(item) ? '' : newArr.push(item); + }); + return newArr; + }, + //静态数据 + staticDataFn(val, optionsSetup) { + const series = this.options.series; + let xAxisList = [] + let yAxisList = [] + for (const i in val) { + xAxisList[i] = val[i].axis + yAxisList[i] = val[i].name + } + xAxisList = this.setUnique(xAxisList) // x轴 0725 0726 0727 + yAxisList = this.setUnique(yAxisList) // y轴 A B C + for (const i in yAxisList) { + const data = new Array(xAxisList.length).fill(0) + for (const j in xAxisList) { + for (const k in val) { + if (val[k].name == yAxisList[i]) { // a = a + if (val[k].axis == xAxisList[j]) { // 0725 + data[j] = val[k].data + } + } + } + } + series.push({ + name: yAxisList[i], + type: "bar", + data: data + }) + } + if (optionsSetup.verticalShow) { + this.options.xAxis.data = []; + this.options.yAxis.data = xAxisList; + this.options.xAxis.type = "value"; + this.options.yAxis.type = "category"; + } else { + this.options.xAxis.data = xAxisList; + this.options.yAxis.data = []; + this.options.xAxis.type = "category"; + this.options.yAxis.type = "value"; + } + } + + // 动态数据 + /* dynamicDataFn(val, refreshTime, optionsSetup) { + if (!val) return; + if (this.ispreview) { + this.getEchartData(val, optionsSetup); + this.flagInter = setInterval(() => { + this.getEchartData(val, optionsSetup); + }, refreshTime); + } else { + this.getEchartData(val, optionsSetup); + } + }, + getEchartData(val, optionsSetup) { + const data = this.queryEchartsData(val); + data.then(res => { + this.renderingFn(optionsSetup, res); + }); + }, + renderingFn(optionsSetup, val) { + // x轴 + if (optionsSetup.verticalShow) { + this.options.xAxis.data = []; + this.options.yAxis.data = val.xAxis; + this.options.xAxis.type = "value"; + this.options.yAxis.type = "category"; + } else { + this.options.xAxis.data = val.xAxis; + this.options.yAxis.data = []; + this.options.xAxis.type = "category"; + this.options.yAxis.type = "value"; + } + + // series + const series = this.options.series; + for (const i in series) { + if (series[i].type == "bar") { + series[i].data = val.series[i].data; + } + } + }*/ + } +}; +</script> + +<style scoped lang="scss"> +.echarts { + width: 100%; + height: 100%; + overflow: hidden; +} + +</style> diff --git a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue index 819fc466..cd5b12ed 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue @@ -31,6 +31,7 @@ import widgetTable from "./widgetTable.vue"; import widgetMap from "./widgetMap.vue"; import widgetPiePercentageChart from "./pie/widgetPiePercentageChart"; import widgetAirBubbleMap from "./map/widgetAirBubbleMap"; +import widgetBarStackChart from "./bar/widgetBarStackChart"; export default { name: "WidgetTemp", components: { @@ -53,7 +54,8 @@ export default { widgetTable, widgetMap, widgetPiePercentageChart, - widgetAirBubbleMap + widgetAirBubbleMap, + widgetBarStackChart }, model: { prop: "value", diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue index 890adae2..ef15fc23 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue @@ -41,6 +41,8 @@ import widgetTable from "./widgetTable.vue"; import widgetMap from "./widgetMap.vue"; import widgetPiePercentageChart from "./pie/widgetPiePercentageChart"; import widgetAirBubbleMap from "./map/widgetAirBubbleMap"; +import widgetBarStackChart from "./bar/widgetBarStackChart"; + export default { name: "Widget", components: { @@ -63,7 +65,8 @@ export default { widgetTable, widgetMap, widgetPiePercentageChart, - widgetAirBubbleMap + widgetAirBubbleMap, + widgetBarStackChart }, model: { prop: "value",