|
|
@@ -1175,35 +1175,35 @@ let app = new Vue({
|
|
|
{
|
|
|
name: '煤炭',
|
|
|
y: 294.61,
|
|
|
- x: 95,
|
|
|
+ num: 95,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '火电',
|
|
|
y: 39.24,
|
|
|
- x: 1,
|
|
|
+ num: 1,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '冶金',
|
|
|
y: 38.85,
|
|
|
- x: 6,
|
|
|
+ num: 6,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '焦化',
|
|
|
y: 16.49,
|
|
|
- x: 4,
|
|
|
+ num: 4,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '其他传统产业',
|
|
|
y: 14.19,
|
|
|
- x: 5,
|
|
|
+ num: 5,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
}
|
|
|
@@ -1294,7 +1294,7 @@ let app = new Vue({
|
|
|
},
|
|
|
formatter: function(e){
|
|
|
|
|
|
- let num = chartData[this.colorIndex].x
|
|
|
+ let num = chartData[this.colorIndex].num
|
|
|
this.percentage = this.percentage.toFixed(2)
|
|
|
return `${this.key}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
},
|
|
|
@@ -1497,54 +1497,92 @@ let app = new Vue({
|
|
|
|
|
|
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
var chartData = [
|
|
|
{
|
|
|
name: '新一代信息技术',
|
|
|
- y: 49.70,
|
|
|
- x: 75,
|
|
|
+ y: 29.26,
|
|
|
+ num: 75,
|
|
|
+
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '高端装备制造',
|
|
|
y: 100.41,
|
|
|
- x: 28,
|
|
|
+ num: 28,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '新材料',
|
|
|
y: 6.72,
|
|
|
- x: 4,
|
|
|
+ num: 4,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '生物',
|
|
|
y: 3.60,
|
|
|
- x: 58,
|
|
|
+ num: 58,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '新能源',
|
|
|
y: 170.03,
|
|
|
- x: 58,
|
|
|
+ num: 58,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '节能环保',
|
|
|
y: 26.30,
|
|
|
- x: 24,
|
|
|
+ num: 24,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '相关服务业',
|
|
|
y: 5.10,
|
|
|
- x: 2,
|
|
|
+ num: 2,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
}
|
|
|
@@ -1555,192 +1593,192 @@ let app = new Vue({
|
|
|
let that = this
|
|
|
|
|
|
var option = {
|
|
|
- colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
|
|
|
- chart: {
|
|
|
- type: 'pie',
|
|
|
- backgroundColor: 'rgba(0,0,0,0)',
|
|
|
- options3d: {
|
|
|
- enabled: true,
|
|
|
- alpha: 45,
|
|
|
-
|
|
|
- },
|
|
|
- events: {
|
|
|
-
|
|
|
- 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){
|
|
|
- that.showTip3 = true
|
|
|
- that.echartTitle = '战略性新兴产业'
|
|
|
- setTimeout(() => {
|
|
|
- that.initChartT1(chartData)
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- i++;
|
|
|
- if (i === len) {
|
|
|
- i = 0;
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
- },
|
|
|
- legendItemClick : function(event) {
|
|
|
- console.log(event);
|
|
|
- return true;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- credits: {
|
|
|
- enabled: false
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: '战略性新兴产业',
|
|
|
- style:{
|
|
|
- color: 'rgba(255,255,255,0.6)',
|
|
|
- fontSize:12,
|
|
|
- }
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- crosshairs: true,
|
|
|
- backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- useHTML: true,
|
|
|
- style: {
|
|
|
- color:'#fff',
|
|
|
- },
|
|
|
- formatter: function(e){
|
|
|
-
|
|
|
- let num = chartData[this.colorIndex].x
|
|
|
- this.percentage = this.percentage.toFixed(2)
|
|
|
- return `${this.key}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- pie: {
|
|
|
- allowPointSelect: true,
|
|
|
- showInLegend: false,
|
|
|
- cursor: 'pointer',
|
|
|
- size: 160,
|
|
|
- innerSize : 100,
|
|
|
- depth: 25,
|
|
|
- slicedOffset: 21,
|
|
|
- dataLabels: {
|
|
|
- enabled: false,
|
|
|
- format: '{point.name}: {point.percentage}'
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
-
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- that.showTip3 = true
|
|
|
- that.echartTitle = '战略性新兴产业'
|
|
|
- setTimeout(() => {
|
|
|
- that.initChartT1(chartData)
|
|
|
- })
|
|
|
- },
|
|
|
- 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.showTip3 = true
|
|
|
- that.echartTitle = '战略性新兴产业'
|
|
|
- setTimeout(() => {
|
|
|
- that.initChartT1(chartData)
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- 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: '占比',
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- that.showTip3 = true
|
|
|
- that.echartTitle = '战略性新兴产业'
|
|
|
- setTimeout(() => {
|
|
|
- that.initChartT1(chartData)
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- i++;
|
|
|
- if (i === len) {
|
|
|
- i = 0;
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- }
|
|
|
+ colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39','#5783ab'],
|
|
|
+ chart: {
|
|
|
+ type: 'pie',
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ options3d: {
|
|
|
+ enabled: true,
|
|
|
+ alpha: 45,
|
|
|
+
|
|
|
+ },
|
|
|
+ events: {
|
|
|
+
|
|
|
+ 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){
|
|
|
+ that.showTip3 = true
|
|
|
+ that.echartTitle = '战略性新兴产业'
|
|
|
+ setTimeout(() => {
|
|
|
+ that.initChartT1(chartData)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ i++;
|
|
|
+ if (i === len) {
|
|
|
+ i = 0;
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
+ legendItemClick : function(event) {
|
|
|
+ console.log(event);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ credits: {
|
|
|
+ enabled: false
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '战略性新兴产业',
|
|
|
+ style:{
|
|
|
+ color: 'rgba(255,255,255,0.6)',
|
|
|
+ fontSize:12,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ crosshairs: true,
|
|
|
+ backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ useHTML: true,
|
|
|
+ style: {
|
|
|
+ color:'#fff',
|
|
|
+ },
|
|
|
+ formatter: function(e){
|
|
|
+
|
|
|
+ let num = chartData[this.colorIndex].num
|
|
|
+ this.percentage = this.percentage.toFixed(2)
|
|
|
+ return `${this.key}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ allowPointSelect: true,
|
|
|
+ showInLegend: false,
|
|
|
+ cursor: 'pointer',
|
|
|
+ size: 160,
|
|
|
+ innerSize : 100,
|
|
|
+ depth: 25,
|
|
|
+ slicedOffset: 21,
|
|
|
+ dataLabels: {
|
|
|
+ enabled: false,
|
|
|
+ format: '{point.name}: {point.percentage}'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+
|
|
|
+ point: {
|
|
|
+ events:{
|
|
|
+ click:function(e){
|
|
|
+ that.showTip3 = true
|
|
|
+ that.echartTitle = '战略性新兴产业'
|
|
|
+ setTimeout(() => {
|
|
|
+ that.initChartT1(chartData)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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.showTip3 = true
|
|
|
+ that.echartTitle = '战略性新兴产业'
|
|
|
+ setTimeout(() => {
|
|
|
+ that.initChartT1(chartData)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: '占比',
|
|
|
+ point: {
|
|
|
+ events:{
|
|
|
+ click:function(e){
|
|
|
+ that.showTip3 = true
|
|
|
+ that.echartTitle = '战略性新兴产业'
|
|
|
+ setTimeout(() => {
|
|
|
+ that.initChartT1(chartData)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ i++;
|
|
|
+ if (i === len) {
|
|
|
+ i = 0;
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ }
|
|
|
|
|
|
var chart = Highcharts.chart('echartL5', option);
|
|
|
|
|
|
@@ -1844,49 +1882,49 @@ let app = new Vue({
|
|
|
{
|
|
|
name: '化工',
|
|
|
y: 43.86,
|
|
|
- x: 32,
|
|
|
+ num: 32,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '煤层气',
|
|
|
y: 29.49,
|
|
|
- x: 16,
|
|
|
+ num: 16,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '文旅康养',
|
|
|
y: 0.07,
|
|
|
- x: 1,
|
|
|
+ num: 1,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '体育',
|
|
|
y: 2.57,
|
|
|
- x: 5,
|
|
|
+ num: 5,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '酿造',
|
|
|
y: 15.83,
|
|
|
- x: 4,
|
|
|
+ num: 4,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '建筑房地产',
|
|
|
y: 120.81,
|
|
|
- x: 96,
|
|
|
+ num: 96,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '农业',
|
|
|
y: 15.47,
|
|
|
- x: 10,
|
|
|
+ num: 10,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
}
|
|
|
@@ -1977,7 +2015,7 @@ let app = new Vue({
|
|
|
},
|
|
|
formatter: function(e){
|
|
|
|
|
|
- let num = chartData[this.colorIndex].x
|
|
|
+ let num = chartData[this.colorIndex].num
|
|
|
this.percentage = this.percentage.toFixed(2)
|
|
|
return `${this.key}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
},
|
|
|
@@ -2180,35 +2218,35 @@ let app = new Vue({
|
|
|
{
|
|
|
name: '交通运输业',
|
|
|
y: 264.70,
|
|
|
- x: 38,
|
|
|
+ num: 38,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '煤气层管网',
|
|
|
y: 14.39,
|
|
|
- x: 14,
|
|
|
+ num: 14,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '物流贸易',
|
|
|
y: 18.07,
|
|
|
- x: 18,
|
|
|
+ num: 18,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '水务',
|
|
|
y: 69.73,
|
|
|
- x: 34,
|
|
|
+ num: 34,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '其他',
|
|
|
y: 3.64,
|
|
|
- x: 5,
|
|
|
+ num: 5,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
}
|
|
|
@@ -2299,7 +2337,7 @@ let app = new Vue({
|
|
|
},
|
|
|
formatter: function(e){
|
|
|
|
|
|
- let num = chartData[this.colorIndex].x
|
|
|
+ let num = chartData[this.colorIndex].num
|
|
|
this.percentage = this.percentage.toFixed(2)
|
|
|
return `${this.key}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
},
|
|
|
@@ -2656,14 +2694,14 @@ let app = new Vue({
|
|
|
{
|
|
|
name: '辅业',
|
|
|
y: 76.38,
|
|
|
- x: 84,
|
|
|
+ num: 84,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '主业',
|
|
|
y: 1287.50,
|
|
|
- x: 713,
|
|
|
+ num: 713,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
}
|
|
|
@@ -2772,7 +2810,7 @@ let app = new Vue({
|
|
|
},
|
|
|
formatter: function(e){
|
|
|
|
|
|
- let num = chartData[this.colorIndex].x
|
|
|
+ let num = chartData[this.colorIndex].num
|
|
|
this.percentage = this.percentage.toFixed(2)
|
|
|
return `${this.key}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
},
|
|
|
@@ -2989,14 +3027,14 @@ let app = new Vue({
|
|
|
{
|
|
|
name: '特别监管类',
|
|
|
y: 635.84,
|
|
|
- x: 168,
|
|
|
+ num: 168,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
},
|
|
|
{
|
|
|
name: '备案类',
|
|
|
y: 728.04,
|
|
|
- x: 465,
|
|
|
+ num: 465,
|
|
|
sliced: false,
|
|
|
selected: false,
|
|
|
}
|
|
|
@@ -3109,7 +3147,7 @@ let app = new Vue({
|
|
|
},
|
|
|
formatter: function(e){
|
|
|
|
|
|
- let num = chartData[this.colorIndex].x
|
|
|
+ let num = chartData[this.colorIndex].num
|
|
|
this.percentage = this.percentage.toFixed(2)
|
|
|
return `${this.key}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
},
|
unknown