|
|
@@ -5,6 +5,9 @@ let app = new Vue({
|
|
|
centerShow: false, // 中间内容显示
|
|
|
echartR4Chart: '',// 倒数第二个专用
|
|
|
echartR5Chart: '', // 倒是第一个专用
|
|
|
+ myChartTip1: '', // 弹窗单个柱状图专用
|
|
|
+ myChartTip2: '', // 弹窗两个柱状图专用
|
|
|
+ myChartTip3: '', // 弹窗两个柱状图专用
|
|
|
echartEnterpriseShow: false, // 企业额度分析控制
|
|
|
mapChart: '',//地图专用echarts
|
|
|
chartCarousel: '',//做大屏轮播专用echarts
|
|
|
@@ -250,6 +253,7 @@ let app = new Vue({
|
|
|
// 两个柱状图的弹窗
|
|
|
showChartLTipDouble (e) {
|
|
|
this.titleName = e
|
|
|
+ this.closeTap()
|
|
|
this.echartDoubleTipShow = true
|
|
|
setTimeout(() => {
|
|
|
this.initChartLTip2()
|
|
|
@@ -257,7 +261,7 @@ let app = new Vue({
|
|
|
})
|
|
|
},
|
|
|
initChartLTip () {
|
|
|
- let myChart = echarts.init(document.getElementById("echartSingleTip"));
|
|
|
+ this.myChartTip1 = echarts.init(document.getElementById("echartSingleTip"));
|
|
|
let option = {
|
|
|
grid: {
|
|
|
top: 40,
|
|
|
@@ -324,9 +328,8 @@ let app = new Vue({
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
- color: "#204561",
|
|
|
- width: 1,
|
|
|
- type: "dotted",
|
|
|
+ color: '#68b4dd66',
|
|
|
+ type: 'dashed',
|
|
|
},
|
|
|
},
|
|
|
//y轴线的颜色以及宽度
|
|
|
@@ -402,19 +405,19 @@ let app = new Vue({
|
|
|
// 小图标的宽高
|
|
|
},
|
|
|
};
|
|
|
- tools.loopShowTooltip(myChart, option, {
|
|
|
+ tools.loopShowTooltip(this.myChartTip1, option, {
|
|
|
nterval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
let that = this
|
|
|
- myChart.on('click', function (param) {
|
|
|
+ that.myChartTip1.on('click', function (param) {
|
|
|
that.projectListTipShow = true
|
|
|
|
|
|
})
|
|
|
- myChart.setOption(option);
|
|
|
+ that.myChartTip1.setOption(option);
|
|
|
},
|
|
|
initChartLTip2 () {
|
|
|
- let myChart = echarts.init(document.getElementById("echartSingleTip2"));
|
|
|
+ this.myChartTip2 = echarts.init(document.getElementById("echartSingleTip2"));
|
|
|
let option = {
|
|
|
grid: {
|
|
|
top: 40,
|
|
|
@@ -482,9 +485,8 @@ let app = new Vue({
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
- color: "#204561",
|
|
|
- width: 1,
|
|
|
- type: "dotted",
|
|
|
+ color: '#68b4dd66',
|
|
|
+ type: 'dashed',
|
|
|
},
|
|
|
},
|
|
|
//y轴线的颜色以及宽度
|
|
|
@@ -560,18 +562,18 @@ let app = new Vue({
|
|
|
// 小图标的宽高
|
|
|
},
|
|
|
};
|
|
|
- tools.loopShowTooltip(myChart, option, {
|
|
|
+ tools.loopShowTooltip(this.myChartTip2, option, {
|
|
|
nterval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
let that = this
|
|
|
- myChart.on('click', function (param) {
|
|
|
+ that.myChartTip2.on('click', function (param) {
|
|
|
that.projectListTipShow = true
|
|
|
})
|
|
|
- myChart.setOption(option);
|
|
|
+ that.myChartTip2.setOption(option);
|
|
|
},
|
|
|
initChartLTip3 () {
|
|
|
- let myChart = echarts.init(document.getElementById("echartSingleTip3"));
|
|
|
+ this.myChartTip3 = echarts.init(document.getElementById("echartSingleTip3"));
|
|
|
let option = {
|
|
|
grid: {
|
|
|
top: 40,
|
|
|
@@ -639,9 +641,8 @@ let app = new Vue({
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
- color: "#204561",
|
|
|
- width: 1,
|
|
|
- type: "dotted",
|
|
|
+ color: '#68b4dd66',
|
|
|
+ type: 'dashed',
|
|
|
},
|
|
|
},
|
|
|
//y轴线的颜色以及宽度
|
|
|
@@ -715,15 +716,15 @@ let app = new Vue({
|
|
|
y: 5,
|
|
|
},
|
|
|
};
|
|
|
- tools.loopShowTooltip(myChart, option, {
|
|
|
+ tools.loopShowTooltip(this.myChartTip3, option, {
|
|
|
nterval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
let that = this
|
|
|
- myChart.on('click', function (param) {
|
|
|
+ that.myChartTip3.on('click', function (param) {
|
|
|
that.projectListTipShow = true
|
|
|
})
|
|
|
- myChart.setOption(option);
|
|
|
+ that.myChartTip3.setOption(option);
|
|
|
},
|
|
|
closeTap () {
|
|
|
this.echartEnterpriseShow = false
|
|
|
@@ -731,6 +732,9 @@ let app = new Vue({
|
|
|
this.echartSingleTipShow = false
|
|
|
this.echartDoubleTipShow = false
|
|
|
this.projectListTipShow = false
|
|
|
+ this.myChartTip1 ? this.myChartTip1.dispose() : ''
|
|
|
+ this.myChartTip2 ? this.myChartTip2.dispose() : ''
|
|
|
+ this.myChartTip3 ? this.myChartTip3.dispose() : ''
|
|
|
},
|
|
|
//点击弹窗左半部分
|
|
|
popLeftClick () {
|
|
|
@@ -769,7 +773,9 @@ let app = new Vue({
|
|
|
this.closeTap()
|
|
|
this.titleUrl = e
|
|
|
this.titleName = name
|
|
|
- this.mapTipShow = true
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.mapTipShow = true
|
|
|
+ })
|
|
|
},
|
|
|
changeYellow () {
|
|
|
this.titleList.forEach((item, index) => {
|
|
|
@@ -1613,9 +1619,9 @@ let app = new Vue({
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
- color: "#204561",
|
|
|
+ color: "#68b4dd66",
|
|
|
width: 1,
|
|
|
- type: "dotted",
|
|
|
+ type: "dashed",
|
|
|
},
|
|
|
},
|
|
|
//y轴线的颜色以及宽度
|
|
|
@@ -2706,12 +2712,12 @@ let app = new Vue({
|
|
|
fontFamily: 'Microsoft YaHei'
|
|
|
},
|
|
|
axisPointer: {
|
|
|
- lineStyle: {
|
|
|
- type: 'dashed',
|
|
|
- width: 2,
|
|
|
- color: 'rgba(255,255,255,0.6)'
|
|
|
- },
|
|
|
- animation: true
|
|
|
+ // lineStyle: {
|
|
|
+ // type: 'dashed',
|
|
|
+ // width: 2,
|
|
|
+ // color: 'rgba(255,255,255,0.6)'
|
|
|
+ // },
|
|
|
+ animation: false
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
@@ -2778,15 +2784,15 @@ let app = new Vue({
|
|
|
symbolSize: function (data) {
|
|
|
return Math.sqrt(data[2]) * 5;
|
|
|
},
|
|
|
- label: {
|
|
|
- emphasis: {
|
|
|
- show: true,
|
|
|
- formatter: function (param) {
|
|
|
- return param.data[2];
|
|
|
- },
|
|
|
- position: 'top'
|
|
|
- }
|
|
|
- },
|
|
|
+ // label: {
|
|
|
+ // emphasis: {
|
|
|
+ // show: true,
|
|
|
+ // formatter: function (param) {
|
|
|
+ // return param.data[2];
|
|
|
+ // },
|
|
|
+ // position: 'top'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#69c0ff'
|
|
|
@@ -2801,15 +2807,15 @@ let app = new Vue({
|
|
|
symbolSize: function (data) {
|
|
|
return Math.sqrt(data[2]) * 5;
|
|
|
},
|
|
|
- label: {
|
|
|
- emphasis: {
|
|
|
- show: true,
|
|
|
- formatter: function (param) {
|
|
|
- return param.data[2];
|
|
|
- },
|
|
|
- position: 'top'
|
|
|
- }
|
|
|
- },
|
|
|
+ // label: {
|
|
|
+ // emphasis: {
|
|
|
+ // show: true,
|
|
|
+ // formatter: function (param) {
|
|
|
+ // return param.data[2];
|
|
|
+ // },
|
|
|
+ // position: 'top'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#957DFF'
|
|
|
@@ -2858,11 +2864,11 @@ let app = new Vue({
|
|
|
fontFamily: 'Microsoft YaHei'
|
|
|
},
|
|
|
axisPointer: {
|
|
|
- lineStyle: {
|
|
|
- type: 'dashed',
|
|
|
- width: 2,
|
|
|
- color: 'rgba(255,255,255,0.6)'
|
|
|
- },
|
|
|
+ // lineStyle: {
|
|
|
+ // type: 'dashed',
|
|
|
+ // width: 2,
|
|
|
+ // color: 'rgba(255,255,255,0.6)'
|
|
|
+ // },
|
|
|
animation: true
|
|
|
}
|
|
|
},
|
|
|
@@ -2929,15 +2935,15 @@ let app = new Vue({
|
|
|
symbolSize: function (data) {
|
|
|
return Math.sqrt(data[2]) * 5;
|
|
|
},
|
|
|
- label: {
|
|
|
- emphasis: {
|
|
|
- show: true,
|
|
|
- formatter: function (param) {
|
|
|
- return param.data[2];
|
|
|
- },
|
|
|
- position: 'top'
|
|
|
- }
|
|
|
- },
|
|
|
+ // label: {
|
|
|
+ // emphasis: {
|
|
|
+ // show: true,
|
|
|
+ // formatter: function (param) {
|
|
|
+ // return param.data[2];
|
|
|
+ // },
|
|
|
+ // position: 'top'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#40A9FF'
|
|
|
@@ -2952,15 +2958,15 @@ let app = new Vue({
|
|
|
symbolSize: function (data) {
|
|
|
return Math.sqrt(data[2]) * 5;
|
|
|
},
|
|
|
- label: {
|
|
|
- emphasis: {
|
|
|
- show: true,
|
|
|
- formatter: function (param) {
|
|
|
- return param.data[2];
|
|
|
- },
|
|
|
- position: 'top'
|
|
|
- }
|
|
|
- },
|
|
|
+ // label: {
|
|
|
+ // emphasis: {
|
|
|
+ // show: true,
|
|
|
+ // formatter: function (param) {
|
|
|
+ // return param.data[2];
|
|
|
+ // },
|
|
|
+ // position: 'top'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#957DFF'
|
|
|
@@ -3678,9 +3684,9 @@ let app = new Vue({
|
|
|
},
|
|
|
itemWidth: 50, //图形的宽度，即长条的宽度。
|
|
|
itemHeight: 400, //图形的高度，即长条的高度。
|
|
|
- textStyle:{
|
|
|
- fontSize:30,
|
|
|
- color:'#fff'
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 30,
|
|
|
+ color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
geo: {
|
|
|
@@ -4291,7 +4297,7 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#71D5FF',
|
|
|
+ color: '#74a55d',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
@@ -4311,7 +4317,7 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#4D6FF6',
|
|
|
+ color: '#cea446',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
@@ -4331,7 +4337,7 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#877CFC',
|
|
|
+ color: '#b84b4b',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
@@ -4351,7 +4357,7 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#52BF80',
|
|
|
+ color: '#5593ab',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
@@ -4371,7 +4377,7 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#CADD62',
|
|
|
+ color: '#2a7652',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
@@ -4431,7 +4437,7 @@ let app = new Vue({
|
|
|
}
|
|
|
})
|
|
|
let option = {
|
|
|
- color: ['#80F1BE', '#fec42c', '#dd4444'],
|
|
|
+ color: ['#74a55d', '#cea446', '#b84b4b'],
|
|
|
dataZoom: [
|
|
|
{
|
|
|
// start: 9,//默认为@
|
|
|
@@ -4684,7 +4690,7 @@ let app = new Vue({
|
|
|
bottom: '20%',
|
|
|
},
|
|
|
legend: {
|
|
|
- data: ["高风险", "中风险", '低风险'],
|
|
|
+ data: ["低风险", "中风险", '高风险'],
|
|
|
x: 'center',
|
|
|
y: '15px',
|
|
|
textStyle: {
|
|
|
@@ -4762,11 +4768,11 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#CADD62',
|
|
|
+ color: '#b84b4b',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: '#082550',
|
|
|
+ color: '#b84b4b',
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
@@ -4783,11 +4789,11 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#4D6FF6',
|
|
|
+ color: '#cea446',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: '#082550',
|
|
|
+ color: '#cea446',
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
@@ -4804,11 +4810,11 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#52BF80',
|
|
|
+ color: '#2a7652',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: '#082550',
|
|
|
+ color: '#2a7652',
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
@@ -5020,7 +5026,7 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#71D5FF',
|
|
|
+ color: '#74a55d',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
@@ -5040,7 +5046,7 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#4D6FF6',
|
|
|
+ color: '#cea446',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
@@ -5060,7 +5066,7 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#877CFC',
|
|
|
+ color: '#b84b4b',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
@@ -5080,7 +5086,7 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#52BF80',
|
|
|
+ color: '#5593ab',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
zhbyyy