| | |
| | | }, 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) |
| | |
| | | }) |
| | | } |
| | | |
| | | this.inithouseEcharts(xDate, yDate) |
| | | this.initPlaceEcharts(xDate, yDate,this.tabTypeTwo) |
| | | |
| | | setTimeout(() => { |
| | | this.houseEchartsLoading = false |