let pieChartOption = { tooltip: { trigger: 'item' }, color: ['#61D9AC', '#FF948C', '#7EA4FF', '#FFB436', '#52A9FF', '#Fe941C', '#FFe426', '#7F8322'], legend: { top: '5%', right: '20%', orient: 'vertical', }, series: [ { name: '宗地数', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, center: ['32%', '42%'], label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '40', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 0, name: '东港镇'}, {value: 0, name: '锡北镇'}, {value: 0, name: '羊尖镇'}, {value: 0, name: '东北塘街道'}, {value: 0, name: '开发区'}, {value: 0, name: '商务区'}, {value: 0, name: '东亭街道'}, {value: 0, name: '鹅湖镇'}, ] } ], setData(data) { this.series[0].data.map(item=>{ data.map(i=>{ if(item.name==i.name){ item.value=i.value } }) }); }, /** * 东港镇 锡北镇 羊尖镇 东北塘 开发区 商务区 东亭街道 鹅湖镇 * * @param data */ setJdData(data) { for (let i = 0; i < 8; i++) { if (i >= data.length) { data.push(0) } else if (!data[i]) { data[i] = 0 } } this.series[0].data[0] = {value: data[0], name: '东港镇'}; this.series[0].data[1] = {value: data[1], name: '锡北镇'}; this.series[0].data[2] = {value: data[2], name: '羊尖镇'}; this.series[0].data[3] = {value: data[3], name: '东北塘街道'}; this.series[0].data[4] = {value: data[4], name: '开发区'}; this.series[0].data[5] = {value: data[5], name: '商务区'}; this.series[0].data[6] = {value: data[6], name: '东亭街道'}; this.series[0].data[7] = {value: data[7], name: '鹅湖镇'}; } }; export { pieChartOption, barChartOption, xiShanOption }; let barChartOption = { title: { x: 13, y: 20, text: '{a|} {b|可利用资源区域分布}', textStyle: { rich: { a: { width: 4, height: 16, backgroundColor: '#2D9AFF', borderRadius: 2, }, b: { fontSize: '16', fontFamily: ' MicrosoftYaHeiSemibold', fontWeight: 'normal', color: '#333333', } } } }, legend: { data: ['立即可用', '近期可用', '供而未用', '用而未足', '低效产出'], icon: 'rect', textStyle: { color: '#000' }, top: '8%', right: '6%' }, tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, }, grid: { left: '2%', right: '6%', bottom: '5%', top: '25%', containLabel: true }, xAxis: [{ type: 'category', data: ['东港镇', '锡北镇', '羊尖镇', '东北塘街道', '开发区', '商务区', '东亭街道', '鹅湖镇'], axisTick: { show: false, alignWithLabel: true }, axisLabel: { interval: 0, textStyle: { color: 'rgba(0,0,0,0.8)' }, fontSize: '12', rotate: 0, show: true, }, axisLine: { show: true, lineStyle: { type: 'dotted', color: '#CCCCCC' } }, splitLine: { show: true, lineStyle: { type: 'dashed', } }, }], yAxis: { axisLine: { show: false }, axisLabel: { textStyle: { color: '#000' }, fontSize: '12' }, show: true, type: 'value', splitLine: { show: true, lineStyle: { type: 'dashed' } }, nameTextStyle: { color: 'rgba(255,255,255,1.0)' }, axisTick: { show: false, alignWithLabel: true }, }, series: [{ name: '立即可用', type: 'bar', barWidth: 13, label: { normal: { show: false, position: 'top', formatter: function (params) { return params.data.value; }, textStyle: { color: 'rgba(0,0,0,1)' }, fontSize: '13' } }, itemStyle: { normal: { color: "#59AEF1" } }, data: [48, 24, 36, 22, 66, 16, 26, 13] }, { name: '近期可用', type: 'bar', barWidth: 13, label: { normal: { show: false, position: 'top', formatter: function (params) { return params.data.value; }, textStyle: { color: 'rgba(0,0,0,0.8)' }, fontSize: '16' } }, itemStyle: { normal: { color: "#61D9AC" } }, data: [21, 18, 18, 16, 11, 18, 21, 15] }, { name: '供而未用', type: 'bar', barWidth: 13, label: { normal: { show: false, position: 'top', formatter: function (params) { return params.data.value; }, textStyle: { color: 'rgba(0,0,0,0.8)' }, fontSize: '16' } }, itemStyle: { normal: { color: "#FFB436" } }, data: [28, 58, 38, 66, 31, 58, 81, 52] }, { name: '用而未足', type: 'bar', barWidth: 13, label: { normal: { show: false, position: 'top', formatter: function (params) { return params.data.value; }, textStyle: { color: 'rgba(0,0,0,0.8)' }, fontSize: '16' } }, itemStyle: { normal: { color: "#7EA4FF" } }, data: [28, 58, 38, 66, 31, 58, 81, 23] }, { name: '低效产出', type: 'bar', barWidth: 13, label: { normal: { show: false, position: 'top', formatter: function (params) { return params.data.value; }, textStyle: { color: 'rgba(0,0,0,0.8)' }, fontSize: '16' } }, itemStyle: { normal: { color: "#FF948C" } }, data: [28, 58, 38, 66, 31, 58, 81, 32] } ], setTitleText(title) { this.title.text = '{a|} {b|' + title + '}' }, setSubtTitle(data) { this.xAxis.data = data }, setData(titleArray, dataArray, colorArray) { let colors = ["#59AEF1", "#61D9AC", "#FFB436", "#7EA4FF", "#FF948C"]; if (colorArray) { colors = colorArray; } this.legend.data = titleArray this.series = []; for (let i = 0; i < titleArray.length; i++) { let color = ''; if (i < colors.length) { color = colors[i] } else { color = colors[i % colors.length] } let seriesData = { name: titleArray[i], type: 'bar', barWidth: 13, label: { normal: { show: false, position: 'top', formatter: function (params) { return params.data.value; }, textStyle: { color: 'rgba(0,0,0,1)' }, fontSize: '13' } }, itemStyle: { normal: { color: color } }, data: dataArray[i] } this.series.push(seriesData) } } }; let xiShanOption = { tooltip: { trigger: 'item', formatter: '{b}:{c}m²' }, visualMap: { min: 0, max: 3656457.92289, left: '20', top: 'bottom', text: ['高', '低'], // 文本,默认为数值文本 inRange: { color: ['lightskyblue', 'yellow', 'orangered'] }, textStyle: { fontSize:16, }, calculable: true }, toolbox: { show: false, left: 'left', top: 'top', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, series: [ { type: 'map', mapType: 'XiShanQu', selectedMode: 'single', roam: false, itemStyle: { normal: { areaColor: '#fdefdd', shadowBlur: 1, borderWidth: 0.5,//设置外层边框 borderColor: '#347b68',//轮廓颜色 shadowColor: '#a9c5c5'//轮廓阴影颜色 }, emphasis: { areaColor: '#04fc0f', shadowOffsetY: 1.5, shadowOffsetX: 1.5, shadowColor:'#1227de', shadowBlur: 10, }, }, label: { normal: { show: true, textStyle: { fontSize:16, }, }, }, data: [ {"name": "某某区", "value": 0}, {"name": "商务区", "value": 0}, {"name": "锡北镇", "value": 0}, {"name": "东港镇", "value": 0}, {"name": "鹅湖镇", "value": 0}, {"name": "东亭街道", "value": 0}, {"name": "东北塘街道", "value": 0}, {"name": "羊尖镇", "value": 0}, {"name": "开发区", "value": 0} ] } ], setData(data) { if (data) { this.series[0].data.map(item=>{ item.value=0; data.map(i=>{ if(item.name==i.name){ item.value=i.value } }) }); let min = 0; let max = 0; data.map(item => { if (item.name&&min >= parseFloat(item.value)) { min = parseFloat(item.value); } if (item.name&&max <= parseFloat(item.value)) { max = parseFloat(item.value); } }) this.visualMap.min = min; this.visualMap.max = max; } }, setOnlyData(data) { if (data) { this.series[0].data=data; let min = 0; let max = 0; data.map(item => { if (item.name&&min >= parseFloat(item.value)) { min = parseFloat(item.value); } if (item.name&&max <= parseFloat(item.value)) { max = parseFloat(item.value); } }) this.visualMap.min = min; this.visualMap.max = max; } }, /** * 东港镇 锡北镇 羊尖镇 东北塘街道 开发区 商务区 东亭街道 鹅湖镇 * * @param data */ setJdData(data) { for (let i = 0; i < 8; i++) { if (i >= data.length) { data.push(0) } else if (!data[i]) { data[i] = 0 } } this.series[0].data[0] = {value: data[0], name: '东港镇'}; this.series[0].data[1] = {value: data[1], name: '锡北镇'}; this.series[0].data[2] = {value: data[2], name: '羊尖镇'}; this.series[0].data[3] = {value: data[3], name: '东北塘街道'}; this.series[0].data[4] = {value: data[4], name: '开发区'}; this.series[0].data[5] = {value: data[5], name: '商务区'}; this.series[0].data[6] = {value: data[6], name: '东亭街道'}; this.series[0].data[7] = {value: data[7], name: '鹅湖镇'}; let min = 0; let max = 0; this.series[0].map(item => { if (min > parseFloat(item.value)) { min = parseFloat(item.value); } if (max < parseFloat(item.value)) { max = parseFloat(item.value); } }) this.visualMap.min = min; this.visualMap.max = max; } }