|
|
@@ -197,9 +197,159 @@
|
|
|
<div class="con_left_c">
|
|
|
<div class="con_div">
|
|
|
<div class="qkq_tit ">招商指标/实施数量</div>
|
|
|
- <div id="qkq_zszb"></div>
|
|
|
+ <div class="clearfix">
|
|
|
+ <div id="qkq_zszb1"></div>
|
|
|
+ <div id="qkq_zszb2"></div>
|
|
|
+ <div class="qkq_zsss">
|
|
|
+ <p>招商指标：500个</p>
|
|
|
+ <p>实施数量：500个</p>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="con_div">
|
|
|
+ <div id="qkq_btzb"></div>
|
|
|
+ </div>
|
|
|
+ <div class="con_div">
|
|
|
+ <div class="qkq_tit ">服务企业台账</div>
|
|
|
+ <div class="qkq_wrzwq clearfix">
|
|
|
+ <div class="qkq_si_div">
|
|
|
+ <p><b>728</b><span>次</span></p>
|
|
|
+ <p>深入企业</p>
|
|
|
+ </div>
|
|
|
+ <div class="qkq_si_div">
|
|
|
+ <p><b>787</b><span>万元</span></p>
|
|
|
+ <p>输送补贴</p>
|
|
|
+ </div>
|
|
|
+ <div class="qkq_si_div">
|
|
|
+ <p><b>187</b><span>个</span></p>
|
|
|
+ <p>输送岗位</p>
|
|
|
+ </div>
|
|
|
+ <div class="qkq_si_div">
|
|
|
+ <p><b>92</b><span>项</span></p>
|
|
|
+ <p>提供政策</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+<div class="con_left_d">
|
|
|
+ <div class="con_div">
|
|
|
+ <div class="qkq_tit ">汽车零部件产业局</div>
|
|
|
+ <div class="con_col">
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>招商计划</span>
|
|
|
+ <b>89</b>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>实施计划</span>
|
|
|
+ <b>76</b>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>占比</span>
|
|
|
+ <b>76%</b>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="qkq_chart4" class="qkq_chart"></div>
|
|
|
+ <div class="con_col_2 clearfix">
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>服务企业</span>
|
|
|
+ <b>117</b>
|
|
|
+ <span>次</span>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>服务企业</span>
|
|
|
+ <b>92</b>
|
|
|
+ <span>家</span>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>服务覆盖率</span>
|
|
|
+ <b>97%</b>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>服务满意率</span>
|
|
|
+ <b>100%</b>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="con_div">
|
|
|
+ <div class="qkq_tit ">一汽大众项目服务局</div>
|
|
|
+ <div class="con_col">
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>招商计划</span>
|
|
|
+ <b>89</b>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>实施计划</span>
|
|
|
+ <b>76</b>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>占比</span>
|
|
|
+ <b>76%</b>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="qkq_chart5" class="qkq_chart"></div>
|
|
|
+ <div class="con_col_2 clearfix">
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>服务企业</span>
|
|
|
+ <b>117</b>
|
|
|
+ <span>次</span>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>服务企业</span>
|
|
|
+ <b>92</b>
|
|
|
+ <span>家</span>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>服务覆盖率</span>
|
|
|
+ <b>97%</b>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>服务满意率</span>
|
|
|
+ <b>100%</b>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="con_div">
|
|
|
+ <div class="qkq_tit ">一汽丰田项目服务局</div>
|
|
|
+ <div class="con_col">
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>招商计划</span>
|
|
|
+ <b>89</b>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>实施计划</span>
|
|
|
+ <b>76</b>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>占比</span>
|
|
|
+ <b>76%</b>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="qkq_chart6" class="qkq_chart"></div>
|
|
|
+ <div class="con_col_2 clearfix">
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>服务企业</span>
|
|
|
+ <b>117</b>
|
|
|
+ <span>次</span>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>服务企业</span>
|
|
|
+ <b>92</b>
|
|
|
+ <span>家</span>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>服务覆盖率</span>
|
|
|
+ <b>97%</b>
|
|
|
+ </div>
|
|
|
+ <div class="con_col_c">
|
|
|
+ <span>服务满意率</span>
|
|
|
+ <b>100%</b>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
|
|
|
<!--左侧结束-->
|
|
|
</div>
|
|
|
@@ -280,12 +430,14 @@ export default {
|
|
|
this.qkq_chart1();
|
|
|
this.qkq_chart2();
|
|
|
this.qkq_chart3();
|
|
|
- // this.qkq_chart4();
|
|
|
- // this.qkq_chart5();
|
|
|
- // this.qkq_chart6();
|
|
|
+ this.qkq_chart4();
|
|
|
+ this.qkq_chart5();
|
|
|
+ this.qkq_chart6();
|
|
|
this.getCurrentTime();
|
|
|
this.qkq_zxt();
|
|
|
- this.qkq_zszb();
|
|
|
+ this.qkq_zszb1();
|
|
|
+ this.qkq_zszb2();
|
|
|
+ this.qkq_btzb();
|
|
|
// 每秒刷新时间
|
|
|
setInterval(() => {
|
|
|
this.getCurrentTime();
|
|
|
@@ -325,7 +477,7 @@ export default {
|
|
|
var zongjine = [2000, 3000];
|
|
|
var xingm = ['工业类招商', '商业类招商'];
|
|
|
var option = {
|
|
|
- color: ['#61A8FF'], //进度条颜色
|
|
|
+ color: ['#4171ab'], //进度条颜色
|
|
|
grid: {
|
|
|
left: '2%', //如果离左边太远就用这个......
|
|
|
right: '2%',
|
|
|
@@ -396,10 +548,10 @@ export default {
|
|
|
y2: 0,
|
|
|
colorStops: [{
|
|
|
offset: 0,
|
|
|
- color: '#155ce9'
|
|
|
+ color: '#0d3b91'
|
|
|
}, {
|
|
|
offset: 1,
|
|
|
- color: '#00eaff'
|
|
|
+ color: '#00abda'
|
|
|
}],
|
|
|
}
|
|
|
},
|
|
|
@@ -541,13 +693,13 @@ export default {
|
|
|
y: 1,
|
|
|
x2: 0,
|
|
|
y2: 0,
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: '#155ce9'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#00eaff'
|
|
|
- }],
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#0d3b91'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#00abda'
|
|
|
+ }],
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
@@ -688,13 +840,13 @@ export default {
|
|
|
y: 1,
|
|
|
x2: 0,
|
|
|
y2: 0,
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: '#155ce9'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#00eaff'
|
|
|
- }],
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#0d3b91'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#00abda'
|
|
|
+ }],
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
@@ -855,13 +1007,13 @@ export default {
|
|
|
y: 1,
|
|
|
x2: 0,
|
|
|
y2: 0,
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: '#155ce9'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#00eaff'
|
|
|
- }],
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#0d3b91'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#00abda'
|
|
|
+ }],
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
@@ -1001,13 +1153,13 @@ export default {
|
|
|
y: 1,
|
|
|
x2: 0,
|
|
|
y2: 0,
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: '#155ce9'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#00eaff'
|
|
|
- }],
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#0d3b91'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#00abda'
|
|
|
+ }],
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
@@ -1147,13 +1299,13 @@ export default {
|
|
|
y: 1,
|
|
|
x2: 0,
|
|
|
y2: 0,
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: '#155ce9'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#00eaff'
|
|
|
- }],
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#0d3b91'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#00abda'
|
|
|
+ }],
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
@@ -1358,228 +1510,511 @@ export default {
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
},
|
|
|
- qkq_zszb(){
|
|
|
- var myChart = echarts.init(document.getElementById('qkq_zszb'));
|
|
|
- // 数据进度值
|
|
|
- var dataArr = 60;
|
|
|
- if (data == undefined) {
|
|
|
- dataArr = 0;
|
|
|
+ qkq_zszb1(){
|
|
|
+ var myChart = echarts.init(document.getElementById('qkq_zszb1'));
|
|
|
+ const dataArr = [
|
|
|
+ {
|
|
|
+ value: 50,
|
|
|
+ name: '招商指标',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#1f79b6', // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#0dd2db', // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ const colorSet = [
|
|
|
+ [0.50, color],
|
|
|
+ [1, '#15337C'],
|
|
|
+ ];
|
|
|
+ const rich = {
|
|
|
+ white: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#fff',
|
|
|
+ fontWeight: '500',
|
|
|
+ },
|
|
|
+ bule: {
|
|
|
+ fontSize: 22,
|
|
|
+ fontFamily: 'DINBold',
|
|
|
+ color: '#fff',
|
|
|
+ fontWeight: '700',
|
|
|
+ },
|
|
|
+ radius: {
|
|
|
+ width: 350,
|
|
|
+ height: 80,
|
|
|
+ // lineHeight:80,
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: '#0092F2',
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#fff',
|
|
|
+ backgroundColor: '#1B215B',
|
|
|
+ borderRadius: 20,
|
|
|
+ textAlign: 'center',
|
|
|
+ },
|
|
|
+ size: {
|
|
|
+ height: 400,
|
|
|
+ padding: [100, 0, 0, 0],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ formatter: '{a} <br/>{b} : {c}%',
|
|
|
+ },
|
|
|
+
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'gauge',
|
|
|
+ radius: '70%',
|
|
|
+ startAngle: '225',
|
|
|
+ endAngle: '-45',
|
|
|
+ pointer: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ formatter: function (value) {
|
|
|
+ var num = Math.round(value);
|
|
|
+ return '{bule|' + num + '}{white|个}';
|
|
|
+ },
|
|
|
+ rich: rich,
|
|
|
+ offsetCenter: ['0%', '0%'],
|
|
|
+ },
|
|
|
+
|
|
|
+ data: dataArr,
|
|
|
+ title: {
|
|
|
+ show: true,
|
|
|
+ color: '#fff',
|
|
|
+ offsetCenter: ['0', '75%'],
|
|
|
+ fontSize: 14
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: colorSet,
|
|
|
+ width: 18,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowOffsetY: 0,
|
|
|
+ opacity: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ length: 35,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#00377a',
|
|
|
+ width: 2,
|
|
|
+ type: 'solid',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ if(option){
|
|
|
+ myChart.setOption(option);
|
|
|
}
|
|
|
- var option = {
|
|
|
- title: {
|
|
|
- show: true,
|
|
|
- text: '任务进度',
|
|
|
- x: '50%',
|
|
|
- y: '57%',
|
|
|
- z: 8,
|
|
|
+ },
|
|
|
+ qkq_zszb2(){
|
|
|
+ var myChart = echarts.init(document.getElementById('qkq_zszb2'));
|
|
|
+ const dataArr = [
|
|
|
+ {
|
|
|
+ value: 91,
|
|
|
+ name: '实施数量',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#1f79b6', // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#0dd2db', // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ const colorSet = [
|
|
|
+ [0.91, color],
|
|
|
+ [1, '#15337C'],
|
|
|
+ ];
|
|
|
+ const rich = {
|
|
|
+ white: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#fff',
|
|
|
+ fontWeight: '500',
|
|
|
+ },
|
|
|
+ bule: {
|
|
|
+ fontSize: 22,
|
|
|
+ fontFamily: 'DINBold',
|
|
|
+ color: '#fff',
|
|
|
+ fontWeight: '700',
|
|
|
+ },
|
|
|
+ radius: {
|
|
|
+ width: 350,
|
|
|
+ height: 80,
|
|
|
+ // lineHeight:80,
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: '#0092F2',
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#fff',
|
|
|
+ backgroundColor: '#1B215B',
|
|
|
+ borderRadius: 20,
|
|
|
textAlign: 'center',
|
|
|
- textStyle: {
|
|
|
- color: '#f1f7fe',
|
|
|
- fontSize: 20,
|
|
|
- fontWeight: 'normal'
|
|
|
- },
|
|
|
-
|
|
|
},
|
|
|
- series: [{
|
|
|
- name: "内部（环形）进度条",
|
|
|
- type: "gauge",
|
|
|
- // center: ['20%', '50%'],
|
|
|
- radius: '60%',
|
|
|
- splitNumber: 10,
|
|
|
+ size: {
|
|
|
+ height: 400,
|
|
|
+ padding: [100, 0, 0, 0],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ formatter: '{a} <br/>{b} : {c}%',
|
|
|
+ },
|
|
|
+
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'gauge',
|
|
|
+ radius: '70%',
|
|
|
+ startAngle: '225',
|
|
|
+ endAngle: '-45',
|
|
|
+ pointer: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ formatter: function (value) {
|
|
|
+ var num = Math.round(value);
|
|
|
+ return '{bule|' + num + '}{white|个}';
|
|
|
+ },
|
|
|
+ rich: rich,
|
|
|
+ offsetCenter: ['0%', '0%'],
|
|
|
+ },
|
|
|
+
|
|
|
+ data: dataArr,
|
|
|
+ title: {
|
|
|
+ show: true,
|
|
|
+ color: '#fff',
|
|
|
+ offsetCenter: ['0', '75%'],
|
|
|
+ fontSize: 14
|
|
|
+ },
|
|
|
axisLine: {
|
|
|
+ show: true,
|
|
|
lineStyle: {
|
|
|
- color: [
|
|
|
- [dataArr / 100, '#458EFD'],
|
|
|
- [1, "#04335d"]
|
|
|
- ],
|
|
|
- width: 14
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false,
|
|
|
+ color: colorSet,
|
|
|
+ width: 18,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowOffsetY: 0,
|
|
|
+ opacity: 1,
|
|
|
+ },
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
-
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
+ length: 35,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#00377a',
|
|
|
+ width: 2,
|
|
|
+ type: 'solid',
|
|
|
+ },
|
|
|
},
|
|
|
- pointer: {
|
|
|
+ axisLabel: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ if(option){
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ qkq_btzb(){
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ var myChart = echarts.init(document.getElementById('qkq_btzb'));
|
|
|
+ var xData = ['2018', '2019', '2020', '2021', '2022', '2023', '2024']
|
|
|
+ var lineData = [100, 100, 100, 100, 100, 100, 100]
|
|
|
+ var lastYearData = [3, 20, 62, 34, 55, 65, 33];
|
|
|
+ var thisYearData = [11, 38, 23, 39, 66, 66, 79];
|
|
|
+ var timeLineData = [1];
|
|
|
+ let legend=['工业类', '商业类'];
|
|
|
+ let textColor = "#fff";
|
|
|
+ let lineColor="rgba(16, 62, 91, 0.2)";
|
|
|
+ let colors = [{
|
|
|
+ borderColor: "rgba(227,161,96,1)",
|
|
|
+ start: "rgba(227,161,96,0.8)",
|
|
|
+ end: "rgba(227,161,96,0.3)"
|
|
|
+ },
|
|
|
{
|
|
|
- name: '外部刻度',
|
|
|
- type: 'gauge',
|
|
|
- // center: ['20%', '50%'],
|
|
|
- radius: '70%',
|
|
|
- min: 0, //最小刻度
|
|
|
- max: 100, //最大刻度
|
|
|
- splitNumber: 10, //刻度数量
|
|
|
- startAngle: 225,
|
|
|
- endAngle: -45,
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- // 仪表盘刻度线
|
|
|
- lineStyle: {
|
|
|
- width: 2,
|
|
|
- color: [
|
|
|
- [1, '#04335d']
|
|
|
- ]
|
|
|
- }
|
|
|
+ borderColor: "rgba(0,222,255,1)",
|
|
|
+ start: "rgba(0,222,255,0.3)",
|
|
|
+ end: "rgba(0,222,255,0.8)"
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ let borderData = [];
|
|
|
+ let scale = 2;
|
|
|
+ borderData = xData.map(item => {
|
|
|
+ return scale;
|
|
|
+ });
|
|
|
+ var option = {
|
|
|
+ baseOption: {
|
|
|
+ timeline: {
|
|
|
+ show: false,
|
|
|
+ top: 0,
|
|
|
+ data: []
|
|
|
},
|
|
|
- //仪表盘文字
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- color: '#868FDF',
|
|
|
- distance: 25,
|
|
|
- formatter: function(v) {
|
|
|
- switch (v + '') {
|
|
|
- case '0':
|
|
|
- return '0';
|
|
|
- case '10':
|
|
|
- return '10';
|
|
|
- case '20':
|
|
|
- return '20';
|
|
|
- case '30':
|
|
|
- return '30';
|
|
|
- case '40':
|
|
|
- return '40';
|
|
|
- case '50':
|
|
|
- return '50';
|
|
|
- case '60':
|
|
|
- return '60';
|
|
|
- case '70':
|
|
|
- return '70';
|
|
|
- case '80':
|
|
|
- return '80';
|
|
|
- case '90':
|
|
|
- return '90';
|
|
|
- case '100':
|
|
|
- return '100';
|
|
|
- }
|
|
|
- }
|
|
|
- }, //刻度标签。
|
|
|
- axisTick: {
|
|
|
- show: true,
|
|
|
- splitNumber: 7,
|
|
|
- lineStyle: {
|
|
|
- color: '#3082FE', //用颜色渐变函数不起作用
|
|
|
- width: 2,
|
|
|
+ legend: {
|
|
|
+ top: '0%',
|
|
|
+ right: '5%',
|
|
|
+ itemWidth: 10,
|
|
|
+ itemHeight: 5,
|
|
|
+ // itemGap: 343,
|
|
|
+ icon: 'horizontal',
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 14,
|
|
|
},
|
|
|
- length: -8
|
|
|
- }, //刻度样式
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- length: -20,
|
|
|
- lineStyle: {
|
|
|
- color: '#458EFD', //用颜色渐变函数不起作用
|
|
|
- }
|
|
|
- }, //分隔线样式
|
|
|
- detail: {
|
|
|
- show: false
|
|
|
+ data: legend
|
|
|
},
|
|
|
- pointer: {
|
|
|
+ grid: [{
|
|
|
+ show: false,
|
|
|
+ left: '5%',
|
|
|
+ top: '10%',
|
|
|
+ bottom: '8%',
|
|
|
+ containLabel: true,
|
|
|
+ width: '37%'
|
|
|
+ }, {
|
|
|
+ show: false,
|
|
|
+ left: '53%',
|
|
|
+ top: '10%',
|
|
|
+ bottom: '8%',
|
|
|
+ width: '0%'
|
|
|
+ }, {
|
|
|
+ show: false,
|
|
|
+ right: '2%',
|
|
|
+ top: '10%',
|
|
|
+ bottom: '8%',
|
|
|
+ containLabel: true,
|
|
|
+ width: '37%'
|
|
|
+ }],
|
|
|
+ xAxis: [{
|
|
|
+ type: 'value',
|
|
|
+ inverse: true,
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ position: 'top',
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ color: textColor
|
|
|
+ },
|
|
|
+ splitLine:{
|
|
|
+ show: true,
|
|
|
+ lineStyle:{
|
|
|
+ color:lineColor
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ gridIndex: 1,
|
|
|
show: false
|
|
|
- }
|
|
|
+ }, {
|
|
|
+ gridIndex: 2,
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ position: 'top',
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ color: textColor
|
|
|
+ },
|
|
|
+ splitLine:{
|
|
|
+ show: true,
|
|
|
+ lineStyle:{
|
|
|
+ color:lineColor
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ inverse: true,
|
|
|
+ position: 'right',
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle:{
|
|
|
+ color:lineColor
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: xData
|
|
|
+ }, {
|
|
|
+ gridIndex: 1,
|
|
|
+ type: 'category',
|
|
|
+ inverse: true,
|
|
|
+ position: 'left',
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ padding:[30,0,0,0],
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 14
|
|
|
+ },
|
|
|
+ align: "center"
|
|
|
+
|
|
|
+ },
|
|
|
+ data: xData.map(function(value) {
|
|
|
+ return {
|
|
|
+ value: value,
|
|
|
+ textStyle: {
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, {
|
|
|
+ gridIndex: 2,
|
|
|
+ type: 'category',
|
|
|
+ inverse: true,
|
|
|
+ position: 'left',
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle:{
|
|
|
+ color:lineColor
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+
|
|
|
+ },
|
|
|
+ data: xData
|
|
|
+ }],
|
|
|
+ series: []
|
|
|
+
|
|
|
},
|
|
|
- /*内部*/
|
|
|
- {
|
|
|
- type: 'pie',
|
|
|
- radius: ['0', '40%'],
|
|
|
- center: ['50%', '50%'],
|
|
|
- z: 8,
|
|
|
- hoverAnimation: false,
|
|
|
- data: [{
|
|
|
- name: '检查进度',
|
|
|
- value: dataArr,
|
|
|
+ options: []
|
|
|
+ }
|
|
|
+
|
|
|
+ option.baseOption.timeline.data.push(timeLineData[0])
|
|
|
+ option.options.push({
|
|
|
+ series: [{
|
|
|
+ name: "工业类",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 15,
|
|
|
+ stack: "1",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: '#3398ff'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#7db0fd'
|
|
|
- }])
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: colors[0].start
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: colors[0].end
|
|
|
+ }
|
|
|
+ ]),
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
label: {
|
|
|
normal: {
|
|
|
- formatter: function(params) {
|
|
|
- return params.value + '%';
|
|
|
- },
|
|
|
- color: '#FFFFFF',
|
|
|
- fontSize: 20,
|
|
|
- fontWeight: "bold",
|
|
|
- position: 'center',
|
|
|
- show: true
|
|
|
+ show: true,
|
|
|
}
|
|
|
},
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- }],
|
|
|
- },
|
|
|
- /*外一层*/
|
|
|
- {
|
|
|
- type: "pie",
|
|
|
- radius: "45%",
|
|
|
- startAngle: 220,
|
|
|
- endAngle: -40,
|
|
|
- hoverAnimation: false,
|
|
|
- center: ["50%", "50%"],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- label: {
|
|
|
- show: false
|
|
|
+ data: lastYearData,
|
|
|
+ animationEasing: "elasticOut"
|
|
|
},
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data: [{
|
|
|
- value: 1,
|
|
|
+ {
|
|
|
+ name: "工业类",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 15,
|
|
|
+ stack: "1",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: '#8DC4FD'
|
|
|
+ color: colors[0].borderColor
|
|
|
+
|
|
|
}
|
|
|
- }
|
|
|
- }],
|
|
|
- },
|
|
|
- //外二层圈
|
|
|
- {
|
|
|
- type: "pie",
|
|
|
- radius: "50%",
|
|
|
- center: ["50%", "50%"],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- z: 0,
|
|
|
- hoverAnimation: false,
|
|
|
- label: {
|
|
|
- show: false
|
|
|
+ },
|
|
|
+ data: borderData
|
|
|
},
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
+ {
|
|
|
+ name: "商业类",
|
|
|
+ type: "bar",
|
|
|
+ stack: "2",
|
|
|
+ barWidth: 15,
|
|
|
+ xAxisIndex: 2,
|
|
|
+ yAxisIndex: 2,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: colors[1].start
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: colors[1].end
|
|
|
+ }
|
|
|
+ ]),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: thisYearData,
|
|
|
+ animationEasing: "elasticOut"
|
|
|
},
|
|
|
- data: [{
|
|
|
- "value": 1,
|
|
|
+ {
|
|
|
+ name: "商业类",
|
|
|
+ type: "bar",
|
|
|
+ xAxisIndex: 2,
|
|
|
+ yAxisIndex: 2,
|
|
|
+ barWidth: 15,
|
|
|
+ stack: "2",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: '#055da5'
|
|
|
+ color: colors[1].borderColor
|
|
|
+
|
|
|
}
|
|
|
- }
|
|
|
- }]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
+ },
|
|
|
+ data: borderData
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ });
|
|
|
|
|
|
if(option){
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
};
|
|
|
|
bihuisong