Echarts可视化 中国地图来一下
你看看
·
Echarts 数据可视化
//！！！！！json文件需自己下载 直接搜Echarts官网中国地图json。有免费压缩包
<!DOCTYPE html>
//json 也可来这自取http://datav.aliyun.com/tools/atlas/index.html#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>China地图</title>
</title>
//引入js文件
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
<script src="./jquery-3.6.0.min.js"></script>//这是我的上级目录
</head>
<body>
<div id="overview" style="width: 800px;height: 600px;margin: 0 auto;border: 1px solid #000;"></div>
<div id="overview1" style="width: 600px;height: 400px;margin: 0 auto;border: 1px solid #000;"></div>
<script>
var gxy = echarts.init(document.getElementById('overview'))
//可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的图形
$.get('Json/china.json', function(ret) {//json 目录路径
//ret 就是中国各省的矢量地图
// console.log(ret)
echarts.registerMap('chinaMap', ret)
var option = {
geo: {
type: 'map',
map: 'chinaMap',
roam: true, //缩放--拖动
label: {
show: 'true'
},
zoom: 1, //页面加载放大地图倍数
// center: [87.617733, 43.792818],//设置地图中心点的坐标
series: {
type: 'map',
projection: {
project: (point) => [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],
unproject: (point) => [point[0] * 180 / Math.PI, 2 * 180 / Math.PI * Math.atan(Math.exp(point[1])) - 90]
}
}
},
}
gxy.setOption(option)
})
</script>
<script>
var gxy1 = echarts.init(document.getElementById('overview1'))
var pieDate = [{
name: '淘宝',
value: '12356'
}, {
name: '京东',
value: '22685'
}, {
name: '唯品会 ',
value: '6886'
}, {
name: '拼多多',
value: '9825'
}, {
name: '二号商铺',
value: '12586'
}, ]
var options = {
series: [{
type: 'pie',
data: pieDate,
//显示样式
label: {
show: true, //显示文字
formatter: function(arg) {
//console.log(arg);
return arg.name + '平台\n花费' + arg.value + '元\n' + arg.percent + '%\n' + arg.seriesType + '类型'
}
},
// radius: 100 //饼图半径
//radius: ['50%', '75%'], //第一个元素表示内圆半径，第二个元代表外圆半径
//roseType: 'radius', //是每个区域的半径都不相同值大，半径越大
//selectedMode: 'single', //点击区域，能使区域偏离原点一点距离
selectedMode: 'multiple' //使多个区域偏离圆点
}]
}
gxy1.setOption(options)
</script>
</body>
</html>
永洪科技，致力于打造全球领先的数据技术厂商，具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)