|
|
|
@ -11,59 +11,63 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getyqZblNum } from '@/api/common'
|
|
|
|
|
import { getyqZblNum } from "@/api/common";
|
|
|
|
|
import { sectorZB } from "@/api/wlSafe";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
lineName: ['消防部', '公安部', '通信部', '档案部', '后勤部', '审查部'],
|
|
|
|
|
lineValue: [10, 20, 5, 6, 1, 30]
|
|
|
|
|
}
|
|
|
|
|
lineName: [],
|
|
|
|
|
lineValue: [],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.lineBox()
|
|
|
|
|
// getyqZblNum().then(res => {
|
|
|
|
|
// res.data.forEach(ele => {
|
|
|
|
|
// this.lineName.push(ele.deptName)
|
|
|
|
|
// this.lineValue.push(ele.referralCount)
|
|
|
|
|
// })
|
|
|
|
|
// this.lineBox()
|
|
|
|
|
// }
|
|
|
|
|
// )
|
|
|
|
|
this.getData()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getData() {
|
|
|
|
|
sectorZB().then((res) => {
|
|
|
|
|
res.data.forEach(value => {
|
|
|
|
|
this.lineName.push(value.dep_name)
|
|
|
|
|
this.lineValue.push(value.count)
|
|
|
|
|
});
|
|
|
|
|
this.lineBox();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
lineBox() {
|
|
|
|
|
const myChart = this.$echarts.init(document.getElementById('box2'))
|
|
|
|
|
const options = ({
|
|
|
|
|
const myChart = this.$echarts.init(document.getElementById("box2"));
|
|
|
|
|
const options = {
|
|
|
|
|
animation: true,
|
|
|
|
|
grid: {
|
|
|
|
|
top: '6.5%',
|
|
|
|
|
bottom: '15%',
|
|
|
|
|
right: '5%'
|
|
|
|
|
top: "6.5%",
|
|
|
|
|
bottom: "15%",
|
|
|
|
|
right: "5%",
|
|
|
|
|
},
|
|
|
|
|
title: {
|
|
|
|
|
text: '单位:件',
|
|
|
|
|
text: "单位:件",
|
|
|
|
|
textStyle: {
|
|
|
|
|
align: 'center',
|
|
|
|
|
color: 'rgba(255,255,255,0.5)',
|
|
|
|
|
fontSize: 24
|
|
|
|
|
align: "center",
|
|
|
|
|
color: "rgba(255,255,255,0.5)",
|
|
|
|
|
fontSize: 24,
|
|
|
|
|
},
|
|
|
|
|
top: '-4px',
|
|
|
|
|
left: '11%'
|
|
|
|
|
top: "-4px",
|
|
|
|
|
left: "11%",
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: this.lineName,
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false // 隐藏X轴轴线
|
|
|
|
|
show: false, // 隐藏X轴轴线
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false // 隐藏X轴轴线
|
|
|
|
|
show: false, // 隐藏X轴轴线
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'rgba(77, 128, 254, 0.2)',
|
|
|
|
|
width: 2
|
|
|
|
|
}
|
|
|
|
|
color: "rgba(77, 128, 254, 0.2)",
|
|
|
|
|
width: 2,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: true,
|
|
|
|
@ -71,184 +75,183 @@ export default {
|
|
|
|
|
margin: 20,
|
|
|
|
|
fontSize: 18,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#65D5FF' // X轴文字颜色
|
|
|
|
|
color: "#65D5FF", // X轴文字颜色
|
|
|
|
|
},
|
|
|
|
|
formatter: function(params) {
|
|
|
|
|
var newParamsName = '' // 拼接后的新字符串
|
|
|
|
|
var paramsNameNumber = params.length // 实际标签数
|
|
|
|
|
var provideNumber = 5 // 每行显示的字数
|
|
|
|
|
var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 如需换回,算出要显示的行数
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
var newParamsName = ""; // 拼接后的新字符串
|
|
|
|
|
var paramsNameNumber = params.length; // 实际标签数
|
|
|
|
|
var provideNumber = 5; // 每行显示的字数
|
|
|
|
|
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 如需换回,算出要显示的行数
|
|
|
|
|
if (paramsNameNumber > provideNumber) {
|
|
|
|
|
/** 循环每一行,p表示行 */
|
|
|
|
|
for (var i = 0; i < rowNumber; i++) {
|
|
|
|
|
var tempStr = '' // 每次截取的字符串
|
|
|
|
|
var start = i * provideNumber // 截取位置开始
|
|
|
|
|
var end = start + provideNumber // 截取位置结束
|
|
|
|
|
var tempStr = ""; // 每次截取的字符串
|
|
|
|
|
var start = i * provideNumber; // 截取位置开始
|
|
|
|
|
var end = start + provideNumber; // 截取位置结束
|
|
|
|
|
// 最后一行的需要单独处理
|
|
|
|
|
if (i === rowNumber - 1) {
|
|
|
|
|
tempStr = params.substring(start, paramsNameNumber)
|
|
|
|
|
tempStr = params.substring(start, paramsNameNumber);
|
|
|
|
|
} else {
|
|
|
|
|
tempStr = params.substring(start, end) + '\n'
|
|
|
|
|
tempStr = params.substring(start, end) + "\n";
|
|
|
|
|
}
|
|
|
|
|
newParamsName += tempStr
|
|
|
|
|
newParamsName += tempStr;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
newParamsName = params
|
|
|
|
|
newParamsName = params;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return newParamsName
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return newParamsName;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'value',
|
|
|
|
|
type: "value",
|
|
|
|
|
gridIndex: 0,
|
|
|
|
|
min: 0,
|
|
|
|
|
max: (value) => {
|
|
|
|
|
if (value.max < 10) {
|
|
|
|
|
return 10
|
|
|
|
|
return 10;
|
|
|
|
|
} else {
|
|
|
|
|
return Math.ceil(value.max / 10) * 10
|
|
|
|
|
return Math.ceil(value.max / 10) * 10;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
splitNumber: 5,
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'rgba(77, 128, 254, 0.2)',
|
|
|
|
|
width: 2
|
|
|
|
|
}
|
|
|
|
|
color: "rgba(77, 128, 254, 0.2)",
|
|
|
|
|
width: 2,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'rgba(77, 128, 254, 0.2)'
|
|
|
|
|
}
|
|
|
|
|
color: "rgba(77, 128, 254, 0.2)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: true,
|
|
|
|
|
margin: 14,
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#65D5FF'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
color: "#65D5FF",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '单数',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
name: "单数",
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: 16,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: 'rgba(146, 225, 255, 1)'
|
|
|
|
|
color: "rgba(146, 225, 255, 1)",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: 'rgba(0, 151, 251, 1)'
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
}
|
|
|
|
|
color: "rgba(0, 151, 251, 1)",
|
|
|
|
|
},
|
|
|
|
|
]),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: this.lineValue,
|
|
|
|
|
z: 10,
|
|
|
|
|
zlevel: 0,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: 'top',
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#ffffff'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
color: "#ffffff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
// 分隔
|
|
|
|
|
type: 'pictorialBar',
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: '#0F375F'
|
|
|
|
|
}
|
|
|
|
|
color: "#0F375F",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
symbolRepeat: 'fixed',
|
|
|
|
|
symbolRepeat: "fixed",
|
|
|
|
|
symbolMargin: 6,
|
|
|
|
|
symbol: 'rect',
|
|
|
|
|
symbol: "rect",
|
|
|
|
|
symbolClip: true,
|
|
|
|
|
symbolSize: [18, 2],
|
|
|
|
|
symbolPosition: 'start',
|
|
|
|
|
symbolPosition: "start",
|
|
|
|
|
symbolOffset: [1, 1],
|
|
|
|
|
data: this.lineValue,
|
|
|
|
|
width: 2,
|
|
|
|
|
z: 0,
|
|
|
|
|
zlevel: 1
|
|
|
|
|
zlevel: 1,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barGap: '-110%', // 设置外框粗细
|
|
|
|
|
type: "bar",
|
|
|
|
|
barGap: "-110%", // 设置外框粗细
|
|
|
|
|
data: [10, 10, 10, 10, 10, 10, 10],
|
|
|
|
|
barWidth: 16,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: 'transparent', // 填充色
|
|
|
|
|
color: "transparent", // 填充色
|
|
|
|
|
// barBorderRadius: 0, //圆角半径
|
|
|
|
|
label: {
|
|
|
|
|
// 标签显示位置
|
|
|
|
|
show: false,
|
|
|
|
|
position: 'top' // insideTop 或者横向的 insideLeft
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
position: "top", // insideTop 或者横向的 insideLeft
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
z: 0
|
|
|
|
|
z: 0,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'line',
|
|
|
|
|
type: "line",
|
|
|
|
|
smooth: true, // 平滑曲线显示
|
|
|
|
|
showAllSymbol: false, // 显示所有图形。
|
|
|
|
|
symbolSize: 0,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
width: 0
|
|
|
|
|
width: 0,
|
|
|
|
|
},
|
|
|
|
|
areaStyle: {
|
|
|
|
|
color: 'rgba(0, 151, 251, 0.5)'
|
|
|
|
|
color: "rgba(0, 151, 251, 0.5)",
|
|
|
|
|
},
|
|
|
|
|
data: this.lineValue
|
|
|
|
|
}
|
|
|
|
|
data: this.lineValue,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
dataZoom: [
|
|
|
|
|
{
|
|
|
|
|
type: 'slider',
|
|
|
|
|
type: "slider",
|
|
|
|
|
show: false,
|
|
|
|
|
xAxisIndex: [0],
|
|
|
|
|
endValue: 5,
|
|
|
|
|
startValue: 0
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
if (options && typeof options === 'object') {
|
|
|
|
|
myChart.setOption(options, true)
|
|
|
|
|
startValue: 0,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
if (options && typeof options === "object") {
|
|
|
|
|
myChart.setOption(options, true);
|
|
|
|
|
// 定时自动滚动
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
if (options.dataZoom[0].endValue === this.lineValue?.length) {
|
|
|
|
|
options.dataZoom[0].endValue = 5
|
|
|
|
|
options.dataZoom[0].startValue = 0
|
|
|
|
|
options.dataZoom[0].endValue = 5;
|
|
|
|
|
options.dataZoom[0].startValue = 0;
|
|
|
|
|
} else {
|
|
|
|
|
options.dataZoom[0].endValue = options.dataZoom[0].endValue + 1
|
|
|
|
|
options.dataZoom[0].startValue = options.dataZoom[0].startValue + 1
|
|
|
|
|
options.dataZoom[0].endValue = options.dataZoom[0].endValue + 1;
|
|
|
|
|
options.dataZoom[0].startValue = options.dataZoom[0].startValue + 1;
|
|
|
|
|
}
|
|
|
|
|
myChart.setOption(options, true)
|
|
|
|
|
}, 2000)
|
|
|
|
|
myChart.setOption(options, true);
|
|
|
|
|
}, 2000);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
|
|
#box2 {
|
|
|
|
|