zrj
2024-06-18 8253e148f5d680eb4f6aab75a156dbb22cb8d55d
src/views/home/components/leftContainer.vue
@@ -803,7 +803,142 @@
                }, 500)
            })
        },
        // 九小场所echarts
        initPlaceEcharts(xDate, yDate,type){
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)
            houseMyChart.setOption(this.initPlaceOptions(xDate, yDate))
            // 圆柱点击事件
            this.clickPlaceChart(type)
        },
        // 场所图表点击事件
        clickPlaceChart(type){
            this.tabTypeThree = type
            this.houseEchartsLoading = true
            houseMyChart.on('click', params => {
                this.$emit('showplacedetail', type, '九小场所列表', params.name)
            })
        },
        // 九小场所
        initPlaceOptions (xDate, y1Date) {
            const that = this
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        let msg
                        if (params.value > 10000) {
                            msg = (params.value / 10000).toFixed(2)
                        } else {
                            msg = params.value
                        }
                        msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
                        return msg
                    },
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
                    borderColor: 'rgba(8, 56, 185, 0.9)',
                    textStyle: {
                        color: '#fff',
                        fontSize: fontSize(12)
                    }
                },
                color: myColor,
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'category',
                    data: xDate,
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(14)
                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [
                    {
                        data: y1Date,
                        type: 'bar',
                        barWidth: '50%',
                        barCategoryGap: '80%',
                        zlevel: 2,
                        cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
                        itemStyle: {
                            normal: {
                                color: '#ed7c2f',
                                label: {
                                    show: true, //开启显示
                                    position: 'right', //在上方显示
                                    textStyle: { //数值样式
                                        color: '#ed7c2f',
                                        fontSize: 10
                                    }
                                }
                            }
                        },
                    },
                ],
                grid: {
                    top: '2%',
                    left: '2%',
                    // right: '-1%',
                    right: '10%',
                    bottom: '2%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: "inside",
                        startValue: 0,
                        endValue: 4,
                        minValueSpan: 8,
                        maxValueSpan: 8,
                        yAxisIndex: [0],
                        zoomOnMouseWheel: false,  // 关闭滚轮缩放
                        moveOnMouseWheel: true, // 开启滚轮平移
                        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
                    },
                    {
                        type: 'slider',
                        realtime: true,
                        startValue: 0,
                        endValue: 4,
                        width: '3.5',
                        height: '90%',
                        yAxisIndex: [0], // 控制y轴滚动
                        // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
                        fillerColor: "rgba(11, 19, 145, 0.5)", // 滚动条颜色
                        borderColor: "rgba(17, 100, 210, 0.12)",
                        backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
                        handleSize: 0, // 两边手柄尺寸
                        showDataShadow: false,//是否显示数据阴影 默认auto
                        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                        top: '1%',
                        right: '5',
                    }
                ]
            }
        },
        // 房屋
        inithouseEcharts (xDate, yDate) {
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)
@@ -996,7 +1131,7 @@
                    })
                }
                this.inithouseEcharts(xDate, yDate)
                this.initPlaceEcharts(xDate, yDate,this.tabTypeTwo)
                setTimeout(() => {
                    this.houseEchartsLoading = false