var uploadedDataURL = "/siteassets/chart/echarts/options/c37c0a8b-2c6e-4378-85f1-c90aea931acb.json"; // 基于准备好的dom，初始化echarts实例 $.get(uploadedDataURL, function (nantong) { echarts.registerMap('nanTong', nantong); // 指定图表的配置项和数据 option = { backgroundColor: "#000", tooltip: { show: true, }, geo: { name: '南通', // type: 'map', map: 'nanTong', selectedMode: false, zoom: 1, label: { normal: { show: true, textStyle: { color: '#fff', fontSize: '16', }, }, emphasis: { show: true, textStyle: { color: '#fff', fontSize: '16' }, }, }, tooltip: { show: true, enterable: true, //鼠标可进入浮层内 // triggerOn: "click", // 点击触发 backgroundColor: 'transparent', borderColor: 'transparent', // 修改字体颜色 extraCssText: 'box-shadow: none', padding: 10, formatter: function (params) { // 租金总数租户数出租率收缴率 // 20,000 20,000 68% 78% let res = `

资产数 12665

租金总数 20,000

租户数 20,000

出租率 68%

收缴率 78%

` return res }, }, roam: false, itemStyle: { normal: { areaColor: 'rgba(0, 28, 76, .35)', shadowColor: '#2B8FAF', shadowBlur: 4, shadowOffsetX: -4, shadowOffsetY: 10, borderColor: '#17caf0', }, emphasis: { areaColor: 'rgba(35, 242, 255, 0.6)', borderColor: 'rgba(254,240,59,0)', }, }, data: [ { name: '海安市', value: 477, myl: '93.2%' }, { name: '通州区', value: 877, myl: '93.2%' }, { name: '如东县', value: 356, myl: '93.2%' }, { name: '港闸区', value: 1532, myl: '93.2%' }, { name: '如皋市', value: 447, myl: '93.2%' }, { name: '开发区', value: 963, myl: '93.2%' }, { name: '海门市', value: 809, myl: '93.2%' }, { name: '崇川区', value: 4641, myl: '93.2%' }, { name: '启东市', value: 1268, myl: '93.2%' }, ], }, series: [ { name: '资产数', type: 'effectScatter', coordinateSystem: 'geo', tooltip: { show: false, }, zlevel: 2, rippleEffect: { period: 4, //动画时间，值越小速度越快 brushType: 'fill', //波纹绘制方式 stroke, fill scale: 12, //波纹圆环最大限制，值越大波纹越大 number: 2, }, label: { normal: { show: true, position: [-12, 12], formatter: '{b}', fontSize: 10, }, }, // 发散点的大小 symbolSize: function (val) { return 4 // return val[2] / 10; }, itemStyle: { // color: colors[i], }, emphasis: { areaColor: '#2B91B7', }, data: (() => { let colors = ['#FF0D0D', '#FF6600', '#FFCC00', '#28E3F2', '#D983A9'] let data = { 资产数: [ [121.063142, 32.073975, 10], [121.091888, 32.048025, 10], [120.882044, 32.01815, 10], [121.164327, 31.8907, 10], [121.030947, 31.894624, 10], [120.70612, 32.312558, 10], ], 租金总数: [[120.873995, 32.067611, 10], [121.003351, 32.094044, 10], []], 租户数: [ [120.982654, 32.019619, 10], [121.095912, 31.984344, 10], [120.517547, 32.601137, 10], ], 出租率: [ [120.939535, 32.086213, 10], [121.04762, 32.01717, 10], [121.04762, 32.01717, 10], [121.773163, 31.846541, 10], ], 收缴率: [ [120.872845, 32.042149, 10], [121.24769, 31.891681, 10], [121.299433, 32.355514, 10], ], } let finalData = [] Object.keys(data).map((i, index) => { let child = data[i].map((row) => ({ // name: i, value: row, itemStyle: { color: colors[index], }, })) finalData = [...finalData, ...child] }) return finalData })(), }, ], }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }) // toolTip style // .mapInfos { // width: 296px; // height: 209px; // background: url(~@/assets/mapBox.png) no-repeat; // background-size: cover; // padding: 30px 25px; // color: #fff; // font-weight: bold; // font-size: 16px; // &-item { // width: 100%; // display: flex; // align-items: center; // justify-content: space-between; // line-height: 32px; // .round { // width: 12px; // height: 12px; // border-radius: 50%; // margin-right: 16px; // &_1 { // background-color: #FF0D0D; // } // &_2 { // background-color: #FF6600; // } // &_3 { // background-color: #FFCC00; // } // &_4 { // background-color: #28E3F2; // } // &_5 { // background-color: #D983A9; // } // } // .label { // display: inline-block; // width: 64px; // margin-right: 6px; // } // .num { // display: inline-block; // flex: 1 0 0; // min-width: 0; // font-size: 24px; // text-align: right; // color: #FFCC00; // } // } // }

南通地图点放射