|
|
@@ -224,16 +224,16 @@ let app = new Vue({
|
|
|
columnWidth: [70, 120, 170, 200],
|
|
|
rowNum: 6,
|
|
|
data: [
|
|
|
- ["01", '陈英', '洽谈室1', '杜儿坪矿', "2023.07.01 09:30-10:30"],
|
|
|
- ["02", '李小曼', '洽谈室1', '杜儿坪矿', "2023.07.01 09:30-10:30"],
|
|
|
- ["03", '王亮', '洽谈室1', '杜儿坪矿', "2023.07.01 09:30-10:30"],
|
|
|
- ["04", '李鑫', '洽谈室1', '杜儿坪矿', "2023.07.01 09:30-10:30"],
|
|
|
- ["05", '王伟', '洽谈室1', '杜儿坪矿', "2023.07.01 09:30-10:30"],
|
|
|
- ["06", '张强', '洽谈室1', '杜儿坪矿', "2023.07.05 09:30-10:30"],
|
|
|
- ["07", '王强', '洽谈室1', '杜儿坪矿', "2023.07.05 09:30-10:30"],
|
|
|
- ["08", '程丽', '洽谈室1', '杜儿坪矿', "2023.07.05 09:30-10:30"],
|
|
|
- ["08", '韩赢', '洽谈室1', '杜儿坪矿', "2023.07.05 09:30-10:30"],
|
|
|
- ["09", '王丽', '洽谈室1', '杜儿坪矿', "2023.07.05 09:30-10:30"],
|
|
|
+ ["01", '李志桐', '洽谈室1', '杜儿坪矿', "2023.07.01 09:30-10:30"],
|
|
|
+ ["02", '赵建国', '洽谈室1', '杜儿坪矿', "2023.07.01 09:30-10:30"],
|
|
|
+ ["03", '张耀杰', '洽谈室1', '杜儿坪矿', "2023.07.01 09:30-10:30"],
|
|
|
+ ["04", '崔诚', '洽谈室1', '杜儿坪矿', "2023.07.01 09:30-10:30"],
|
|
|
+ ["05", '陈灵均', '洽谈室1', '杜儿坪矿', "2023.07.01 09:30-10:30"],
|
|
|
+ ["06", '杜勇', '洽谈室1', '杜儿坪矿', "2023.07.05 09:30-10:30"],
|
|
|
+ ["07", '李灵风', '洽谈室1', '杜儿坪矿', "2023.07.05 09:30-10:30"],
|
|
|
+ ["08", '卢晨', '洽谈室1', '杜儿坪矿', "2023.07.05 09:30-10:30"],
|
|
|
+ ["08", '韩玉树', '洽谈室1', '杜儿坪矿', "2023.07.05 09:30-10:30"],
|
|
|
+ ["09", '王杰', '洽谈室1', '杜儿坪矿', "2023.07.05 09:30-10:30"],
|
|
|
],
|
|
|
align: ["center", "center", "center", "center", "center"],
|
|
|
headerBGC: "#69c1ff2d",
|
|
|
@@ -242,13 +242,13 @@ let app = new Vue({
|
|
|
},
|
|
|
mainList: [{
|
|
|
name: "双选场次",
|
|
|
- value: 30,
|
|
|
+ value: 29,
|
|
|
unit: "场",
|
|
|
icon: "./images/humanResources/times.png"
|
|
|
},
|
|
|
{
|
|
|
name: "参与人数",
|
|
|
- value: 3000,
|
|
|
+ value: 2957,
|
|
|
unit: "人",
|
|
|
icon: "./images/humanResources/user.png"
|
|
|
}
|
|
|
@@ -348,13 +348,14 @@ let app = new Vue({
|
|
|
recruitInfoList: [],
|
|
|
vitaData: {
|
|
|
x: ['4月', '5月', '6月', '7月', '8月', '9月'],
|
|
|
- y: [56, 32, 64, 81, 43, 13]
|
|
|
+ y: [56, 32, 64, 81, 43, 13]
|
|
|
},
|
|
|
isChangeList: false,
|
|
|
- imageList: ["./images/humanResources/ppt1.jpg","",""],
|
|
|
+ imageList: ["./images/humanResources/ppt1.jpg", "", ""],
|
|
|
imageIndex: 0,
|
|
|
imageFlag: false,
|
|
|
pageFlag: true,
|
|
|
+ hecharts: null,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -377,10 +378,10 @@ let app = new Vue({
|
|
|
if (this.imageIndex == this.imageList.length) {
|
|
|
that.downhole.dispose()
|
|
|
that.vitaEcharts.dispose()
|
|
|
- setTimeout(()=>{
|
|
|
+ setTimeout(() => {
|
|
|
let pageBtm = that.$refs.pageBtm
|
|
|
that.initDownholeEcharts(pageBtm, { x: admissionList.x, y1: admissionList.y1, y2: admissionList.y2, y3: admissionList.y3 })
|
|
|
-
|
|
|
+
|
|
|
let vita = that.$refs.vita
|
|
|
that.initVitaEcharts(vita)
|
|
|
})
|
|
|
@@ -396,15 +397,15 @@ let app = new Vue({
|
|
|
|
|
|
|
|
|
let rightOne = this.$refs.rightOne
|
|
|
- this.initLineRight(rightOne, { value: 50, total: 118 })
|
|
|
+ this.initLineRight(rightOne, { value: 53, total: 125 })
|
|
|
let rightTwo = this.$refs.rightTwo
|
|
|
- this.initLineRight(rightTwo, { value: 30, total: 118 })
|
|
|
+ this.initLineRight(rightTwo, { value: 29, total: 125 })
|
|
|
let rightThree = this.$refs.rightThree
|
|
|
- this.initLineRight(rightThree, { value: 20, total: 118 })
|
|
|
+ this.initLineRight(rightThree, { value: 25, total: 125 })
|
|
|
let rightFour = this.$refs.rightFour
|
|
|
- this.initLineRight(rightFour, { value: 12, total: 118 })
|
|
|
+ this.initLineRight(rightFour, { value: 12, total: 125 })
|
|
|
let rightFive = this.$refs.rightFive
|
|
|
- this.initLineRight(rightFive, { value: 6, total: 118 })
|
|
|
+ this.initLineRight(rightFive, { value: 6, total: 125 })
|
|
|
// let c1 = this.$refs.c1
|
|
|
// this.initRightCycle(c1, 40)
|
|
|
// let c2 = this.$refs.c2
|
|
|
@@ -434,15 +435,15 @@ let app = new Vue({
|
|
|
item.flag = false
|
|
|
})
|
|
|
|
|
|
- if (that.treeIndex > that.treeList.length - 1) {
|
|
|
+ if (that.treeIndex >= that.treeList.length - 1) {
|
|
|
that.treeIndex = 0
|
|
|
- that.treeList[that.treeIndex].flag = true
|
|
|
} else {
|
|
|
- that.treeList[that.treeIndex].flag = true
|
|
|
that.treeIndex = that.treeIndex + 1
|
|
|
|
|
|
}
|
|
|
- }, 2000)
|
|
|
+ that.treeList[that.treeIndex].flag = true
|
|
|
+
|
|
|
+ }, 5000)
|
|
|
// setInterval(()=>{
|
|
|
// if(that.configIndex > that.config1.data.length - 1){
|
|
|
// that.configIndex = 0
|
|
|
@@ -463,7 +464,7 @@ let app = new Vue({
|
|
|
that.leftFlag = false
|
|
|
setTimeout(() => {
|
|
|
let leftChange = that.$refs.leftChange
|
|
|
- that.initRoseEcharts(leftChange)
|
|
|
+ that.initThreeBig(leftChange)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -521,14 +522,22 @@ let app = new Vue({
|
|
|
if (that.imageIndex != 0) {
|
|
|
that.imageIndex = that.imageIndex - 1
|
|
|
}
|
|
|
- } else if(e1 && e1.keyCode == 39){
|
|
|
+ } else if (e1 && e1.keyCode == 33) {
|
|
|
+ // that.imageIndex = that.imageIndex - 1
|
|
|
+ if (that.imageIndex != 0) {
|
|
|
+ that.imageIndex = that.imageIndex - 1
|
|
|
+ }
|
|
|
+ } else if (e1 && e1.keyCode == 39) {
|
|
|
that.imageIndex = that.imageIndex + 1
|
|
|
- } else if(e1 && e1.keyCode == 40){
|
|
|
+ } else if (e1 && e1.keyCode == 40) {
|
|
|
+ that.imageIndex = that.imageIndex + 1
|
|
|
+ } else if (e1 && e1.keyCode == 34) {
|
|
|
that.imageIndex = that.imageIndex + 1
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
+
|
|
|
},
|
|
|
|
|
|
handleChangeImage() {
|
|
|
@@ -1342,6 +1351,546 @@ let app = new Vue({
|
|
|
loopSeries: true,
|
|
|
});
|
|
|
},
|
|
|
+ initChartsBig(arr = [
|
|
|
+ {
|
|
|
+ name: '地面',
|
|
|
+ y: 10,
|
|
|
+ sliced: false,
|
|
|
+ selected: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '辅助',
|
|
|
+ y: 10,
|
|
|
+ sliced: false,
|
|
|
+ selected: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '一线',
|
|
|
+ y: 10,
|
|
|
+ sliced: false,
|
|
|
+ selected: false,
|
|
|
+ },
|
|
|
+ ]) {
|
|
|
+
|
|
|
+ let left5 = arr
|
|
|
+ var chartData = left5
|
|
|
+ var timer = null;
|
|
|
+ var i = 0;
|
|
|
+
|
|
|
+ let that = this
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ colors: [
|
|
|
+ "#D9E1F2",
|
|
|
+ "#B4C6E7",
|
|
|
+ "#8EA9DB",
|
|
|
+ "#305496",
|
|
|
+ "#203764",
|
|
|
+ ],
|
|
|
+ chart: {
|
|
|
+ type: 'pie',
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ options3d: {
|
|
|
+ enabled: true,
|
|
|
+ alpha: 45,
|
|
|
+ //beta: 0
|
|
|
+ },
|
|
|
+ events: {
|
|
|
+ // load，图表加载完成时触发
|
|
|
+ load: function () {
|
|
|
+ var chart = this;
|
|
|
+
|
|
|
+ var points = chart.series[0].points;
|
|
|
+ var len = points.length;
|
|
|
+
|
|
|
+ timer && clearInterval(timer);
|
|
|
+ timer = setInterval(function () {
|
|
|
+ autoTooltip(points[i]);
|
|
|
+ chartData.forEach((item, index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ if (index == i) {
|
|
|
+ item.sliced = true
|
|
|
+ item.selected = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ chart.update({
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ i++;
|
|
|
+ if (i === len) {
|
|
|
+ i = 0;
|
|
|
+ chartData.forEach((item, index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ })
|
|
|
+ chart.update({
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ legendItemClick: function (event) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ credits: {
|
|
|
+ enabled: false //去掉hightchats水印
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ align: 'right', //横向位置
|
|
|
+ verticalAlign: 'middle', // 纵向位置
|
|
|
+ layout: "vertical", //横排还是竖排
|
|
|
+ x: 10,
|
|
|
+ y: 100,
|
|
|
+ symbolWidth: 30,
|
|
|
+ itemStyle: {
|
|
|
+ fontSize: '30px',
|
|
|
+ color: '#fff',
|
|
|
+ x: 20,
|
|
|
+ fontWeight: 0,
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ enabled: false,
|
|
|
+ text: "",
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ crosshairs: false,
|
|
|
+ trigger: "axis",
|
|
|
+ backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
|
+ borderColor: "rgba(0,0,0,0.5)",
|
|
|
+ style: {
|
|
|
+ fontSize: 30,
|
|
|
+ color: '#A3E2F4',
|
|
|
+ fontWeight: 0,
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#ddd",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ formatter: function (e) {
|
|
|
+ this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
|
|
|
+ return `${this.key}：<b><b>${this.y}</b>（${this.percentage}%）</b></b>`
|
|
|
+ },
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ allowPointSelect: true,
|
|
|
+ showInLegend: true, // 图例
|
|
|
+ cursor: 'pointer',
|
|
|
+ size: 350,
|
|
|
+ innerSize: 0, //环形图中间空白，0为饼图
|
|
|
+ depth: 80, //立体高度
|
|
|
+ slicedOffset: 40, //动画距离
|
|
|
+ dataLabels: {
|
|
|
+ enabled: false, // 是否展示指示线
|
|
|
+ format: '{point.name}: {point.percentage}'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
|
|
|
+ chartData.forEach((item, index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ })
|
|
|
+ chartData[e.target.index].sliced = true
|
|
|
+ chartData[e.target.index].selected = true
|
|
|
+ chart.update({
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ click: function (e) {
|
|
|
+ that.showChartLTipDouble(e.point.name)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ timer && clearInterval(timer);
|
|
|
+ },
|
|
|
+ mouseOut: function () { // 鼠标移出后需要继续执行轮播
|
|
|
+ var points = chart.series[0].points;
|
|
|
+ var len = points.length;
|
|
|
+
|
|
|
+ timer && clearInterval(timer);
|
|
|
+ timer = setInterval(function () {
|
|
|
+ autoTooltip(points[i]);
|
|
|
+ chartData.forEach((item, index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ if (index == i) {
|
|
|
+ item.sliced = true
|
|
|
+ item.selected = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ chart.update({
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ i++;
|
|
|
+ if (i === len) {
|
|
|
+ i = 0;
|
|
|
+ chartData.forEach((item, index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ })
|
|
|
+ chart.update({
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ }
|
|
|
+
|
|
|
+ if (that.hecharts) {
|
|
|
+ that.hecharts.destroy();
|
|
|
+ }
|
|
|
+
|
|
|
+ that.hecharts = Highcharts.chart('echartL2', option);
|
|
|
+ function autoTooltip(point) {
|
|
|
+ that.hecharts.tooltip.refresh(point);
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ initThreeBig(el) {
|
|
|
+ this.roseEcharts = echarts.init(el)
|
|
|
+ var placeHolderStyle = {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ color: "rgba(0,0,0,0)",
|
|
|
+ borderWidth: 0
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ color: "rgba(0,0,0,0)",
|
|
|
+ borderWidth: 0
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ var dataStyle = {
|
|
|
+ normal: {
|
|
|
+ formatter: '{c}',
|
|
|
+ position: 'center',
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: '35',
|
|
|
+ fontWeight: 'normal',
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ option = {
|
|
|
+ title: [{
|
|
|
+ text: '地面',
|
|
|
+ left: '19%',
|
|
|
+ top: '70%',
|
|
|
+ textAlign: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: 'normal',
|
|
|
+ fontSize: '30',
|
|
|
+ color: '#fff',
|
|
|
+ textAlign: 'center',
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ text: '辅助',
|
|
|
+ left: '49%',
|
|
|
+ top: '70%',
|
|
|
+ textAlign: 'center',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontWeight: 'normal',
|
|
|
+ fontSize: '30',
|
|
|
+ textAlign: 'center',
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ text: '一线',
|
|
|
+ left: '79%',
|
|
|
+ top: '70%',
|
|
|
+ textAlign: 'center',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontWeight: 'normal',
|
|
|
+ fontSize: '30',
|
|
|
+ textAlign: 'center',
|
|
|
+ },
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ hoverAnimation: false, //鼠标经过的特效
|
|
|
+ // radius: ['55%', '61%'],
|
|
|
+ radius: ['45%', '50%'],
|
|
|
+ center: ['20%', '50%'],
|
|
|
+ startAngle: 225,
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ position: 'center'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: 12,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#99da69'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#01babc'
|
|
|
+ }]),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: dataStyle,
|
|
|
+ }, {
|
|
|
+ value: 4,
|
|
|
+ itemStyle: placeHolderStyle,
|
|
|
+ },
|
|
|
+
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ hoverAnimation: false, //鼠标经过的特效
|
|
|
+ radius: ['45%', '50%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ startAngle: 225,
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ position: 'center'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: 15,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#FBAB7E'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#F7CE68'
|
|
|
+ }]),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: dataStyle,
|
|
|
+ }, {
|
|
|
+ value: 5,
|
|
|
+ itemStyle: placeHolderStyle,
|
|
|
+ },
|
|
|
+
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ hoverAnimation: false,
|
|
|
+ // radius: ['55%', '61%'],
|
|
|
+ radius: ['45%', '50%'],
|
|
|
+ center: ['80%', '50%'],
|
|
|
+ startAngle: 225,
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ position: 'center'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: 9,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#9f3edd'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#4897f6'
|
|
|
+ }]),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: dataStyle,
|
|
|
+ }, {
|
|
|
+ value: 3,
|
|
|
+ itemStyle: placeHolderStyle,
|
|
|
+ },
|
|
|
+
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ //外圈的边框
|
|
|
+ {
|
|
|
+ // name: '总人数',
|
|
|
+ type: 'pie',
|
|
|
+ hoverAnimation: false, //鼠标经过的特效
|
|
|
+ radius: ['51%', '52%'],
|
|
|
+ center: ['20%', '50%'],
|
|
|
+ startAngle: 225,
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ position: 'center'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: 12,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#01babc'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#99da69'
|
|
|
+ }]),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ value: 4,
|
|
|
+ itemStyle: placeHolderStyle,
|
|
|
+ },
|
|
|
+
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // name: '总人数',
|
|
|
+ type: 'pie',
|
|
|
+ hoverAnimation: false, //鼠标经过的特效
|
|
|
+ // radius: ['61%', '62%'],
|
|
|
+ radius: ['51%', '52%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ startAngle: 225,
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ position: 'center'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: 15,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#FBAB7E'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#F7CE68'
|
|
|
+ }]),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ value: 5,
|
|
|
+ itemStyle: placeHolderStyle,
|
|
|
+ },
|
|
|
+
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ hoverAnimation: false,
|
|
|
+ // radius: ['61%', '62%'],
|
|
|
+ radius: ['51%', '52%'],
|
|
|
+ center: ['80%', '50%'],
|
|
|
+ startAngle: 225,
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ position: 'center'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: 9,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#4897f6'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#9f3edd'
|
|
|
+ }]),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ value: 3,
|
|
|
+ itemStyle: placeHolderStyle,
|
|
|
+ },
|
|
|
+
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.roseEcharts.setOption(option)
|
|
|
+ tools.loopShowTooltip(this.roseEcharts, option, {
|
|
|
+ nterval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ });
|
|
|
+ },
|
|
|
handleClick(from, type) {
|
|
|
this.handleMark()
|
|
|
this.from = from
|
|
|
@@ -1529,7 +2078,7 @@ let app = new Vue({
|
|
|
that.leftFlag = false
|
|
|
setTimeout(() => {
|
|
|
let leftChange = that.$refs.leftChange
|
|
|
- that.initRoseEcharts(leftChange)
|
|
|
+ that.initThreeBig(leftChange)
|
|
|
})
|
|
|
}
|
|
|
that.leftTime = setInterval(() => {
|
|
|
@@ -1542,7 +2091,7 @@ let app = new Vue({
|
|
|
that.leftFlag = false
|
|
|
setTimeout(() => {
|
|
|
let leftChange = that.$refs.leftChange
|
|
|
- that.initRoseEcharts(leftChange)
|
|
|
+ that.initThreeBig(leftChange)
|
|
|
})
|
|
|
}
|
|
|
}
|
fengxu
