|
|
@@ -2,13 +2,17 @@ let app = new Vue({
|
|
|
el: '#app',
|
|
|
data () {
|
|
|
return {
|
|
|
- yellowCount:0,
|
|
|
+ tipShow: false,
|
|
|
+ titleUrl: '',
|
|
|
+ yellowCount: 0, // 黄圈轮播参数
|
|
|
+ yellowPosition: 40,// 黄圈悬浮窗位置参数
|
|
|
echartR1Fd: true,
|
|
|
echartR2Fd: true,
|
|
|
echartR3Fd: true,
|
|
|
echarts1Time: 16000,
|
|
|
time: '',
|
|
|
timer: '',
|
|
|
+ timer2: '',
|
|
|
totleLimit: '1363.88',
|
|
|
showTip2: false,
|
|
|
showTip3: false,
|
|
|
@@ -17,7 +21,7 @@ let app = new Vue({
|
|
|
countType: 0,
|
|
|
mapName: 'shanxi',
|
|
|
geoCoordMap: {},
|
|
|
- storageRecordConfig2:[],
|
|
|
+ storageRecordConfig2: [],
|
|
|
titleList: [
|
|
|
{ name: '初步设计', type: 1, number: '106' },
|
|
|
{ name: '', type: 1, number: '' },
|
|
|
@@ -27,13 +31,14 @@ let app = new Vue({
|
|
|
{ name: '', type: 1, number: '' },
|
|
|
{ name: '完工', type: 1, number: '35' },
|
|
|
{ name: '', type: 1, number: '' },
|
|
|
- { name: '验收', type: 2, number: '42' },
|
|
|
+ { name: '验收', type: 1, number: '42' },
|
|
|
{ name: '', type: 1, number: '' },
|
|
|
{ name: '结算', type: 1, number: '33' },
|
|
|
{ name: '', type: 1, number: '' },
|
|
|
{ name: '前期准备', type: 1, number: '66' },
|
|
|
{ name: '', type: 1, number: '' },
|
|
|
- { name: '工商变更登记', type: 1, number: '77' }
|
|
|
+ { name: '工商变更登记', type: 1, number: '77' },
|
|
|
+ { name: '', type: 1, number: '' },
|
|
|
],
|
|
|
centerLeftList: [
|
|
|
{ name: '正偏差', value: '160', value2: '500' },
|
|
|
@@ -81,13 +86,18 @@ let app = new Vue({
|
|
|
this.time = formatDate()
|
|
|
this.timer = setInterval(() => {
|
|
|
this.time = formatDate()
|
|
|
- this.changeYellow()
|
|
|
}, 1000)
|
|
|
+ this.timer2 = setInterval(() => {
|
|
|
+ this.changeYellow()
|
|
|
+ }, 2000)
|
|
|
},
|
|
|
beforeDestroy () {
|
|
|
if (this.timer) {
|
|
|
clearInterval(this.timer);
|
|
|
}
|
|
|
+ if (this.timer2) {
|
|
|
+ clearInterval(this.timer2);
|
|
|
+ }
|
|
|
},
|
|
|
mounted () {
|
|
|
setTimeout(() => {
|
|
|
@@ -117,19 +127,61 @@ let app = new Vue({
|
|
|
this.initChartR4()
|
|
|
this.initChartR5()
|
|
|
this.changeYellow()
|
|
|
-
|
|
|
+
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
- changeYellow(){
|
|
|
- this.titleList.forEach((item,index)=>{
|
|
|
- this.$set(this.titleList[index],'type',1)
|
|
|
+ //点击弹窗左半部分
|
|
|
+ popLeftClick () {
|
|
|
+ if (this.titleUrl == '2.png') {
|
|
|
+ this.titleUrl = '3.png'
|
|
|
+ } else if (this.titleUrl == '7.png') {
|
|
|
+ this.titleUrl = '8.png'
|
|
|
+ } else if (this.titleUrl == '3.png') {
|
|
|
+ this.titleUrl = '2.png'
|
|
|
+ } else if (this.titleUrl == '8.png') {
|
|
|
+ this.titleUrl = '7.png'
|
|
|
+ } else if (this.titleUrl == '5.png') {
|
|
|
+ this.titleUrl = '2.png'
|
|
|
+ } else if (this.titleUrl == '10.png') {
|
|
|
+ this.titleUrl = '7.png'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //点击弹窗右半部分
|
|
|
+ poprightClick () {
|
|
|
+ if (this.titleUrl == '2.png') {
|
|
|
+ this.titleUrl = '5.png'
|
|
|
+ } else if (this.titleUrl == '7.png') {
|
|
|
+ this.titleUrl = '10.png'
|
|
|
+ } else if (this.titleUrl == '5.png') {
|
|
|
+ this.titleUrl = '2.png'
|
|
|
+ } else if (this.titleUrl == '10.png') {
|
|
|
+ this.titleUrl = '7.png'
|
|
|
+ } else if (this.titleUrl == '3.png') {
|
|
|
+ this.titleUrl = '2.png'
|
|
|
+ } else if (this.titleUrl == '8.png') {
|
|
|
+ this.titleUrl = '7.png'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showPop (e) {
|
|
|
+ this.titleUrl = e
|
|
|
+ this.tipShow = true
|
|
|
+ },
|
|
|
+ changeYellow () {
|
|
|
+ this.titleList.forEach((item, index) => {
|
|
|
+ this.$set(this.titleList[index], 'type', 1)
|
|
|
})
|
|
|
- this.$set(this.titleList[this.yellowCount],'type',2)
|
|
|
- if(this.yellowCount == 13){
|
|
|
+ this.$set(this.titleList[this.yellowCount], 'type', 2)
|
|
|
+ if (this.yellowCount == 14) {
|
|
|
this.yellowCount = 0
|
|
|
- }else{
|
|
|
- this.yellowCount++
|
|
|
+ this.yellowPosition += 315
|
|
|
+ } else {
|
|
|
+ if (this.yellowCount != 0) {
|
|
|
+ this.yellowPosition += 315
|
|
|
+ } else {
|
|
|
+ this.yellowPosition = 40
|
|
|
+ }
|
|
|
+ this.yellowCount += 2
|
|
|
}
|
|
|
},
|
|
|
numFormat (value) {
|
|
|
@@ -2695,11 +2747,11 @@ let app = new Vue({
|
|
|
chart.tooltip.refresh(point);
|
|
|
}
|
|
|
},
|
|
|
- initChartC2() {
|
|
|
+ initChartC2 () {
|
|
|
let myChart = echarts.init(this.$refs['echartC2'])
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
- formatter: data => {
|
|
|
+ formatter: data => {
|
|
|
return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿`
|
|
|
},
|
|
|
trigger: 'axis',
|
|
|
@@ -2707,34 +2759,36 @@ let app = new Vue({
|
|
|
type: 'cross',
|
|
|
},
|
|
|
},
|
|
|
- dataZoom:[
|
|
|
- {
|
|
|
- // start: 9,//默认为@
|
|
|
- // end: 100,//黑认认为1@0
|
|
|
- type: "slider",
|
|
|
- show: false,
|
|
|
- // xAxisIndex: [0]
|
|
|
- handlesize: 0,//滑动条的 左右2个滑动条的大小
|
|
|
- startValue: 5,// 初始显示值
|
|
|
- endValue: 0,// 结束显示值
|
|
|
- height: 10,//组件高度
|
|
|
- left:"5%",
|
|
|
- right: "4%",//右边的距离
|
|
|
- bottom: "25%",//底边的距离
|
|
|
- borderColor:"#939",
|
|
|
- fillerColor:"#269cdb",
|
|
|
- borderRadius: 5,
|
|
|
- backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
|
|
|
- showDataShadow: false,//是否显示数据阴影
|
|
|
- showDetail: false,//即拖拽时候是否显示详细数值信息
|
|
|
- truerealtime: true,//是否实时更新
|
|
|
- filterMode: "filter"
|
|
|
- },{
|
|
|
- type:'inside',
|
|
|
- show: true,
|
|
|
- start: 1,
|
|
|
- end: 100
|
|
|
- }
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ // start: 9,//默认为@
|
|
|
+ // end: 100,//黑认认为1@0
|
|
|
+ type: "slider",
|
|
|
+ show: false,
|
|
|
+ // xAxisIndex: [0]
|
|
|
+ handlesize: 0,//滑动条的 左右2个滑动条的大小
|
|
|
+ startValue: 5,// 初始显示值
|
|
|
+ endValue: 0,// 结束显示值
|
|
|
+ height: 10,//组件高度
|
|
|
+ left: "5%",
|
|
|
+ right: "4%",//右边的距离
|
|
|
+ bottom: "25%",//底边的距离
|
|
|
+ borderColor: "#939",
|
|
|
+ fillerColor: "#269cdb",
|
|
|
+ borderRadius: 5,
|
|
|
+ backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
|
|
|
+ showDataShadow: false,//是否显示数据阴影
|
|
|
+ showDetail: false,//即拖拽时候是否显示详细数值信息
|
|
|
+ truerealtime: true,//是否实时更新
|
|
|
+ filterMode: "filter"
|
|
|
+ }, {
|
|
|
+ type: 'inside',
|
|
|
+ show: true,
|
|
|
+ start: 1,
|
|
|
+ end: 100,
|
|
|
+ zoomOnMouseWheel: false, //滚轮是否触发缩放
|
|
|
+ moveOnMouseMove: false, //鼠标滚轮触发滚动
|
|
|
+ }
|
|
|
],
|
|
|
grid: {
|
|
|
top: '10%',
|
|
|
@@ -2845,22 +2899,22 @@ let app = new Vue({
|
|
|
nterval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
- let arr = executeList.map(item => item.value2)
|
|
|
+ let arr = executeList.map(item => item.value2)
|
|
|
this.timeOut = setInterval(function () {
|
|
|
-
|
|
|
+
|
|
|
let startValue = myChart.getModel().option.dataZoom[0].startValue;
|
|
|
let endValue = myChart.getModel().option.dataZoom[0].endValue;
|
|
|
let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
|
|
|
let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
|
|
|
// 每次向后滚动一个，最后一个从头开始。
|
|
|
// console.log(option.dataZoom[0].endValue);
|
|
|
-
|
|
|
+
|
|
|
if (option.dataZoom[0].endValue >= 12) {
|
|
|
option.dataZoom[0].endValue = 5
|
|
|
option.dataZoom[0].startValue = 0
|
|
|
} else {
|
|
|
- option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
|
|
|
- option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
|
|
|
+ option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
|
|
|
+ option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
|
|
|
}
|
|
|
|
|
|
// myChart.dispatchAction({
|
|
|
@@ -2870,9 +2924,9 @@ let app = new Vue({
|
|
|
// });
|
|
|
myChart.setOption(option);
|
|
|
}, 12000);
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
- convertData(data) {
|
|
|
+ convertData (data) {
|
|
|
var res = []
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
var geoCoord = this.geoCoordMap[data[i].name]
|
|
|
@@ -2885,7 +2939,7 @@ let app = new Vue({
|
|
|
}
|
|
|
return res
|
|
|
},
|
|
|
- initChinaChart() {
|
|
|
+ initChinaChart () {
|
|
|
var data = [
|
|
|
{ name: '大同市', value: 60.35, value2: 28 },
|
|
|
{ name: '朔州市', value: 33.61, value2: 13 },
|
|
|
@@ -3198,7 +3252,7 @@ let app = new Vue({
|
|
|
map: 'shanxi',
|
|
|
layoutCenter: ['50%', '50%'], //地图位置
|
|
|
layoutSize: '100%',
|
|
|
- zoom:1.5,
|
|
|
+ zoom: 1.5,
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: false,
|
|
|
@@ -3364,7 +3418,7 @@ let app = new Vue({
|
|
|
});
|
|
|
myChart.setOption(option)
|
|
|
},
|
|
|
- initChartC3() {
|
|
|
+ initChartC3 () {
|
|
|
let myChart = echarts.init(this.$refs['echartC3'])
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
@@ -3480,13 +3534,13 @@ let app = new Vue({
|
|
|
})
|
|
|
|
|
|
},
|
|
|
- initChartC4() {
|
|
|
+ initChartC4 () {
|
|
|
var chartData = []
|
|
|
var timer = null;
|
|
|
var timer2 = null;
|
|
|
var i = 0;
|
|
|
|
|
|
- chartDateR2.forEach((item,index) => {
|
|
|
+ chartDateR2.forEach((item, index) => {
|
|
|
let obj = {
|
|
|
name: item.name,
|
|
|
y: item.value2,
|
|
|
@@ -3496,185 +3550,185 @@ let app = new Vue({
|
|
|
color: index == 0 ? '#43ede3' : '#8ba2ff'
|
|
|
}
|
|
|
chartData.push(obj)
|
|
|
-
|
|
|
+
|
|
|
})
|
|
|
let that = this
|
|
|
- var chart = Highcharts.chart('echartC4', {
|
|
|
- chart: {
|
|
|
- type: 'pie',
|
|
|
- backgroundColor: 'rgba(0,0,0,0)',
|
|
|
- options3d: {
|
|
|
- enabled: true,
|
|
|
- alpha: 45,
|
|
|
- //beta: 0
|
|
|
- },
|
|
|
- events: {
|
|
|
- // load，图表加载完成时触发
|
|
|
- load: function () {
|
|
|
- var chart = this;
|
|
|
+ var chart = Highcharts.chart('echartC4', {
|
|
|
+ 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: '占比',
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- i++;
|
|
|
- if (i === len) {
|
|
|
- i = 0;
|
|
|
- chartData.forEach((item,index) => {
|
|
|
+ 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:[{
|
|
|
+ series: [{
|
|
|
type: 'pie',
|
|
|
name: '占比',
|
|
|
point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
+ events: {
|
|
|
+ click: function (e) {
|
|
|
+ console.log(e)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
data: chartData
|
|
|
}]
|
|
|
})
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
- },
|
|
|
- legendItemClick : function(event) {
|
|
|
- console.log(event);
|
|
|
- return true;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- credits: {
|
|
|
- enabled: false //去掉hightchats水印
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: null
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- crosshairs: true,
|
|
|
- backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
- // positioner: function(e){
|
|
|
- // console.log(e, this)
|
|
|
- // },
|
|
|
- useHTML: false, //开启html模式
|
|
|
- style: {
|
|
|
- color:'#fff',
|
|
|
- },
|
|
|
- formatter: function(e){
|
|
|
- //console.log(this)
|
|
|
- let num = chartData[this.colorIndex].num
|
|
|
- this.percentage = Math.round(this.percentage)
|
|
|
- return `${this.key}：<b>${this.percentage}%</b><br/>投资完成额：<b>${this.y}</b>亿<br/>投资数量：<b>${num}个</b>`
|
|
|
- },
|
|
|
- //pointFormat:
|
|
|
- },
|
|
|
- legend: {
|
|
|
- layout: 'vertical',
|
|
|
- align: 'right',
|
|
|
- verticalAlign: 'bottom',
|
|
|
- itemStyle: {
|
|
|
- fontSize: '20px',
|
|
|
- color: '#fff',
|
|
|
- x: 20
|
|
|
- }
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- pie: {
|
|
|
- allowPointSelect: true,
|
|
|
- showInLegend: true, // 图例
|
|
|
- cursor: 'pointer',
|
|
|
- size: 500,
|
|
|
- innerSize : 300, //环形图中间空白，0为饼图
|
|
|
- depth: 28, //立体高度
|
|
|
- slicedOffset: 23, //动画距离
|
|
|
- dataLabels: {
|
|
|
- enabled: false, // 是否展示指示线
|
|
|
- format: '{point.name}: {point.percentage}'
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- center: ['60%', '50%'],
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){ //点击事件
|
|
|
- },
|
|
|
- mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
|
|
|
- //console.log(e)
|
|
|
- chartData.forEach((item,index) => {
|
|
|
+ i++;
|
|
|
+ if (i === len) {
|
|
|
+ i = 0;
|
|
|
+ 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:[{
|
|
|
+ series: [{
|
|
|
type: 'pie',
|
|
|
name: '占比',
|
|
|
point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
+ events: {
|
|
|
+ click: function (e) {
|
|
|
+ console.log(e)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
data: chartData
|
|
|
}]
|
|
|
})
|
|
|
- timer && clearInterval(timer);
|
|
|
- },
|
|
|
- mouseOut: function(){ // 鼠标移出后需要继续执行轮播
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
+ legendItemClick: function (event) {
|
|
|
+ console.log(event);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ credits: {
|
|
|
+ enabled: false //去掉hightchats水印
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: null
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ crosshairs: true,
|
|
|
+ backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
+ // positioner: function(e){
|
|
|
+ // console.log(e, this)
|
|
|
+ // },
|
|
|
+ useHTML: false, //开启html模式
|
|
|
+ style: {
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ formatter: function (e) {
|
|
|
+ //console.log(this)
|
|
|
+ let num = chartData[this.colorIndex].num
|
|
|
+ this.percentage = Math.round(this.percentage)
|
|
|
+ return `${this.key}：<b>${this.percentage}%</b><br/>投资完成额：<b>${this.y}</b>亿<br/>投资数量：<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //pointFormat:
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ layout: 'vertical',
|
|
|
+ align: 'right',
|
|
|
+ verticalAlign: 'bottom',
|
|
|
+ itemStyle: {
|
|
|
+ fontSize: '20px',
|
|
|
+ color: '#fff',
|
|
|
+ x: 20
|
|
|
+ }
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ allowPointSelect: true,
|
|
|
+ showInLegend: true, // 图例
|
|
|
+ cursor: 'pointer',
|
|
|
+ size: 500,
|
|
|
+ innerSize: 300, //环形图中间空白，0为饼图
|
|
|
+ depth: 28, //立体高度
|
|
|
+ slicedOffset: 23, //动画距离
|
|
|
+ dataLabels: {
|
|
|
+ enabled: false, // 是否展示指示线
|
|
|
+ format: '{point.name}: {point.percentage}'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ center: ['60%', '50%'],
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ click: function (e) { //点击事件
|
|
|
+ },
|
|
|
+ mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
|
|
|
+ //console.log(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) {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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) => {
|
|
|
+ chartData.forEach((item, index) => {
|
|
|
item.sliced = false
|
|
|
item.selected = false
|
|
|
- if(index == i){
|
|
|
+ if (index == i) {
|
|
|
item.sliced = true
|
|
|
item.selected = true
|
|
|
}
|
|
|
})
|
|
|
chart.update({
|
|
|
- series:[{
|
|
|
+ series: [{
|
|
|
type: 'pie',
|
|
|
name: '占比',
|
|
|
point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
+ events: {
|
|
|
+ click: function (e) {
|
|
|
+ console.log(e)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -3684,18 +3738,18 @@ let app = new Vue({
|
|
|
i++;
|
|
|
if (i === len) {
|
|
|
i = 0;
|
|
|
- chartData.forEach((item,index) => {
|
|
|
+ chartData.forEach((item, index) => {
|
|
|
item.sliced = false
|
|
|
item.selected = false
|
|
|
})
|
|
|
chart.update({
|
|
|
- series:[{
|
|
|
+ series: [{
|
|
|
type: 'pie',
|
|
|
name: '占比',
|
|
|
point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
+ events: {
|
|
|
+ click: function (e) {
|
|
|
+ console.log(e)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -3703,31 +3757,31 @@ let app = new Vue({
|
|
|
}]
|
|
|
})
|
|
|
}
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
}
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- });
|
|
|
-
|
|
|
- function autoTooltip(point) {
|
|
|
- chart.tooltip.refresh(point);
|
|
|
- }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ });
|
|
|
+
|
|
|
+ function autoTooltip (point) {
|
|
|
+ chart.tooltip.refresh(point);
|
|
|
+ }
|
|
|
},
|
|
|
- initProjectList() {
|
|
|
+ initProjectList () {
|
|
|
let dataList = []
|
|
|
projectList.map(item => {
|
|
|
- dataList.push([item.office,item.name, item.value + '亿'])
|
|
|
+ dataList.push([item.office, item.name, item.value + '亿'])
|
|
|
})
|
|
|
this.storageRecordConfig2 = {
|
|
|
- header: ['企业集团', '项目名称', '投资金额'],
|
|
|
+ header: ['企业集团', '项目名称', '投资金额'],
|
|
|
headerBGC: '#05507b33',
|
|
|
oddRowBGC: '#05507b33',
|
|
|
evenRowBGC: '',
|
|
|
headerHeight: '40',
|
|
|
rowNum: 6,
|
|
|
- columnWidth: [100, 550,100],
|
|
|
+ columnWidth: [100, 550, 100],
|
|
|
align: ['center', 'center', 'center'],
|
|
|
data: dataList,
|
|
|
}
|
|
|
@@ -3799,7 +3853,9 @@ let app = new Vue({
|
|
|
type: 'inside',
|
|
|
show: true,
|
|
|
start: 1,
|
|
|
- end: 100
|
|
|
+ end: 100,
|
|
|
+ zoomOnMouseWheel: false, //滚轮是否触发缩放
|
|
|
+ moveOnMouseMove: false, //鼠标滚轮触发滚动
|
|
|
}
|
|
|
],
|
|
|
grid: {
|
|
|
@@ -4048,7 +4104,9 @@ let app = new Vue({
|
|
|
type: 'inside',
|
|
|
show: true,
|
|
|
start: 1,
|
|
|
- end: 100
|
|
|
+ end: 100,
|
|
|
+ zoomOnMouseWheel: false, //滚轮是否触发缩放
|
|
|
+ moveOnMouseMove: false, //鼠标滚轮触发滚动
|
|
|
}
|
|
|
],
|
|
|
legend: {
|
|
|
@@ -4132,7 +4190,7 @@ let app = new Vue({
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
// rotate: 40,
|
|
|
- padding: [0,0 , 0, 0],
|
|
|
+ padding: [0, 0, 0, 0],
|
|
|
textStyle: {
|
|
|
color: '#fff', //X轴文字颜色
|
|
|
fontSize: 12,
|
|
|
@@ -4244,7 +4302,9 @@ let app = new Vue({
|
|
|
type: 'inside',
|
|
|
show: true,
|
|
|
start: 1,
|
|
|
- end: 100
|
|
|
+ end: 100,
|
|
|
+ zoomOnMouseWheel: false, //滚轮是否触发缩放
|
|
|
+ moveOnMouseMove: false, //鼠标滚轮触发滚动
|
|
|
}
|
|
|
],
|
|
|
grid: {
|
|
|
@@ -4429,7 +4489,7 @@ let app = new Vue({
|
|
|
name: { //修改indicator文字的颜色
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
- fontSize:'20'
|
|
|
+ fontSize: '20'
|
|
|
}
|
|
|
},
|
|
|
splitNumber: 4, //有几个圈
|
|
|
@@ -4521,7 +4581,7 @@ let app = new Vue({
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
- data: ['设备费','设计费','施工费','材料费'],
|
|
|
+ data: ['设备费', '设计费', '施工费', '材料费'],
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
zhbyyy
