|
|
@@ -2,6 +2,8 @@ let app = new Vue({
|
|
|
el: '#app',
|
|
|
data () {
|
|
|
return {
|
|
|
+ projectNum:'',
|
|
|
+ centerType: false, // 中间3D饼图
|
|
|
boardType: '', // 哪边的项目看板
|
|
|
pullShow: false, // 选择年份弹窗
|
|
|
pollList: [],
|
|
|
@@ -116,8 +118,8 @@ let app = new Vue({
|
|
|
let arr = paramsArr[i].split('=')
|
|
|
obj[arr[0]] = arr[1];
|
|
|
}
|
|
|
- if(obj.model){
|
|
|
- obj.model=='A' || obj.model=='a'?this.mockData = false:this.mockData = true
|
|
|
+ if (obj.model) {
|
|
|
+ obj.model == 'A' || obj.model == 'a' ? this.mockData = false : this.mockData = true
|
|
|
}
|
|
|
},
|
|
|
// 计算展示的年份
|
|
|
@@ -663,7 +665,7 @@ let app = new Vue({
|
|
|
}
|
|
|
get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/getKeyData', value).then(res => {
|
|
|
// 头部指标
|
|
|
- if(!res.data){
|
|
|
+ if (!res.data) {
|
|
|
return
|
|
|
}
|
|
|
center4[0] = res.data.transformations.estateAmount
|
|
|
@@ -758,8 +760,12 @@ let app = new Vue({
|
|
|
}
|
|
|
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getTwoLevelData', value).then(res => {
|
|
|
that.config6.data = []
|
|
|
+ if(this.projectNum == 211||this.projectNum == 212){
|
|
|
+ that.config6.header = ["所属集团", "项目名称", '实施主体', '投中项目阶段', '投资总额（万元）']
|
|
|
+ }else if(this.projectNum == 2141){
|
|
|
+ that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '本年度计划投资额（万元）']
|
|
|
+ }
|
|
|
that.originalConfig6 = res.data
|
|
|
- that.config6.header[5] = '投资总额（亿）'
|
|
|
res.data.forEach((item, index) => {
|
|
|
that.config6.data[index] = []
|
|
|
that.config6.data[index][0] = item.mdnb_project_name
|
|
|
@@ -813,7 +819,8 @@ let app = new Vue({
|
|
|
});
|
|
|
},
|
|
|
// 左边穿透二级
|
|
|
- leftPenetrateTwo (mdnb_textfield12, mdnb_textfield19, mdnb_textfield15, mdnb_textfield17, mdnb_textfield20) {
|
|
|
+ leftPenetrateTwo (mdnb_textfield12, mdnb_textfield19, mdnb_textfield15, mdnb_textfield17, mdnb_textfield20,num) {
|
|
|
+ this.projectNum = num
|
|
|
this.boardType = 'left'
|
|
|
let that = this
|
|
|
if (that.versions) {
|
|
|
@@ -831,22 +838,35 @@ let app = new Vue({
|
|
|
},
|
|
|
pageSize: 1000
|
|
|
}
|
|
|
- that.config6.header[5] = '年投资完成额（亿）'
|
|
|
if (mdnb_textfield20) {
|
|
|
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/ejct', value).then(res => {
|
|
|
that.config6.data = []
|
|
|
if (res.data.rows.length > 0) {
|
|
|
that.originalConfig6 = res.data.rows[0].mdnb_entryentity11
|
|
|
that.config6.data = []
|
|
|
- res.data.rows[0].mdnb_entryentity11.forEach((item, index) => {
|
|
|
- that.config6.data[index] = []
|
|
|
- that.config6.data[index][0] = item.mdnb_textfield6
|
|
|
- that.config6.data[index][1] = item.mdnb_textfield7
|
|
|
- that.config6.data[index][2] = item.mdnb_textfield8
|
|
|
- that.config6.data[index][3] = item.mdnb_textfield9
|
|
|
- that.config6.data[index][4] = item.mdnb_textfield10
|
|
|
- that.config6.data[index][5] = item.mdnb_amountfield22
|
|
|
- })
|
|
|
+ if(this.projectNum == 211||this.projectNum == 212){
|
|
|
+ that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '已占用额度（万元）']
|
|
|
+ }else if(this.projectNum == 2141){
|
|
|
+ that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '本年度计划投资额（万元）']
|
|
|
+ }else if(this.projectNum == 2142){
|
|
|
+ that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质','是否主业','本年度计划投资额（万元）']
|
|
|
+ }else if(this.projectNum == 2143){
|
|
|
+ that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质','项目管理类型','本年度计划投资额（万元）']
|
|
|
+ }else if(this.projectNum == 215){
|
|
|
+ that.config6.header = ["所属集团", "项目名称", '投资主体', '产业类别I级', '产业类别II级','本年度计划投资额（万元）']
|
|
|
+ }else if(this.projectNum == 216){
|
|
|
+ that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质','项目管理类型','本年度计划投资额（万元）']
|
|
|
+ }
|
|
|
+
|
|
|
+ // res.data.rows[0].mdnb_entryentity11.forEach((item, index) => {
|
|
|
+ // that.config6.data[index] = []
|
|
|
+ // that.config6.data[index][0] = item.mdnb_textfield6
|
|
|
+ // that.config6.data[index][1] = item.mdnb_textfield7
|
|
|
+ // that.config6.data[index][2] = item.mdnb_textfield8
|
|
|
+ // that.config6.data[index][3] = item.mdnb_textfield9
|
|
|
+ // that.config6.data[index][4] = item.mdnb_textfield10
|
|
|
+ // that.config6.data[index][5] = item.mdnb_amountfield22
|
|
|
+ // })
|
|
|
}
|
|
|
that.config6 = { ...that.config6 }
|
|
|
that.projectListTipShow = true
|
|
|
@@ -1079,7 +1099,6 @@ let app = new Vue({
|
|
|
},
|
|
|
// 找项目编码
|
|
|
findProjectCode (a, b, type) {
|
|
|
- console.log(a, b, type,'??????????',this.originalConfig6)
|
|
|
if (type == 'center') {
|
|
|
let c = this.originalConfig6.find(item => {
|
|
|
return item.projectname == a && item.tzzt == b
|
|
|
@@ -1099,7 +1118,7 @@ let app = new Vue({
|
|
|
},
|
|
|
// 去项目看板
|
|
|
goLookBoard (e, f) {
|
|
|
- console.log(e,'看看E')
|
|
|
+ console.log(e, '看看E')
|
|
|
if (f) {
|
|
|
this.boardType = f
|
|
|
this.boardUrl = `http://172.21.3.68:8081/ierp/accessTokenLogin.do?access_token=${this.access_token}&redirect=http://172.21.3.68:8081/ierp/index.html?formId=mdnb_threetoproject&prj=${this.findProjectCode(e.row[0], e.row[1], this.boardType)}`
|
|
|
@@ -3933,159 +3952,28 @@ let app = new Vue({
|
|
|
},
|
|
|
// 大屏二
|
|
|
initChartC1 () {
|
|
|
- //3D饼图
|
|
|
- var chartData = center2
|
|
|
- var timer = null;
|
|
|
- var i = 0;
|
|
|
- let that = this
|
|
|
- var option = {
|
|
|
- colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
|
|
|
- chart: {
|
|
|
- type: 'pie',
|
|
|
- backgroundColor: 'rgba(0,0,0,0)',
|
|
|
- options3d: {
|
|
|
- enabled: true,
|
|
|
- alpha: 60,
|
|
|
- //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
|
|
|
- }
|
|
|
- })
|
|
|
- that.center1Chart.update({
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- point: {
|
|
|
- events: {
|
|
|
- click: function (e) {
|
|
|
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- i++;
|
|
|
- if (i === len) {
|
|
|
- i = 0;
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
+ if (this.centerType) {
|
|
|
+ //3D饼图
|
|
|
+ var chartData = center2
|
|
|
+ var timer = null;
|
|
|
+ var i = 0;
|
|
|
+ let that = this
|
|
|
+ var option = {
|
|
|
+ colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
|
|
|
+ chart: {
|
|
|
+ type: 'pie',
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ options3d: {
|
|
|
+ enabled: true,
|
|
|
+ alpha: 60,
|
|
|
+ //beta: 0
|
|
|
},
|
|
|
- legendItemClick: function (event) {
|
|
|
- console.log(event);
|
|
|
- return true;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- credits: {
|
|
|
- enabled: false //去掉hightchats水印
|
|
|
- },
|
|
|
- legend: {
|
|
|
- layout: 'vertical',
|
|
|
- align: 'right',
|
|
|
- y: -10,
|
|
|
- verticalAlign: 'bottom',
|
|
|
- itemStyle: {
|
|
|
- fontSize: '20px',
|
|
|
- color: '#fff',
|
|
|
- fontWeight: 0,
|
|
|
- fontFamily: 'Microsoft YaHei'
|
|
|
- }
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- crosshairs: true,
|
|
|
- backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
- useHTML: false, //开启html模式
|
|
|
- style: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: '20',
|
|
|
- fontFamily: 'Microsoft YaHei'
|
|
|
- },
|
|
|
- formatter: function (e) {
|
|
|
- let num = chartData[this.colorIndex].num
|
|
|
- this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
|
|
|
- return `${this.key}：<b>${this.percentage}%</b><br/>投资完成额：<b>${this.y}</b>亿<br/>投资数量：<b>${num}个</b>`
|
|
|
- },
|
|
|
- //pointFormat:
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- pie: {
|
|
|
- allowPointSelect: true,
|
|
|
- showInLegend: true, // 图例
|
|
|
- cursor: 'pointer',
|
|
|
- size: 500,
|
|
|
- // innerSize: 330, //环形图中间空白，0为饼图
|
|
|
- innerSize: 0, //环形图中间空白，0为饼图
|
|
|
- depth: 75, //立体高度
|
|
|
- slicedOffset: 40, //动画距离
|
|
|
- dataLabels: {
|
|
|
- enabled: false, // 是否展示指示线
|
|
|
- format: '{point.name}: {point.percentage}'
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: '',
|
|
|
- style: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 24,
|
|
|
- fontFamily: 'Microsoft YaHei'
|
|
|
- },
|
|
|
- align: 'center',
|
|
|
- verticalAlign: "bottom",
|
|
|
- x: -120
|
|
|
- },
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- center: ['74%', '50%'],
|
|
|
- point: {
|
|
|
events: {
|
|
|
- click: function (e) { //点击事件
|
|
|
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1)
|
|
|
- },
|
|
|
- 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
|
|
|
- that.center1Chart.update({
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- point: {
|
|
|
- events: {
|
|
|
- click: function (e) {
|
|
|
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- timer && clearInterval(timer);
|
|
|
- },
|
|
|
- mouseOut: function () { // 鼠标移出后需要继续执行轮播
|
|
|
- var points = that.center1Chart.series[0].points;
|
|
|
+ // load，图表加载完成时触发
|
|
|
+ load: function () {
|
|
|
+ var chart = this;
|
|
|
+
|
|
|
+ var points = chart.series[0].points;
|
|
|
var len = points.length;
|
|
|
|
|
|
timer && clearInterval(timer);
|
|
|
@@ -4118,69 +4006,202 @@ let app = new Vue({
|
|
|
i = 0;
|
|
|
}
|
|
|
}, 2000);
|
|
|
+ },
|
|
|
+ legendItemClick: function (event) {
|
|
|
+ console.log(event);
|
|
|
+ return true;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- }
|
|
|
+ credits: {
|
|
|
+ enabled: false //去掉hightchats水印
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ layout: 'vertical',
|
|
|
+ align: 'right',
|
|
|
+ y: -10,
|
|
|
+ verticalAlign: 'bottom',
|
|
|
+ itemStyle: {
|
|
|
+ fontSize: '20px',
|
|
|
+ color: '#fff',
|
|
|
+ fontWeight: 0,
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ crosshairs: true,
|
|
|
+ backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
+ useHTML: false, //开启html模式
|
|
|
+ style: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: '20',
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ formatter: function (e) {
|
|
|
+ let num = chartData[this.colorIndex].num
|
|
|
+ this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
|
|
|
+ return `${this.key}：<b>${this.percentage}%</b><br/>投资完成额：<b>${this.y}</b>亿<br/>投资数量：<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //pointFormat:
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ allowPointSelect: true,
|
|
|
+ showInLegend: true, // 图例
|
|
|
+ cursor: 'pointer',
|
|
|
+ size: 500,
|
|
|
+ // innerSize: 330, //环形图中间空白，0为饼图
|
|
|
+ innerSize: 0, //环形图中间空白，0为饼图
|
|
|
+ depth: 75, //立体高度
|
|
|
+ slicedOffset: 40, //动画距离
|
|
|
+ dataLabels: {
|
|
|
+ enabled: false, // 是否展示指示线
|
|
|
+ format: '{point.name}: {point.percentage}'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '',
|
|
|
+ style: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 24,
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
+ verticalAlign: "bottom",
|
|
|
+ x: -120
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ center: ['74%', '50%'],
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ click: function (e) { //点击事件
|
|
|
+ that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1)
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ that.center1Chart.update({
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ click: function (e) {
|
|
|
+ that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ timer && clearInterval(timer);
|
|
|
+ },
|
|
|
+ mouseOut: function () { // 鼠标移出后需要继续执行轮播
|
|
|
+ var points = that.center1Chart.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
|
|
|
+ }
|
|
|
+ })
|
|
|
+ that.center1Chart.update({
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ click: function (e) {
|
|
|
+ that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ i++;
|
|
|
+ if (i === len) {
|
|
|
+ i = 0;
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ }
|
|
|
|
|
|
- that.center1Chart = Highcharts.chart('echartC1', option);
|
|
|
+ that.center1Chart = Highcharts.chart('echartC1', option);
|
|
|
|
|
|
- function autoTooltip (point) {
|
|
|
- that.center1Chart.tooltip.refresh(point);
|
|
|
+ function autoTooltip (point) {
|
|
|
+ that.center1Chart.tooltip.refresh(point);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 南丁格尔图
|
|
|
+ let myChart = echarts.init(this.$refs['echartC1'])
|
|
|
+ option = {
|
|
|
+ color: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
|
|
|
+ legend: {
|
|
|
+ icon: "circle",
|
|
|
+ top: 'bottom',
|
|
|
+ orient: 'vertical', // vertical 竖着
|
|
|
+ left: '70%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 20,
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff', //X轴文字颜色
|
|
|
+ fontSize: 20,
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ formatter: data => {
|
|
|
+ return `${data.name}：${data.percent}%<br/>${data.data.y}亿，${data.data.num}个`
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ radius: [0, 220],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ roseType: 'area',
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 8
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: center2
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option)
|
|
|
+ tools.loopShowTooltip(myChart, option, {
|
|
|
+ interval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ });
|
|
|
}
|
|
|
- // 南丁格尔图
|
|
|
- // let myChart = echarts.init(this.$refs['echartC1'])
|
|
|
- // option = {
|
|
|
- // color: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
|
|
|
- // legend: {
|
|
|
- // icon: "circle",
|
|
|
- // top: 'bottom',
|
|
|
- // orient: 'vertical', // vertical 竖着
|
|
|
- // left: '78%',
|
|
|
- // textStyle: {
|
|
|
- // color: '#fff',
|
|
|
- // fontSize: 20,
|
|
|
- // fontFamily: 'Microsoft YaHei'
|
|
|
- // },
|
|
|
- // },
|
|
|
- // tooltip: {
|
|
|
- // trigger: 'item',
|
|
|
- // textStyle: {
|
|
|
- // color: '#fff', //X轴文字颜色
|
|
|
- // fontSize: 20,
|
|
|
- // fontFamily: 'Microsoft YaHei'
|
|
|
- // },
|
|
|
- // formatter: data => {
|
|
|
- // // 小圆点
|
|
|
- // return `${data.name}：${data.percent}%<br/>${data.data.y}亿，${data.data.num}个`
|
|
|
- // },
|
|
|
- // },
|
|
|
- // series: [
|
|
|
- // {
|
|
|
- // name: '',
|
|
|
- // type: 'pie',
|
|
|
- // radius: [0, 220],
|
|
|
- // center: ['50%', '50%'],
|
|
|
- // roseType: 'area',
|
|
|
- // itemStyle: {
|
|
|
- // borderRadius: 8
|
|
|
- // },
|
|
|
- // label: {
|
|
|
- // normal: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // },
|
|
|
- // data: center2
|
|
|
- // }
|
|
|
- // ]
|
|
|
- // };
|
|
|
- // myChart.setOption(option)
|
|
|
- // tools.loopShowTooltip(myChart, option, {
|
|
|
- // interval: 2000,
|
|
|
- // loopSeries: true,
|
|
|
- // });
|
|
|
},
|
|
|
initChartC2 () {
|
|
|
let that = this
|
|
|
@@ -4882,72 +4903,52 @@ let app = new Vue({
|
|
|
|
|
|
},
|
|
|
initChartC4 () {
|
|
|
- // 3D饼图
|
|
|
- var chartData = []
|
|
|
- var timer = null;
|
|
|
- var timer2 = null;
|
|
|
- var i = 0;
|
|
|
- center7.forEach((item, index) => {
|
|
|
- let obj = {
|
|
|
- name: item.name,
|
|
|
- y: item.value2,
|
|
|
- num: item.value,
|
|
|
- typeno: item.typeno,
|
|
|
- sliced: false,
|
|
|
- selected: false,
|
|
|
- color: index == 0 ? '#064F78' : '#BDB35D'
|
|
|
- }
|
|
|
- chartData.push(obj)
|
|
|
- })
|
|
|
- let that = this
|
|
|
- that.center4Chart = Highcharts.chart('echartC4', {
|
|
|
- chart: {
|
|
|
- type: 'pie',
|
|
|
- backgroundColor: 'rgba(0,0,0,0)',
|
|
|
- options3d: {
|
|
|
- enabled: true,
|
|
|
- alpha: 60,
|
|
|
- //beta: 0
|
|
|
- },
|
|
|
- events: {
|
|
|
- // load，图表加载完成时触发
|
|
|
- load: function () {
|
|
|
- var chart = this;
|
|
|
+ if (this.centerType) {
|
|
|
+ // 3D饼图
|
|
|
+ var chartData = []
|
|
|
+ var timer = null;
|
|
|
+ var timer2 = null;
|
|
|
+ var i = 0;
|
|
|
+ center7.forEach((item, index) => {
|
|
|
+ let obj = {
|
|
|
+ name: item.name,
|
|
|
+ y: item.value2,
|
|
|
+ num: item.value,
|
|
|
+ typeno: item.typeno,
|
|
|
+ sliced: false,
|
|
|
+ selected: false,
|
|
|
+ color: index == 0 ? '#064F78' : '#BDB35D'
|
|
|
+ }
|
|
|
+ chartData.push(obj)
|
|
|
+ })
|
|
|
+ let that = this
|
|
|
+ that.center4Chart = Highcharts.chart('echartC4', {
|
|
|
+ chart: {
|
|
|
+ type: 'pie',
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ options3d: {
|
|
|
+ enabled: true,
|
|
|
+ alpha: 60,
|
|
|
+ //beta: 0
|
|
|
+ },
|
|
|
+ events: {
|
|
|
+ // load，图表加载完成时触发
|
|
|
+ load: function () {
|
|
|
+ var chart = this;
|
|
|
|
|
|
- var points = chart.series[0].points;
|
|
|
- var len = points.length;
|
|
|
+ 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
|
|
|
- }
|
|
|
- })
|
|
|
- that.center4Chart.update({
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- point: {
|
|
|
- events: {
|
|
|
- click: function (e) {
|
|
|
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- i++;
|
|
|
- if (i === len) {
|
|
|
- i = 0;
|
|
|
+ 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
|
|
|
+ }
|
|
|
})
|
|
|
that.center4Chart.update({
|
|
|
series: [{
|
|
|
@@ -4963,118 +4964,108 @@ let app = new Vue({
|
|
|
data: chartData
|
|
|
}]
|
|
|
})
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
- },
|
|
|
- legendItemClick: function (event) {
|
|
|
- console.log(event);
|
|
|
- return true;
|
|
|
+ i++;
|
|
|
+ if (i === len) {
|
|
|
+ i = 0;
|
|
|
+ chartData.forEach((item, index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ })
|
|
|
+ that.center4Chart.update({
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ click: function (e) {
|
|
|
+ that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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',
|
|
|
- fontSize: '20',
|
|
|
- fontFamily: 'Microsoft YaHei'
|
|
|
},
|
|
|
- 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>`
|
|
|
+ credits: {
|
|
|
+ enabled: false //去掉hightchats水印
|
|
|
},
|
|
|
- //pointFormat:
|
|
|
- },
|
|
|
- legend: {
|
|
|
- layout: 'vertical',
|
|
|
- align: 'right',
|
|
|
- y: -10,
|
|
|
- verticalAlign: 'bottom',
|
|
|
- itemStyle: {
|
|
|
- fontSize: '20px',
|
|
|
- color: '#fff',
|
|
|
- fontWeight: 0,
|
|
|
- fontFamily: 'Microsoft YaHei'
|
|
|
- }
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- pie: {
|
|
|
- allowPointSelect: true,
|
|
|
- showInLegend: true, // 图例
|
|
|
- cursor: 'pointer',
|
|
|
- size: 500,
|
|
|
- // innerSize: 330, //环形图中间空白，0为饼图
|
|
|
- innerSize: 0, //环形图中间空白，0为饼图
|
|
|
- depth: 75, //立体高度
|
|
|
- slicedOffset: 40, //动画距离
|
|
|
- dataLabels: {
|
|
|
- enabled: false, // 是否展示指示线
|
|
|
- format: '{point.name}: {point.percentage}'
|
|
|
+ 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',
|
|
|
+ fontSize: '20',
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ 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',
|
|
|
+ y: -10,
|
|
|
+ verticalAlign: 'bottom',
|
|
|
+ itemStyle: {
|
|
|
+ fontSize: '20px',
|
|
|
+ color: '#fff',
|
|
|
+ fontWeight: 0,
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
}
|
|
|
},
|
|
|
- },
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- center: ['60%', '50%'],
|
|
|
- y: -10,
|
|
|
- point: {
|
|
|
- events: {
|
|
|
- click: function (e) { //点击事件
|
|
|
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
|
|
|
- },
|
|
|
- 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
|
|
|
- that.center4Chart.update({
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- point: {
|
|
|
- events: {
|
|
|
- click: function (e) {
|
|
|
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- timer && clearInterval(timer);
|
|
|
- },
|
|
|
- mouseOut: function () { // 鼠标移出后需要继续执行轮播
|
|
|
- var points = that.center4Chart.series[0].points;
|
|
|
- var len = points.length;
|
|
|
-
|
|
|
- timer && clearInterval(timer);
|
|
|
- timer = setInterval(function () {
|
|
|
- autoTooltip(points[i]);
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ allowPointSelect: true,
|
|
|
+ showInLegend: true, // 图例
|
|
|
+ cursor: 'pointer',
|
|
|
+ size: 500,
|
|
|
+ // innerSize: 330, //环形图中间空白，0为饼图
|
|
|
+ innerSize: 0, //环形图中间空白，0为饼图
|
|
|
+ depth: 75, //立体高度
|
|
|
+ slicedOffset: 40, //动画距离
|
|
|
+ dataLabels: {
|
|
|
+ enabled: false, // 是否展示指示线
|
|
|
+ format: '{point.name}: {point.percentage}'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ center: ['60%', '50%'],
|
|
|
+ y: -10,
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ click: function (e) { //点击事件
|
|
|
+ that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
|
|
|
+ },
|
|
|
+ mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
|
|
|
+ //console.log(e)
|
|
|
chartData.forEach((item, index) => {
|
|
|
item.sliced = false
|
|
|
item.selected = false
|
|
|
- if (index == i) {
|
|
|
- item.sliced = true
|
|
|
- item.selected = true
|
|
|
- }
|
|
|
})
|
|
|
+ chartData[e.target.index].sliced = true
|
|
|
+ chartData[e.target.index].selected = true
|
|
|
that.center4Chart.update({
|
|
|
series: [{
|
|
|
type: 'pie',
|
|
|
@@ -5089,12 +5080,22 @@ let app = new Vue({
|
|
|
data: chartData
|
|
|
}]
|
|
|
})
|
|
|
- i++;
|
|
|
- if (i === len) {
|
|
|
- i = 0;
|
|
|
+ timer && clearInterval(timer);
|
|
|
+ },
|
|
|
+ mouseOut: function () { // 鼠标移出后需要继续执行轮播
|
|
|
+ var points = that.center4Chart.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
|
|
|
+ }
|
|
|
})
|
|
|
that.center4Chart.update({
|
|
|
series: [{
|
|
|
@@ -5110,228 +5111,283 @@ let app = new Vue({
|
|
|
data: chartData
|
|
|
}]
|
|
|
})
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
+ i++;
|
|
|
+ if (i === len) {
|
|
|
+ i = 0;
|
|
|
+ chartData.forEach((item, index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ })
|
|
|
+ that.center4Chart.update({
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ click: function (e) {
|
|
|
+ that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- });
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ });
|
|
|
|
|
|
- function autoTooltip (point) {
|
|
|
- that.center4Chart.tooltip.refresh(point);
|
|
|
- }
|
|
|
- // 环形图
|
|
|
- // let myChart = echarts.init(this.$refs['echartC4'])
|
|
|
- // data = [
|
|
|
- // { name: '新建', value: 204, value2: 345.53, sliced: false, selected: false },
|
|
|
- // { name: '续建', value: 385, value2: 978.55, sliced: false, selected: false },
|
|
|
- // ]
|
|
|
- // arrName = getArrayValue(data, "name");
|
|
|
- // arrValue = getArrayValue(data, "value");
|
|
|
- // sumValue = eval(arrValue.join("+"));
|
|
|
- // objData = array2obj(data, "name");
|
|
|
- // optionData = getData(data);
|
|
|
- // function getArrayValue (array, key) {
|
|
|
- // var key = key || "value";
|
|
|
- // var res = [];
|
|
|
- // if (array) {
|
|
|
- // array.forEach(function (t) {
|
|
|
- // res.push(t[key]);
|
|
|
- // });
|
|
|
- // }
|
|
|
- // return res;
|
|
|
- // }
|
|
|
+ function autoTooltip (point) {
|
|
|
+ that.center4Chart.tooltip.refresh(point);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 环形图
|
|
|
+ let myChart = echarts.init(this.$refs['echartC4'])
|
|
|
+ data = center7
|
|
|
+ arrName = getArrayValue(data, "name");
|
|
|
+ arrValue = getArrayValue(data, "value");
|
|
|
+ sumValue = eval(arrValue.join("+"));
|
|
|
+ objData = array2obj(data, "name");
|
|
|
+ optionData = getData(data);
|
|
|
+ function getArrayValue (array, key) {
|
|
|
+ var key = key || "value";
|
|
|
+ var res = [];
|
|
|
+ if (array) {
|
|
|
+ array.forEach(function (t) {
|
|
|
+ res.push(t[key]);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+ }
|
|
|
|
|
|
- // function array2obj (array, key) {
|
|
|
- // var resObj = {};
|
|
|
- // for (var i = 0; i < array.length; i++) {
|
|
|
- // resObj[array[i][key]] = array[i];
|
|
|
- // }
|
|
|
- // return resObj;
|
|
|
- // }
|
|
|
+ function array2obj (array, key) {
|
|
|
+ var resObj = {};
|
|
|
+ for (var i = 0; i < array.length; i++) {
|
|
|
+ resObj[array[i][key]] = array[i];
|
|
|
+ }
|
|
|
+ return resObj;
|
|
|
+ }
|
|
|
|
|
|
- // function getData (data) {
|
|
|
- // var res = {
|
|
|
- // series: [],
|
|
|
- // yAxis: [],
|
|
|
- // };
|
|
|
- // for (let i = 0; i < data.length; i++) {
|
|
|
- // // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
|
|
|
- // res.series.push({
|
|
|
- // name: "",
|
|
|
- // type: "pie",
|
|
|
- // clockWise: false, //顺时加载
|
|
|
- // hoverAnimation: false, //鼠标移入变大
|
|
|
- // radius: [53 - i * 15 + "%", 48 - i * 15 + "%"],
|
|
|
- // center: ["50%", "50%"],
|
|
|
- // label: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // itemStyle: {
|
|
|
- // label: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // labelLine: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // borderWidth: 5,
|
|
|
- // },
|
|
|
- // data: [
|
|
|
- // {
|
|
|
- // value: data[i].value,
|
|
|
- // name: data[i].name,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // value: sumValue - data[i].value,
|
|
|
- // name: "",
|
|
|
- // itemStyle: {
|
|
|
- // color: "rgba(0,0,0,0)",
|
|
|
- // borderWidth: 0,
|
|
|
- // },
|
|
|
- // tooltip: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // hoverAnimation: false,
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // });
|
|
|
- // res.series.push({
|
|
|
- // name: "",
|
|
|
- // type: "pie",
|
|
|
- // silent: true,
|
|
|
- // z: 1,
|
|
|
- // clockWise: false, //顺时加载
|
|
|
- // hoverAnimation: false, //鼠标移入变大
|
|
|
- // radius: [53 - i * 15 + "%", 48 - i * 15 + "%"],
|
|
|
- // center: ["50%", "50%"],
|
|
|
- // label: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // itemStyle: {
|
|
|
- // label: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // labelLine: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // borderWidth: 5,
|
|
|
- // },
|
|
|
- // data: [
|
|
|
- // {
|
|
|
- // value: 7.5,
|
|
|
- // itemStyle: {
|
|
|
- // color: "rgb(3, 31, 62)",
|
|
|
- // borderWidth: 0,
|
|
|
- // },
|
|
|
- // tooltip: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // hoverAnimation: false,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // value: 2.5,
|
|
|
- // name: "",
|
|
|
- // itemStyle: {
|
|
|
- // color: "rgba(0,0,0,0)",
|
|
|
- // borderWidth: 0,
|
|
|
- // },
|
|
|
- // tooltip: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // hoverAnimation: false,
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // });
|
|
|
- // res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
|
|
|
- // }
|
|
|
- // return res;
|
|
|
- // }
|
|
|
- // let option = {
|
|
|
- // graphic: {
|
|
|
- // elements: [{
|
|
|
- // type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
|
|
|
- // style: {
|
|
|
- // // image: './images/loop.png', //这里添加图片地址
|
|
|
- // width: 320,
|
|
|
- // height: 320
|
|
|
- // },
|
|
|
- // left: '30',//
|
|
|
- // top: 'middle' //配置图片居中
|
|
|
- // }]
|
|
|
- // },
|
|
|
- // legend: {
|
|
|
- // show: true,
|
|
|
- // icon: "circle",
|
|
|
- // top: "center",
|
|
|
- // left: "70%",
|
|
|
- // data: arrName,
|
|
|
- // width: 50,
|
|
|
- // padding: [0, 5],
|
|
|
- // itemGap: 25,
|
|
|
- // formatter: function (name) {
|
|
|
- // return (
|
|
|
- // "{title|" + name + "}\n{value|" + objData[name].value + "} {title|项}"
|
|
|
- // );
|
|
|
- // },
|
|
|
+ function getData (data) {
|
|
|
+ var res = {
|
|
|
+ series: [],
|
|
|
+ yAxis: [],
|
|
|
+ };
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ res.series.push({
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ clockWise: false, //顺时加载
|
|
|
+ hoverAnimation: false, //鼠标移入变大
|
|
|
+ radius: [73 - i * 40 + "%", 58 - i * 40 + "%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ borderWidth: 5,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: data[i].value,
|
|
|
+ name: data[i].name,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: sumValue - data[i].value,
|
|
|
+ name: "",
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(0,0,0,0)",
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ hoverAnimation: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ res.series.push({
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ silent: true,
|
|
|
+ z: 1,
|
|
|
+ clockWise: false, //顺时加载
|
|
|
+ hoverAnimation: false, //鼠标移入变大
|
|
|
+ radius: [73 - i * 40 + "%", 58 - i * 40 + "%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ borderWidth: 10,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: 7.5,
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(9,40,83,0.7)",
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ hoverAnimation: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2.5,
|
|
|
+ name: "",
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(0,0,0,0)",
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ hoverAnimation: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ // graphic: {
|
|
|
+ // elements: [{
|
|
|
+ // type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
|
|
|
+ // style: {
|
|
|
+ // // image: './images/loop.png', //这里添加图片地址
|
|
|
+ // width: 320,
|
|
|
+ // height: 320
|
|
|
+ // },
|
|
|
+ // left: '30',//
|
|
|
+ // top: 'middle' //配置图片居中
|
|
|
+ // }]
|
|
|
+ // },
|
|
|
+ // tooltip: {
|
|
|
+ // show: true,
|
|
|
+ // trigger: "item",
|
|
|
+ // normal: {
|
|
|
+ // show: false,
|
|
|
+ // label: {
|
|
|
+ // color: '#FFF', // 文字的颜色
|
|
|
+ // fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
|
|
|
+ // fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
|
|
|
+ // fontSize: '20', // 文字字体大小
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // formatter: function (data) {
|
|
|
+ // console.log(data, '?????')
|
|
|
+ // // return `${data.data.name}：${data.percent}%<br/>${data.data.y}亿，${data.data.num}个`
|
|
|
+ // },
|
|
|
+ // // formatter: "{a}<br>{b}:{c}({d}%)666",
|
|
|
+ // textStyle: {
|
|
|
+ // fontSize: '20', // 文字字体大小
|
|
|
+ // color: '#FFF', // 文字的颜色
|
|
|
+ // fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
|
|
|
+ // fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff', //X轴文字颜色
|
|
|
+ fontSize: 20,
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ // 设置提示的位置
|
|
|
+ position: (p) => {
|
|
|
+ // return ['15%', '25%']
|
|
|
+ return [p[0]-70, p[1]-70]
|
|
|
|
|
|
- // textStyle: {
|
|
|
- // rich: {
|
|
|
- // title: {
|
|
|
- // fontSize: '20px',
|
|
|
- // color: "red",
|
|
|
- // fontFamily: 'Microsoft YaHei'
|
|
|
- // },
|
|
|
- // value: {
|
|
|
- // fontSize: '20px',
|
|
|
- // color: "#fff",
|
|
|
- // },
|
|
|
- // },
|
|
|
- // },
|
|
|
- // },
|
|
|
- // color: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
|
|
|
+ // console.log(params,'???????位置信息是什么鬼')
|
|
|
+ // if (params.name == '新建') {
|
|
|
+ // return ['15%', '25%']
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ formatter: data => {
|
|
|
+ let a = ''
|
|
|
+ a = center7.find(item => item.name == data.name)
|
|
|
+ return `${data.name}：${data.percent}%<br/>${data.value}亿，${a.value2}个`
|
|
|
+ },
|
|
|
+ },
|
|
|
|
|
|
- // grid: {
|
|
|
- // top: "center",
|
|
|
- // left: "center",
|
|
|
- // containLabel: false,
|
|
|
- // },
|
|
|
- // yAxis: [
|
|
|
- // {
|
|
|
- // type: "category",
|
|
|
- // inverse: true,
|
|
|
- // axisLine: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // axisTick: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // axisLabel: {
|
|
|
- // interval: 0,
|
|
|
- // inside: true,
|
|
|
- // textStyle: {
|
|
|
- // color: "#fff",
|
|
|
- // fontSize: 20,
|
|
|
- // fontFamily: 'Microsoft YaHei'
|
|
|
- // },
|
|
|
- // show: true,
|
|
|
- // },
|
|
|
- // data: optionData.yAxis,
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // xAxis: [
|
|
|
- // {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // series: optionData.series,
|
|
|
- // }
|
|
|
- // myChart.setOption(option)
|
|
|
- // tools.loopShowTooltip(myChart, option, {
|
|
|
- // interval: 2000,
|
|
|
- // loopSeries: true,
|
|
|
- // });
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ icon: "circle",
|
|
|
+ top: "bottom",
|
|
|
+ right: "5%",
|
|
|
+ data: arrName,
|
|
|
+ orient: 'vertical',
|
|
|
+ // width: 50,
|
|
|
+ // padding: [0, 5],
|
|
|
+ itemGap: 5,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 20,
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ color: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
|
|
|
+
|
|
|
+ grid: {
|
|
|
+ top: "8%",
|
|
|
+ bottom: "52%",
|
|
|
+ left: "50%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ inverse: true,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ inside: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 20,
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: optionData.yAxis,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: optionData.series,
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ tools.loopShowTooltip(myChart, option, {
|
|
|
+ interval: 500,
|
|
|
+ loopSeries: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
initProjectList () {
|
|
|
let dataList = []
|
zhbyyy