|
|
@@ -113,7 +113,7 @@ let app = new Vue({
|
|
|
},
|
|
|
configOrg: {
|
|
|
waitTime: 2000,
|
|
|
- rowNum: 3,
|
|
|
+ rowNum: 2,
|
|
|
data: [
|
|
|
["金融资本公司", '山焦担保', '上级调整', '2023-06-01'],
|
|
|
["山焦统配", '山焦统配', '组织新设', '2023-05-01'],
|
|
|
@@ -309,7 +309,7 @@ let app = new Vue({
|
|
|
// let organization = this.$refs.organization
|
|
|
// this.initOrganization(organization, "", this.organizationList)
|
|
|
let mobilize = this.$refs.mobilize
|
|
|
- this.initEchartStack(mobilize, { x: this.fx[0], y1: this.fy1[0], y2: this.fy2[0], y3: this.fy3[0], y4: this.fy4[0],y5: this.fy5[0] })
|
|
|
+ this.initEchartStack(mobilize, { x: this.fx[0], y1: this.fy1[0], y2: this.fy2[0], y3: this.fy3[0], y4: this.fy4[0], y5: this.fy5[0] })
|
|
|
let industry = this.$refs.industry
|
|
|
this.initOrganizationElse(industry, "", this.industry, "")
|
|
|
let sequence = this.$refs.sequence
|
|
|
@@ -335,7 +335,7 @@ let app = new Vue({
|
|
|
let whole = this.$refs.whole
|
|
|
this.initBarChartsElse(whole, wholeList, "吨/人", { name: "标杆矿井线", value: 1800 })
|
|
|
let buffer = this.$refs.buffer
|
|
|
- this.initStereoscopic(buffer)
|
|
|
+ this.initStereoscopic(buffer,userList)
|
|
|
// let share = this.$refs.share
|
|
|
// this.initHorizontalBar(share)
|
|
|
let el = this.$refs.container
|
|
|
@@ -1104,6 +1104,10 @@ let app = new Vue({
|
|
|
},
|
|
|
initChartR1(el) {
|
|
|
let myChart = echarts.init(el)
|
|
|
+ let objData = {}
|
|
|
+ echarts2.forEach(item=>{
|
|
|
+ objData[item.name] = item.value
|
|
|
+ })
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
show: true,
|
|
|
@@ -1122,11 +1126,32 @@ let app = new Vue({
|
|
|
legend: {
|
|
|
top: 'center',
|
|
|
orient: 'vertical',
|
|
|
- left: '75%',
|
|
|
+ left: '60%',
|
|
|
textStyle: {
|
|
|
fontSize: 30,
|
|
|
color: '#9DB9EB',
|
|
|
},
|
|
|
+ formatter: function (name) {
|
|
|
+ console.log(name);
|
|
|
+ return (
|
|
|
+ "{title|" + name + "} {value|" + objData[name] + "} {title|人}"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ rich: {
|
|
|
+ title: {
|
|
|
+ fontSize: 26,
|
|
|
+ lineHeight: 50,
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ fontSize: 26,
|
|
|
+ fontWeight: "bolder",
|
|
|
+ lineHeight: 50,
|
|
|
+ color: "#FFAD05",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
graphic: {
|
|
|
elements: [{
|
|
|
@@ -1148,7 +1173,7 @@ let app = new Vue({
|
|
|
center: ["37%", "50%"],
|
|
|
labelLine: {
|
|
|
normal: {
|
|
|
- show: true,
|
|
|
+ show: false,
|
|
|
length: 20,
|
|
|
length2: 55
|
|
|
},
|
|
|
@@ -1158,7 +1183,7 @@ let app = new Vue({
|
|
|
},
|
|
|
label: {
|
|
|
normal: {
|
|
|
- show: true,
|
|
|
+ show: false,
|
|
|
formatter: "{b}",
|
|
|
textStyle: {
|
|
|
fontSize: 28,
|
|
|
@@ -1166,7 +1191,7 @@ let app = new Vue({
|
|
|
position: 'outside'
|
|
|
},
|
|
|
emphasis: {
|
|
|
- show: true
|
|
|
+ show: false
|
|
|
}
|
|
|
},
|
|
|
data: echarts2,
|
|
|
@@ -1184,10 +1209,10 @@ let app = new Vue({
|
|
|
],
|
|
|
}
|
|
|
myChart.setOption(option)
|
|
|
- // tools.loopShowTooltip(myChart, option, {
|
|
|
- // nterval: 2000,
|
|
|
- // loopSeries: true,
|
|
|
- // });
|
|
|
+ tools.loopShowTooltip(myChart, option, {
|
|
|
+ nterval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ });
|
|
|
},
|
|
|
initChartsBig(el) {
|
|
|
this.leftEcharts5 = echarts.init(el);
|
|
|
@@ -2000,9 +2025,10 @@ let app = new Vue({
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
+ top: "10%",
|
|
|
left: '5%',
|
|
|
right: '4%',
|
|
|
- bottom: '28%',
|
|
|
+ bottom: '20%',
|
|
|
},
|
|
|
xAxis: [{
|
|
|
type: 'category',
|
|
|
@@ -2110,226 +2136,143 @@ let app = new Vue({
|
|
|
loopSeries: true,
|
|
|
});
|
|
|
},
|
|
|
- initStereoscopic(el) {
|
|
|
+ initStereoscopic(el,data) {
|
|
|
let chart = echarts.init(el);
|
|
|
- // 绘制左侧面
|
|
|
- const CubeLeft = echarts.graphic.extendShape({
|
|
|
- shape: {
|
|
|
- x: 0,
|
|
|
- y: 0
|
|
|
- },
|
|
|
- buildPath: function (ctx, shape) {
|
|
|
- // 会canvas的应该都能看得懂，shape是从custom传入的
|
|
|
- const xAxisPoint = shape.xAxisPoint
|
|
|
- const c0 = [shape.x + 17, shape.y]
|
|
|
- const c1 = [shape.x - 23, shape.y - 6]
|
|
|
- const c2 = [xAxisPoint[0] - 23, xAxisPoint[1] - 13]
|
|
|
- const c3 = [xAxisPoint[0] + 17, xAxisPoint[1]]
|
|
|
- ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
|
|
|
- }
|
|
|
- })
|
|
|
- // 绘制右侧面
|
|
|
- const CubeRight = echarts.graphic.extendShape({
|
|
|
- shape: {
|
|
|
- x: 0,
|
|
|
- y: 0
|
|
|
- },
|
|
|
- buildPath: function (ctx, shape) {
|
|
|
- const xAxisPoint = shape.xAxisPoint
|
|
|
- const c1 = [shape.x + 17, shape.y]
|
|
|
- const c2 = [xAxisPoint[0] + 17, xAxisPoint[1]]
|
|
|
- const c3 = [xAxisPoint[0] + 35, xAxisPoint[1] - 15]
|
|
|
- const c4 = [shape.x + 35, shape.y - 15]
|
|
|
- ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
|
|
|
- }
|
|
|
- })
|
|
|
- // 绘制顶面
|
|
|
- const CubeTop = echarts.graphic.extendShape({
|
|
|
- shape: {
|
|
|
- x: 0,
|
|
|
- y: 0
|
|
|
- },
|
|
|
- buildPath: function (ctx, shape) {
|
|
|
- const c1 = [shape.x + 17, shape.y]
|
|
|
- const c2 = [shape.x + 35, shape.y - 15] //右点
|
|
|
- const c3 = [shape.x - 5, shape.y - 20]
|
|
|
- const c4 = [shape.x - 23, shape.y - 6]
|
|
|
- ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
|
|
|
- }
|
|
|
- })
|
|
|
- // 注册三个面图形
|
|
|
- echarts.graphic.registerShape('CubeLeft', CubeLeft)
|
|
|
- echarts.graphic.registerShape('CubeRight', CubeRight)
|
|
|
- echarts.graphic.registerShape('CubeTop', CubeTop)
|
|
|
-
|
|
|
-
|
|
|
- const VALUE = [100, 56, 50]
|
|
|
-
|
|
|
option = {
|
|
|
tooltip: {
|
|
|
+ show: true,
|
|
|
trigger: 'axis',
|
|
|
textStyle: {
|
|
|
fontSize: 30,
|
|
|
color: '#A3E2F4'
|
|
|
},
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- },
|
|
|
- formatter: function (params, ticket, callback) {
|
|
|
- const item = params[1]
|
|
|
- return item.name + ' : ' + item.value;
|
|
|
+ axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
- left: '10%',
|
|
|
- right: '10%',
|
|
|
- top: '17%',
|
|
|
- bottom: '12%',
|
|
|
+ top: 50,
|
|
|
+ bottom: 30,
|
|
|
+ left: 90,
|
|
|
+ right: 90,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff"
|
|
|
+ }
|
|
|
},
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['中止合同人员', '双创人员', '考核待岗人员'],
|
|
|
+ legend: {
|
|
|
+ icon: 'circle',
|
|
|
+ right: '4%',
|
|
|
+ top: '8%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 26
|
|
|
+ },
|
|
|
+ data: ['缓冲池', '共享池']
|
|
|
+ },
|
|
|
+ calculable: true,
|
|
|
+ xAxis: [{
|
|
|
+ type: "category",
|
|
|
axisLine: {
|
|
|
- show: false,
|
|
|
lineStyle: {
|
|
|
- color: 'white'
|
|
|
+ color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
axisTick: {
|
|
|
- show: false,
|
|
|
- length: 9,
|
|
|
- alignWithLabel: true,
|
|
|
- lineStyle: {
|
|
|
- color: '#7DFFFD',
|
|
|
- fontSize: 35,
|
|
|
- }
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: false
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- fontSize: 26,
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- show: false,
|
|
|
- type: 'value',
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: 'white'
|
|
|
+ // inside: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 26,
|
|
|
}
|
|
|
},
|
|
|
+ data: data.x,
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ type: "value",
|
|
|
splitLine: {
|
|
|
show: false
|
|
|
},
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- fontSize: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 26,
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
- boundaryGap: ['20%', '20%']
|
|
|
- },
|
|
|
+ splitArea: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ // data: ['中止合同人员', '双创人员', '考核待岗人员'],
|
|
|
+ }],
|
|
|
series: [{
|
|
|
- type: 'custom',
|
|
|
- renderItem: (params, api) => {
|
|
|
- const location = api.coord([api.value(0), api.value(1)])
|
|
|
- return {
|
|
|
- type: 'group',
|
|
|
- children: [{
|
|
|
- type: 'CubeLeft',
|
|
|
- shape: {
|
|
|
- api,
|
|
|
- xValue: api.value(0),
|
|
|
- yValue: api.value(1),
|
|
|
- x: location[0],
|
|
|
- y: location[1],
|
|
|
- xAxisPoint: api.coord([api.value(0), 0])
|
|
|
- },
|
|
|
- style: {
|
|
|
- fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: '#1BC9F1'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: '#1C7084'
|
|
|
- }
|
|
|
- ])
|
|
|
- }
|
|
|
+ name: "缓冲池",
|
|
|
+ type: "bar",
|
|
|
+ stack:"value",
|
|
|
+ barMaxWidth: 15,
|
|
|
+ barGap: "10%",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#FF9915'
|
|
|
}, {
|
|
|
- type: 'CubeRight',
|
|
|
- shape: {
|
|
|
- api,
|
|
|
- xValue: api.value(0),
|
|
|
- yValue: api.value(1),
|
|
|
- x: location[0],
|
|
|
- y: location[1],
|
|
|
- xAxisPoint: api.coord([api.value(0), 0])
|
|
|
- },
|
|
|
- style: {
|
|
|
- fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: '#1C7287'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: '#1BC3EB'
|
|
|
- }
|
|
|
- ])
|
|
|
- }
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(245,221,111,0)'
|
|
|
+ }]),
|
|
|
+ borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#FF9915'
|
|
|
}, {
|
|
|
- type: 'CubeTop',
|
|
|
- shape: {
|
|
|
- api,
|
|
|
- xValue: api.value(0),
|
|
|
- yValue: api.value(1),
|
|
|
- x: location[0],
|
|
|
- y: location[1],
|
|
|
- xAxisPoint: api.coord([api.value(0), 0])
|
|
|
- },
|
|
|
- style: {
|
|
|
- fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: '#06728A'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: '#06728A'
|
|
|
- }
|
|
|
- ])
|
|
|
- }
|
|
|
- }]
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(245,221,111,0)'
|
|
|
+ }]),
|
|
|
}
|
|
|
},
|
|
|
- data: VALUE
|
|
|
- }, {
|
|
|
- type: 'bar',
|
|
|
- label: {
|
|
|
+ data: data.y1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "共享池",
|
|
|
+ type: "bar",
|
|
|
+ stack:"value",
|
|
|
+ barMaxWidth: 15,
|
|
|
+ itemStyle: {
|
|
|
normal: {
|
|
|
- show: true,
|
|
|
- position: 'top',
|
|
|
- formatter: (e) => {
|
|
|
- switch (e.name) {
|
|
|
- case '中止合同人员':
|
|
|
- return VALUE[0]
|
|
|
- case '双创人员':
|
|
|
- return VALUE[1]
|
|
|
- case '考核待岗人员':
|
|
|
- return VALUE[2]
|
|
|
- }
|
|
|
- },
|
|
|
- fontSize: 30,
|
|
|
- color: '#fff',
|
|
|
- offset: [2, -25]
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(24,191,207,1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(24,191,207,0)'
|
|
|
+ }]),
|
|
|
+ borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(24,191,207,1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(24,191,207,0)'
|
|
|
+ }]),
|
|
|
}
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
- color: 'transparent'
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
-
|
|
|
- },
|
|
|
- data: VALUE
|
|
|
- }]
|
|
|
+ data: data.y2
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
chart.setOption(option);
|
|
|
tools.loopShowTooltip(chart, option, {
|
|
|
@@ -2507,16 +2450,16 @@ let app = new Vue({
|
|
|
})
|
|
|
// 地图数据
|
|
|
var chinaGeoCoordMap = {
|
|
|
- 太原市: [111.949248, 37.957014],
|
|
|
- 大同市: [113.295259, 40.09031],
|
|
|
+ 太原市: [111.949248, 38.057014],
|
|
|
+ 大同市: [113.595259, 40.29031],
|
|
|
阳泉市: [113.505474, 37.964652],
|
|
|
- 长治市: [113.113556, 36.191112],
|
|
|
- 晋城市: [112.551274, 35.377553],
|
|
|
+ 长治市: [112.813556, 36.791112],
|
|
|
+ 晋城市: [112.551274, 35.577553],
|
|
|
朔州市: [112.433387, 39.531261],
|
|
|
晋中市: [112.936465, 37.696495],
|
|
|
- 运城市: [111.003957, 34.99],
|
|
|
+ 运城市: [111.003957, 35.59],
|
|
|
忻州市: [112.333538, 38.7769],
|
|
|
- 临汾市: [111.517973, 35.88415],
|
|
|
+ 临汾市: [111.517973, 36.48415],
|
|
|
吕梁市: [111.134335, 37.524366],
|
|
|
|
|
|
}
|
|
|
@@ -2786,13 +2729,6 @@ let app = new Vue({
|
|
|
name: "太原市",
|
|
|
value: [111.949248, 37.957014, 48, "招标公司",]
|
|
|
},
|
|
|
- {
|
|
|
- itemStyle: {
|
|
|
- color: "#fff"
|
|
|
- },
|
|
|
- name: "太原市",
|
|
|
- value: [111.949248, 37.957014, 52, "焦煤教育基地",]
|
|
|
- },
|
|
|
{
|
|
|
itemStyle: {
|
|
|
color: "#fff"
|
|
|
@@ -2821,13 +2757,7 @@ let app = new Vue({
|
|
|
name: "吕梁市",
|
|
|
value: [111.134335, 37.524366, 9960, "华晋焦煤",]
|
|
|
},
|
|
|
- {
|
|
|
- itemStyle: {
|
|
|
- color: "#fff"
|
|
|
- },
|
|
|
- name: "运城市",
|
|
|
- value: [111.003957, 34.99, 5768, "山焦盐化",]
|
|
|
- },]
|
|
|
+ ]
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
@@ -2876,8 +2806,7 @@ let app = new Vue({
|
|
|
map: 'shanxi',
|
|
|
layoutCenter: ['50.5%', '52%'], //地图位置
|
|
|
layoutSize: '100%',
|
|
|
- layoutCenter: ["50%", "50%"], //地图位置
|
|
|
- layoutSize: '100%',
|
|
|
+
|
|
|
zoom: 1.1, //当前视角的缩放比例
|
|
|
// roam: true, //是否开启平游或缩放
|
|
|
scaleLimit: { //滚轮缩放的极限控制
|
|
|
@@ -3277,7 +3206,7 @@ let app = new Vue({
|
|
|
right: "1%"
|
|
|
},
|
|
|
legend: {
|
|
|
- data: ["入职","离职", "内部调动", "跨二级调出", "跨二级调入"],
|
|
|
+ data: ["入职", "离职", "内部调动", "跨二级调出", "跨二级调入"],
|
|
|
align: 'left',
|
|
|
itemGap: 50,
|
|
|
right: '1%',
|
|
|
@@ -3341,7 +3270,7 @@ let app = new Vue({
|
|
|
stack: 'total',
|
|
|
barWidth: 26,
|
|
|
itemStyle: {
|
|
|
-
|
|
|
+
|
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
@@ -3361,15 +3290,15 @@ let app = new Vue({
|
|
|
name: "内部调动",
|
|
|
barWidth: 26,
|
|
|
itemStyle: {
|
|
|
-
|
|
|
+
|
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#9F7F00',
|
|
|
+ color: '#172A45',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: '#FBE463',
|
|
|
+ color: '#FF9915',
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
@@ -3381,7 +3310,7 @@ let app = new Vue({
|
|
|
stack: 'total',
|
|
|
barWidth: 26,
|
|
|
itemStyle: {
|
|
|
-
|
|
|
+
|
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
@@ -3414,7 +3343,7 @@ let app = new Vue({
|
|
|
},
|
|
|
data: data.y4,
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
{
|
|
|
type: 'bar',
|
|
|
name: "离职",
|
fengxu