用echarts生成图表插件炫光的分布地图页面完整源代码
时间: 2024-03-11 11:45:57 浏览: 138
html5 echarts图表插件实现的带发光效果分布地图动画特效源码.zip
好的,下面是一个使用echarts生成图表插件炫光的分布地图的完整页面源代码,您可以参考一下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>炫光的分布地图动画特效</title>
<style type="text/css">
#chart {
width: 800px;
height: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.1.2/dist/echarts-gl.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 绘制地图
myChart.setOption({
tooltip: {
trigger: 'item',
formatter: '{b}'
},
geo: {
map: 'world', // 地图类型
roam: true,
zoom: 1.2,
label: {
show: false
},
itemStyle: {
areaColor: '#1d1d1d',
borderColor: '#404a59'
},
emphasis: {
itemStyle: {
areaColor: '#2a333d',
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: '#00fffb'
}
}
},
series: [{
type: 'scatter',
coordinateSystem: 'geo',
data: [ // 数据
{name: '北京', value: [116.407394, 39.904211]},
{name: '上海', value: [121.473662, 31.230372]},
{name: '广州', value: [113.280637, 23.125178]},
{name: '深圳', value: [114.057868, 22.543099]},
{name: '香港', value: [114.173355, 22.320048]},
{name: '悉尼', value: [151.209296, -33.868820]},
{name: '纽约', value: [-74.005941, 40.712784]},
{name: '伦敦', value: [-0.127758, 51.507351]},
{name: '东京', value: [139.691706, 35.689487]},
{name: '新德里', value: [77.209021, 28.613939]},
{name: '迪拜', value: [55.269441, 25.204849]}
],
symbolSize: 12,
label: {
show: true,
position: 'right'
},
itemStyle: {
color: '#ffeb7b'
},
emphasis: {
label: {
show: true
}
},
rippleEffect: { // 炫光特效
brushType: 'stroke',
period: 4,
scale: 6
},
animationDurationUpdate: 1000, // 动画特效
animationEasingUpdate: 'quinticInOut'
}]
});
</script>
</body>
</html>
```
以上就是使用echarts生成图表插件炫光的分布地图的完整页面源代码。您可以将代码复制到本地,用浏览器打开查看效果。希望对您有所帮助!
阅读全文