|
|
@@ -1520,291 +1520,291 @@ let app = new Vue({
|
|
|
|
|
|
|
|
|
initChartL1 () {
|
|
|
- var chartData = []
|
|
|
- var timer = null;
|
|
|
- var timer2 = null;
|
|
|
- var i = 0;
|
|
|
- industryList.forEach((item,index) => {
|
|
|
- let obj = {
|
|
|
- name: item.name,
|
|
|
- y: item.value,
|
|
|
- sliced: false,
|
|
|
- selected: false,
|
|
|
- color: index == 0 ? 'rgb(243,178,119)' : index == 1 ? 'rgb(110,222,191)' : 'rgb(82,161,229)'
|
|
|
- }
|
|
|
- chartData.push(obj)
|
|
|
- })
|
|
|
- let that = this
|
|
|
- var chart = Highcharts.chart('echartR1', {
|
|
|
- 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){
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- i++;
|
|
|
- if (i === len) {
|
|
|
- i = 0;
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
- },
|
|
|
- legendItemClick : function(event) {
|
|
|
- console.log(event);
|
|
|
- return true;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- credits: {
|
|
|
- enabled: false
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: null
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- crosshairs: true,
|
|
|
- backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
- useHTML: true,
|
|
|
- style: {
|
|
|
- color:'#fff',
|
|
|
- },
|
|
|
- formatter: function(e){
|
|
|
-
|
|
|
- this.percentage = Math.round(this.percentage)
|
|
|
-
|
|
|
-
|
|
|
- return `${this.key}：<b>${this.percentage}%</b><br/>金额：<b>${this.y}</b>亿`
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
- legend: {
|
|
|
- layout: 'vertical',
|
|
|
- align: 'left',
|
|
|
- verticalAlign: 'bottom',
|
|
|
- itemStyle:{
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- pie: {
|
|
|
- allowPointSelect: true,
|
|
|
- showInLegend: true,
|
|
|
- cursor: 'pointer',
|
|
|
- size: 180,
|
|
|
- innerSize : 110,
|
|
|
- depth: 28,
|
|
|
- slicedOffset: 23,
|
|
|
- dataLabels: {
|
|
|
- enabled: false,
|
|
|
- format: '{point.name}: {point.percentage}'
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- center: ['35%','50%'],
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
-
|
|
|
- if (e.point.name == '战略新兴产业') {
|
|
|
- that.tipTitle2 = e.point.name
|
|
|
- that.showTip2 = true
|
|
|
- }
|
|
|
- },
|
|
|
- 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){
|
|
|
- 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) => {
|
|
|
- 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;
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- });
|
|
|
-
|
|
|
- function autoTooltip(point) {
|
|
|
- chart.tooltip.refresh(point);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ let myChart = echarts.init(this.$refs['echartR1'])
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+
|
|
|
+ position: (point,params,dom,rect,size) => {
|
|
|
+ if(params.name == '传统产业'){
|
|
|
+ return ['55%','25%']
|
|
|
+ } else if (params.name == '战略新兴产业') {
|
|
|
+ return ['55%','65%']
|
|
|
+ } else if (params.name == '基础产业') {
|
|
|
+ return ['18%','35%']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatter: params => {
|
|
|
+ return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.percent}% <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 金额：${params.value}亿`
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ color: ['#6682f5', '#69c0ff', '#43ede3', '#8ba2ff'],
|
|
|
+ legend: {
|
|
|
+ left: '2%',
|
|
|
+ bottom: '2%',
|
|
|
+ orient: 'vertical',
|
|
|
+
|
|
|
+ textStyle: {
|
|
|
+ color: '#9DB9EB',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['50%', '75%'],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ label:{
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: 'rgba(1,31,64,0.7)',
|
|
|
+ borderWidth: 6
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: industryList,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ let that = this
|
|
|
+ myChart.on('click', function (param) {
|
|
|
+ if (param.name == '战略新兴产业') {
|
|
|
+ that.tipTitle2 = param.name
|
|
|
+ that.showTip2 = true
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ myChart.setOption(option)
|
|
|
+ tools.loopShowTooltip(myChart, option, {
|
|
|
+ nterval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ })
|
|
|
},
|
|
|
initChartL2() {
|
|
|
let myChart = echarts.init(this.$refs['echartL2'])
|
|
|
@@ -2101,293 +2101,293 @@ let app = new Vue({
|
|
|
},
|
|
|
|
|
|
initChartR2() {
|
|
|
- var chartData = []
|
|
|
- var timer = null;
|
|
|
- var timer2 = null;
|
|
|
- var i = 0;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
- chartDateR2.forEach((item,index) => {
|
|
|
- let obj = {
|
|
|
- name: item.name,
|
|
|
- y: item.value2,
|
|
|
- x: item.value,
|
|
|
- sliced: false,
|
|
|
- selected: false,
|
|
|
- color: index == 0 ? '#43ede3' : '#8ba2ff'
|
|
|
- }
|
|
|
- chartData.push(obj)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
- })
|
|
|
- let that = this
|
|
|
- var chart = Highcharts.chart('echartR2', {
|
|
|
- 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){
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- i++;
|
|
|
- if (i === len) {
|
|
|
- i = 0;
|
|
|
- chartData.forEach((item,index) => {
|
|
|
- item.sliced = false
|
|
|
- item.selected = false
|
|
|
- })
|
|
|
- chart.update({
|
|
|
- series:[{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
- },
|
|
|
- legendItemClick : function(event) {
|
|
|
- console.log(event);
|
|
|
- return true;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- credits: {
|
|
|
- enabled: false
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: null
|
|
|
- },
|
|
|
- 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 = Math.round(this.percentage)
|
|
|
- return `${this.key}：<b>${this.percentage}%</b><br/>投资完成额：<b>${this.y}</b>亿<br/>投资数量：<b>${num}个</b>`
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
- legend: {
|
|
|
- layout: 'vertical',
|
|
|
- align: 'left',
|
|
|
- verticalAlign: 'bottom',
|
|
|
- itemStyle:{
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- pie: {
|
|
|
- allowPointSelect: true,
|
|
|
- showInLegend: true,
|
|
|
- cursor: 'pointer',
|
|
|
- size: 180,
|
|
|
- innerSize : 110,
|
|
|
- depth: 28,
|
|
|
- slicedOffset: 23,
|
|
|
- dataLabels: {
|
|
|
- enabled: false,
|
|
|
- format: '{point.name}: {point.percentage}'
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- center: ['35%','50%'],
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
- },
|
|
|
- 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){
|
|
|
- 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) => {
|
|
|
- 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) => {
|
|
|
- item.sliced = false
|
|
|
- item.selected = false
|
|
|
- })
|
|
|
- chart.update({
|
|
|
- series:[{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ let myChart = echarts.init(this.$refs['echartR2'])
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ position: (point,params,dom,rect,size) => {
|
|
|
+ if(params.name == '新建'){
|
|
|
+ return ['55%','45%']
|
|
|
+ } else {
|
|
|
+ return ['15%','40%']
|
|
|
}
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ formatter: params => {
|
|
|
+ return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.value}个 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 投资完成额：${params.data.value2}亿`
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ },
|
|
|
},
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- });
|
|
|
-
|
|
|
- function autoTooltip(point) {
|
|
|
- chart.tooltip.refresh(point);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+ color: [ '#43ede3', '#8ba2ff'],
|
|
|
+ legend: {
|
|
|
+ left: '5%',
|
|
|
+ bottom: '2%',
|
|
|
+ orient: 'vertical',
|
|
|
+
|
|
|
+ textStyle: {
|
|
|
+ color: '#9DB9EB',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['50%', '75%'],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ label:{
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: 'rgba(1,31,64,0.7)',
|
|
|
+ borderWidth: 6
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: chartDateR2,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ tools.loopShowTooltip(myChart, option, {
|
|
|
+ nterval: 10000,
|
|
|
+ loopSeries: true,
|
|
|
+ })
|
|
|
},
|
|
|
initProjectList() {
|
|
|
let dataList = []
|
unknown