|
|
@@ -1,138 +1,128 @@
|
|
|
<template>
|
|
|
- <div class="myChart" ref="myChart" :style="{ height: height + 'px' }"></div>
|
|
|
+ <div class="myChart" ref="myChart" :style="{ height: height + 'px' }"></div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
/**
|
|
|
* 楼层选择具体楼层时展示的图表
|
|
|
*/
|
|
|
-import apiSceneMeeting from "@/api/scene/meeting/apiSceneMeeting";
|
|
|
+import apiWorkMeeting from "@/api/work/apiWorkMeeting";
|
|
|
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- option: {
|
|
|
- color: ["#80B2FF", "#FFDF80"],
|
|
|
- grid: {
|
|
|
- left: "2%", //默认10%
|
|
|
- right: "2%", //默认10%
|
|
|
- bottom: "0%", //默认60
|
|
|
- top: "15%",
|
|
|
- containLabel: true,
|
|
|
- //grid区域是否包含坐标轴的刻度标签
|
|
|
- },
|
|
|
- legend: {
|
|
|
- align: "left",
|
|
|
- top: "5%",
|
|
|
- //itemWidth: 30,
|
|
|
- //itemHeight: 10,
|
|
|
- formatter: (name) => {
|
|
|
- return `{a|${name}} `;
|
|
|
- },
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- data: [
|
|
|
- "4月1日",
|
|
|
- "4月2日",
|
|
|
- "4月3日",
|
|
|
- "4月4日",
|
|
|
- "4月5日",
|
|
|
- "4月6日",
|
|
|
- "4月7日",
|
|
|
- "4月8日",
|
|
|
- "4月9日",
|
|
|
- "4月10日",
|
|
|
- "4月11日",
|
|
|
- "4月12日",
|
|
|
- ],
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- name: "使用时长(h)",
|
|
|
- type: "value",
|
|
|
- nameTextStyle: {
|
|
|
- padding: [0, 20, 0, 0],
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: "#e8e8e8",
|
|
|
- },
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: "#233653",
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- type: "shadow",
|
|
|
- },
|
|
|
- textStyle: {
|
|
|
- color: "#fff",
|
|
|
- align: "left",
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- //x坐标轴轴线
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- //x坐标轴轴线样式
|
|
|
- color: "#000", //'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ seriesObj: {
|
|
|
+ data: [],
|
|
|
+ type: "bar",
|
|
|
+ stack: "A",
|
|
|
+ barWidth: "30px",
|
|
|
+ backgroundStyle: {
|
|
|
+ color: "rgba(180, 180, 180, 0.2)",
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- backgroundColor: "rgba(0,0,0,0.8)",
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: [32, 39, 54, 55, 101, 76, 60, 42, 36, 57, 40, 85],
|
|
|
- type: "bar",
|
|
|
- stack: "A",
|
|
|
- barWidth: "30px",
|
|
|
- backgroundStyle: {
|
|
|
- color: "rgba(180, 180, 180, 0.2)",
|
|
|
+ option: {
|
|
|
+ color: ["#80B2FF", "#FFDF80"],
|
|
|
+ grid: {
|
|
|
+ left: '2%', //默认10%
|
|
|
+ right: '3%', //默认10%
|
|
|
+ bottom: '20px', //默认60
|
|
|
+ top: '60px',
|
|
|
+ containLabel: true
|
|
|
+ //grid区域是否包含坐标轴的刻度标签
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ name: "使用时长(h)",
|
|
|
+ type: "value",
|
|
|
+ nameTextStyle: {
|
|
|
+ padding: [0, 20, 0, 0],
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#e8e8e8",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#233653",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ dataZoom: this.$constant.ECHARTS_OPTION_DATAZOOM,
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ align: "left",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ //x坐标轴轴线
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ //x坐标轴轴线样式
|
|
|
+ color: "#000", //'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(0,0,0,0.8)",
|
|
|
+ },
|
|
|
+ series: [],
|
|
|
},
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- props: {
|
|
|
- height: Number,
|
|
|
- queryData: Object,
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.init();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- let chart = this.$echarts.init(this.$refs.myChart);
|
|
|
- this.chart = chart;
|
|
|
- this.$util.chartsResize(this.chart);
|
|
|
- chart.setOption(this.option);
|
|
|
- this.$store.loadingStore().loadingWithApi(this.getData());
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ height: Number,
|
|
|
+ queryData: Object,
|
|
|
},
|
|
|
- getData() {
|
|
|
- this.loading = true;
|
|
|
- console.log(this.queryData.timeRange, "会议开始和结束时间");
|
|
|
- return apiSceneMeeting
|
|
|
- .getMeetingMinutes(this.queryData.timeRange)
|
|
|
- .then((res) => {
|
|
|
- let data = this.$util.dataUtil.covertDataToEcharts(res, ["minutes"]);
|
|
|
- console.log(data, "会议时间");
|
|
|
- this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data);
|
|
|
- this.loading = false;
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- this.loading = false;
|
|
|
- });
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ let chart = this.$echarts.init(this.$refs.myChart);
|
|
|
+ this.chart = chart;
|
|
|
+ this.$util.chartsResize(this.chart);
|
|
|
+ chart.setOption(this.option);
|
|
|
+ this.$store.loadingStore().loadingWithApi(this.getData());
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ this.loading = true;
|
|
|
+ return apiWorkMeeting
|
|
|
+ .getMeetingHours(this.queryData)
|
|
|
+ .then((res) => {
|
|
|
+ let arr = [];
|
|
|
+ if (res.length > 0) {
|
|
|
+ this.option.series = []
|
|
|
+ let o = res[0].jsonObject
|
|
|
+ for (const oKey in o) {
|
|
|
+ arr.push(oKey);
|
|
|
+ let seriesObj = JSON.parse(JSON.stringify(this.seriesObj));
|
|
|
+ seriesObj['name'] = oKey;
|
|
|
+ this.option.series.push(seriesObj)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let data = this.$util.dataUtil.covertDataToEcharts(res, arr);
|
|
|
+ this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data);
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
};
|
|
|
</script>
|
|
|
|
tianyabing