import React, { Component, PureComponent } from 'react';
import EchartBase from '../../lib/echarts/base/EchartBase';
import {connect} from 'dva';
import 'echarts/map/js/china';
import 'echarts-gl';
import '../../lib/echarts/chengdu';
import coord from '../../lib/echarts/cityCoord';
import labelBg from '../../../images/label-box-bg.png';
import { isArray } from '../../../utils/util';
// "成都市":[104.07,30.67],"高新区":[104.07,30.60],"天府新区":[104.06,30.51],"锦江区":[104.08,30.67],"青羊区":[104.05,30.68],"金牛区":[104.05,30.7],"":[104.05,30.65],"成华区":[104.1,30.67],"龙泉驿区":[104.27,30.57],"青白江区":[104.23,30.88],"新都区":[104.15,30.83],"温江区":[103.83,30.7],"金堂县":[104.43,30.85],"双流区":[103.92,30.58],"郫都区":[103.88,30.82],"郫县":[103.88,30.82],"大邑县":[103.52,30.58],"蒲江县":[103.5,30.2],"新津县":[103.82,30.42],"都江堰市":[103.62,31],"彭州市":[103.93,30.98],"邛崃市":[103.47,30.42],
let data = [
{
name: '青羊区',
value: [104.05, 30.68]
},
{
name: '武侯区',
value: [104.05, 30.65]
},
{
name: '锦江区',
value: [104.08, 30.67]
},
{
name: '高新区',
value: [104.07, 30.60]
}, {
name: '成华区',
value: [104.1, 30.67]
}, {
name: '龙泉驿区',
value: [104.27, 30.57]
},
{
name: '青白江区',
value: [104.23, 30.88]
},
{
name: '都江堰市',
value: [103.62, 31]
},
{
name: '彭州市',
value: [103.93, 30.98]
},
{
name: '邛崃市',
value: [103.47, 30.42]
},
{
name: '简阳市',
value: [104.55, 30.4]
}, {
name: '金堂县',
value: [104.43, 30.85]
}, {
name: '崇州市',
value: [103.67, 30.63]
}, {
name: '蒲江县',
value: [103.5, 30.2]
},
{
name: '新津县',
value: [103.82, 30.42]
}, {
name: '天府新区',
value: [104.06, 30.51]
}, {
name: '双流区',
value: [103.92, 30.58]
},
{
name: '大邑县',
value: [103.52, 30.58]
}, {
name: '郫都区',
value: [103.88, 30.82]
},
{
name: '金牛区',
value: [104.05, 30.7]
}, {
name: '温江区',
value: [103.83, 30.7]
},
{
name: '新都区',
value: [104.15, 30.83]
}
];
function pointLight(allComponyData){
//所有企业的坐标，用于显示散点
let data = [];
isArray(allComponyData) && allComponyData.map(
p=>{
data.push({
name: p.companyName,
value: [p.longitude, p.latitude]
});
}
);
return data;
}
function mapOption(clickData, selecgn, pointLights){
let pointData = [];
pointData = pointData.concat(pointLights);
pointData.push({ //被点击的企业 显示黄色的散点
name: clickData.companyName,
value: [clickData.longitude, clickData.latitude],
itemStyle: {
normal: {
color: 'yellow',
opacity: 0.5
}
}
});
data.map(
(p, index)=>{
p['selected'] = false;
// 所选地区高亮
isArray(selecgn) && selecgn.map(
gn=>{
if(gn === p.name){
p['selected'] = true;
}
}
);
if(clickData && p.name === clickData.areaName){
// 散点
if(clickData.areaName === '高新区'){
// 地图上没有高新区，将高新区的弹框放到锦江区
p = data[2];
}
// 弹框
p['selected'] = true;
p['value'] = clickData,
p['label'] = {
normal: {
show: true,
formatter: (params)=>{
// console.log('label-params', params);
const data = params.data.value;
return [
`{titleFont|${data.areaName}}`,
`{highLightFont|企业名称:}{formatDigit|${data.companyName} } `,
`{highLightFont|融资总额:}{formatDigit|${data.financingAmount}元}`,
`{highLightFont|所在区域:}{formatDigit|${data.areaName}}`
].join('\n');
},
position: 'right',
minWidth: 255,
height: 108,
backgroundColor: {
image: labelBg
},
zlevel: 100,
padding: [2, 0, 0, 0],
rich: {
titleFont: {
width: 115,
height: 25,
lineHeight: 25,
padding: [0, 0, 0, 12],
align: 'left',
fontSize: 15,
color: '#fff'
},
highLightFont: {
width: 60,
height: 26,
align: 'left',
// backgroundColor: '#000',
fontSize: 15,
padding: [0, 12, 0, 12],
color: '#fff'
},
formatDigit: {
color: '#F3E75E',
fontSize: 15,
align: 'left'
}
}
}
};
}
}
);
// console.log('处理后pointData,selecgn,data', pointData, selecgn, data);
let option = {
tooltip: {
trigger: 'item',
formatter: function(a) {
console.log('hover', a);
}
},
geo: {
map: '成都',
show: true,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
opacity: 0
},
emphasis: {
label: {
show: true,
color: '#fff'
},
itemStyle: {
areaColor: 'red',
color: '#fff'
}
},
// zoom: 0.8,
aspectScale: 1,
top: '2%',
left: '6%',
silent: true
},
series: [
{
type: 'map',
map: '成都',
top: '2%',
left: '6%',
// zoom: 0.8,
aspectScale: 1,
label: {
normal: {
show: false
}
},
emphasis: {
label: {
show: true, // 选中状态是否显示省份名称
color: '#fff'
},
itemStyle: {
color: '#fff',
areaColor: '#DEE07F'
}
},
data: data,
// {name: '武侯区', selected: true, value: 10},
// {name: '都江堰市', selected: true, value: 10}
silent: true,
itemStyle: {
normal: {
// opacity: 0
areaColor: '#5F93E7'
// borderColor: 'red'
}
}
},
{ // 散点图
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 10,
// silent: true,
rippleEffect: {
scale: 3,
brushType: 'stroke'
},
zlevel: 1,
itemStyle: {
normal: {
color: '#fff',
opacity: 0.5
}
},
data: pointData
// [ {
// name: '美年健康',
// value: [103.83, 30.7]
// },
// {
// name: '三福时尚',
// value: [104.15, 30.83]
// }]
}
]
};
return option;
}
class FanceMap extends Component{
constructor(props) {
super(props);
this.state = {
option: null,
columns: null,
dataSource: null,
pointLight: [],
selecRegion: [],
key: 0,
clickData: {
// areaCode: 510107,
// areaName: '武侯区',
// companyName: '攉裀颂欙眵嶆梳戂齊惕抭煂樦貟镼比鯯璠韥',
// financingAmount: '30.11万',
// financingRounds: '上市',
// financingTime: '2017-11-27',
// industry: 'G',
// industryName: '交通运输、仓储和邮政业',
// institutionalInvestor: '虭賭'
}
};
}
static getDerivedStateFromProps(nextProps, state){
// console.log('????nextProps.clickData', nextProps.clickData, nextProps.selecRegion);
if(nextProps !== state){
data.map(
p=>{
p['label'] = {};
}
);
let {clickData} = nextProps.clickData;
let {allDatalist} = nextProps;
// data = data.concat(pointLight(allDatalist));
// console.log('所有数据', allDatalist);
return {
key: Number(state.key) + 1,
clickData: clickData,
pointLight: pointLight(allDatalist),
MapOption: mapOption(nextProps.clickData, nextProps.selecRegion, pointLight(allDatalist)),
selecRegion: nextProps.selecRegion //顶部搜索框选中的区域需要高亮显示
};
}
}
render() {
const {MapOption, key} = this.state;
// console.log('render!!!', MapOption);
return (
<div className="develop-map">
<div className="chart-title">
<span>区域获得融资的企业分布</span>
</div>
<div className="map-wrap">
{
<EchartBase
key={key}
option={MapOption}
/>
}
</div>
</div>
);
}
}
export default FanceMap;
默认状态下
image.png
点击表格中的企业
image.png
网友评论