diff --git a/src/views/sevenLargeScreen/laborManagement/horizontaL.vue b/src/views/sevenLargeScreen/laborManagement/horizontaL.vue index 619c88c..89f9a66 100644 --- a/src/views/sevenLargeScreen/laborManagement/horizontaL.vue +++ b/src/views/sevenLargeScreen/laborManagement/horizontaL.vue @@ -32,43 +32,22 @@ const form = ref({ }); let xData = ref([] as any); let yData = ref([] as any); -const option = reactive({ - grid: { - left: "5%", - right: "5%", - bottom: "3%", - top: "18%", - containLabel: true - }, - // backgroundColor: "#101129", - xAxis: { - show: true, - type: "value", - max: 100, - axisLabel: { - show: true, - textStyle: { - fontSize: "12", - color: "#fff" - } +let option = ref(null as any); + +function initOption() { + option.value = { + grid: { + left: "5%", + right: "5%", + bottom: "3%", + top: "18%", + containLabel: true }, - axisLine: { + // backgroundColor: "#101129", + xAxis: { show: true, - lineStyle: { - color: "#14336b" - } - }, - splitLine: { - show: false, - lineStyle: { - color: "#14336b" - } - } - }, - yAxis: [ - { - type: "category", - inverse: true, + type: "value", + max: 100, axisLabel: { show: true, textStyle: { @@ -76,113 +55,141 @@ const option = reactive({ color: "#fff" } }, - - axisTick: { - show: false - }, axisLine: { + show: true, lineStyle: { color: "#14336b" } }, - data: yData.value - }, - { - axisTick: "none", - axisLine: "none", - axisLabel: { - textStyle: { - color: "#fff", - fontSize: "12" - } - }, - data: [] - }, - { - type: "category", - inverse: true, - axisTick: "none", - axisLine: "none", - show: true - // data: [], - } - ], - series: [ - { - type: "bar", - showBackground: true, - backgroundStyle: { - color: "#14346c", - borderRadius: 30 - }, - label: { + splitLine: { show: false, - // position:'right', - // formatter:'{@score}%', - textStyle: { - color: "#03fcfe", - fontSize: "12" + lineStyle: { + color: "#14336b" } - }, - itemStyle: { - normal: { - barBorderRadius: 10, - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { - offset: 0, - color: "#1d465c" - }, - { - offset: 1, - color: "#82FBEA" - } - ]) - } - }, - barWidth: 3, - data: xData.value + } }, - { - name: "内圆", - type: "scatter", - stack: "圆", - yAxisIndex: 0, - data: xData.value, //小白点,数据静态 - label: false, - symbolSize: 2, - itemStyle: { - normal: { - borderColor: "#fff", - borderWidth: 4, - color: "#fff", - opacity: 1 - } + yAxis: [ + { + type: "category", + inverse: true, + axisLabel: { + show: true, + textStyle: { + fontSize: "12", + color: "#fff" + } + }, + + axisTick: { + show: false + }, + axisLine: { + lineStyle: { + color: "#14336b" + } + }, + data: yData.value }, - z: 3 - }, - { - name: "内圆框", - type: "scatter", - stack: "圆", - yAxisIndex: 0, - data: [0, 0, 0, 0, 0, 0], //小白点外圈,数据静态 - label: false, - symbolSize: 15, - itemStyle: { - normal: { - borderColor: "#82FBEA", - borderWidth: 2, + { + axisTick: "none", + axisLine: "none", + axisLabel: { + textStyle: { + color: "#fff", + fontSize: "12" + } + }, + data: [] + }, + { + type: "category", + inverse: true, + axisTick: "none", + axisLine: "none", + show: true + // data: [], + } + ], + series: [ + { + type: "bar", + showBackground: true, + backgroundStyle: { color: "#14346c", - opacity: 1 - } + borderRadius: 30 + }, + label: { + show: false, + // position:'right', + // formatter:'{@score}%', + textStyle: { + color: "#03fcfe", + fontSize: "12" + } + }, + itemStyle: { + normal: { + barBorderRadius: 10, + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "#1d465c" + }, + { + offset: 1, + color: "#82FBEA" + } + ]) + } + }, + barWidth: 3, + data: xData.value }, - z: 2 - } - ] -}); + { + name: "内圆", + type: "scatter", + stack: "圆", + yAxisIndex: 0, + data: xData.value, //小白点,数据静态 + label: false, + symbolSize: 2, + itemStyle: { + normal: { + borderColor: "#fff", + borderWidth: 4, + color: "#fff", + opacity: 1 + } + }, + z: 3 + }, + { + name: "内圆框", + type: "scatter", + stack: "圆", + yAxisIndex: 0, + data: [0, 0, 0, 0, 0, 0], //小白点外圈,数据静态 + label: false, + symbolSize: 15, + itemStyle: { + normal: { + borderColor: "#82FBEA", + borderWidth: 2, + color: "#14346c", + opacity: 1 + } + }, + z: 2 + } + ] + }; +} +// let horizontalEcharts: any = null; function horizontalChart() { + initOption(); let horizontalEcharts = echarts.init(document.getElementById("horizontalEcharts")); - horizontalEcharts.setOption(option); + console.log(option.value, "绘图数据"); + horizontalEcharts.setOption(option.value); } // //选择日期 // const onDatePicker = () => { @@ -192,27 +199,33 @@ function horizontalChart() { // }; //获取劳务班组人员数据 const getList = async val => { + // 清数据 const res: any = await getWorkerInfoApi({ projectSn: store.sn, enterpriseId: val // queryStartTime: form.queryStartTime.value, // queryEndTime: form.queryEndTime.value }); - if (res.result[0]) { + // console.log(res.result.length,'长度') + if (res.result.length != 0) { for (let index = 0; index < res.result.length; index++) { xData.value[index] = res.result[index].totalPersonNum; yData.value[index] = res.result[index].teamName; } } else { + console.log("没有数据"); xData.value = []; yData.value = []; } - console.log("获取劳务班组人员数据2", res); + // console.log("获取劳务班组人员数据2", res); horizontalChart(); }; onMounted(async () => { mitts.on("enterpriseId", e => { + // horizontalEcharts = echarts.init(document.getElementById('chart-view')) // 清数据 + xData.value = []; + yData.value = []; getList(e); }); });